Chapter 8: Tables and Lists

Tables and lists help organize and present structured data in your video templates. This chapter covers creating and styling these data-focused elements.

Tables

Tables display data in rows and columns, perfect for comparisons, schedules, pricing, and structured information.

Adding a Table

1. Click Table in the Data section of the element palette
2. A default 3×3 table appears on the canvas
3. Click cells to edit content
4. Resize and position as needed

Table Structure

Tables consist of:

• Rows: Horizontal groups of cells
• Cells: Individual data containers
• Columns: Vertical groups of cells
• Optional header row: First row with distinct styling

Editing Cell Content

To edit a cell:

1. Click the cell you want to edit
2. Type your content
3. Click outside or press Tab to move to next cell

Cells support:

• Plain text
• Variables using {variableName} syntax
• Line breaks within cells

Adding and Removing Rows/Columns

Add Row:

• Right-click a row and select “Add row below”
• Or use the table context menu

Remove Row:

• Right-click a row and select “Delete row”

Add Column:

• Right-click a column and select “Add column”

Remove Column:

• Right-click a column and select “Delete column”

Table Properties

Content Style

Sets the text styling for all cells:

Style	Use Case
Body	Standard table content
Title	Emphasized content
H1, H2, H3	Heading styles for important data

Border Color

The color of cell borders:

• Click the color picker to choose
• Select “No border” for borderless tables
• Borders appear between all cells

Header Row

Enables special styling for the first row:

• Toggle with the “Header” button
• Header row typically has distinct background
• Great for column labels

Horizontal Alignment

Aligns text within all cells:

• Left: Text aligns to left edge (default)
• Center: Text centers horizontally
• Right: Text aligns to right edge

Vertical Alignment

Aligns text vertically within cells:

• Top: Text aligns to top of cell
• Middle: Text centers vertically (default)
• Bottom: Text aligns to bottom of cell

Cell Padding

Space between cell content and borders:

• Measured in pixels
• Higher values create more spacious cells

Column Widths

Adjust relative column widths:

• Values are percentages that sum to 100%
• Equal widths: Each column gets same percentage
• Drag column borders to resize

The Table Toolbar

When you select a table, a toolbar appears:

Control	Function
Style dropdown	Choose content style (Body, Title, H1-H3)
Border color	Pick border color
Header	Toggle header row styling
Align left/center/right	Horizontal text alignment
Align top/middle/bottom	Vertical text alignment
Lock (🔒)	Lock element position

Table Styling Tips

Clean Data Table

Border Color: Light gray
Header Row: Enabled
Content Style: Body
Horizontal Align: Left
Vertical Align: Middle

Pricing Table

Border Color: Subtle or none
Header Row: Enabled
Content Style: Title for headers, Body for data
Horizontal Align: Center for prices

Comparison Table

Border Color: Clear dividing lines
Header Row: Enabled (features column)
Content Style: Body
First column: Feature names
Other columns: Check marks or values

Table Animations

Tables support reveal animations that progressively show cells during playback.

Animation Types

Type	Description
None	Table appears instantly (default)
Row by Row	Rows fade in from top to bottom
Column by Column	Columns fade in from left to right
Zig-zag	Cells fade in one-by-one in reading order

Animation Properties

Property	Description
Duration	How long each row/column/cell takes to fade in (seconds)
Delay	Wait time before the animation starts (seconds)
Easing	Animation curve (linear, ease, ease-in, ease-out, ease-in-out)
Timing	Monotonous (evenly spaced) or On Keyframe (triggered at specific keyframe times)

Setting a Table Animation

1. Select the table element
2. Open the Properties panel
3. Choose an animation type from the Animation section
4. Adjust duration, delay, and easing to taste
5. Preview to see the reveal effect

Keyframe-Based Timing

When timing is set to On Keyframe, you control exactly when each group (row, column, or cell) appears by placing keyframes in the timeline. This allows precise synchronization with other elements or audio.

Per-Cell Customization

Individual cells can have custom settings:

Cell-Level Properties

• Background color: Highlight specific cells
• Text color: Override text color
• Text align: Different alignment per cell
• Content style: Different styling per cell
• Colspan: Cell spans multiple columns
• Rowspan: Cell spans multiple rows

Setting Cell Properties

1. Select the specific cell
2. Use the Properties panel or context menu
3. Override the global table settings

Lists

Lists present ordered or unordered sequences of items.

Adding a List

1. Click List in the Data section of the element palette
2. A default list with three items appears
3. Click items to edit content
4. Add or remove items as needed

List Types

Type	Description	Example
Unordered (ul)	Bullet points	• Item one
Ordered (ol)	Numbered items	1. Item one

Editing List Items

To edit an item:

1. Click the item text
2. Type your content
3. Click outside to confirm

To add an item:

• Press Enter at the end of an item
• Or use “Add item” from context menu

To remove an item:

• Delete all text and press Backspace
• Or use “Delete item” from context menu

List Properties

List Type

• Unordered (ul): Displays bullet points
• Ordered (ol): Displays numbers (1, 2, 3…)

Font Size

Text size for list items in pixels.

Color

Text color for all list items.

Line Height

Spacing between lines and items:

• Values like 1.5 or 2 for comfortable reading
• Higher values create more space

Nested Lists

Lists can contain sub-items:

• Main item 1
  • Sub-item 1a
  • Sub-item 1b
• Main item 2

To create nested items:

1. Add a child item from context menu
2. Or indent with Tab key (if supported)

Variables in Tables and Lists

Both tables and lists support dynamic content:

Table Variables

| Product | Price |
|---------|-------|
| {productName} | ${price} |

List Variables

• {feature1}
• {feature2}
• {feature3}

Variables are replaced with actual values during rendering.

Common Use Cases

Feature Comparison Table

Perfect for comparing products or plans:

1. First column: Feature names
2. Additional columns: Products/plans
3. Use checkmarks (✓) or values
4. Header row for plan names

Pricing Display

Show pricing tiers:

1. Columns for each tier
2. Rows for price, features
3. Highlight recommended tier
4. Use large font for prices

Schedule/Timeline

Display time-based information:

1. First column: Times
2. Second column: Events/activities
3. Clear header row

Benefits List

Enumerate advantages:

1. Unordered list
2. Brief, scannable items
3. Consistent formatting
4. Consider adding icons

Step-by-Step Instructions

Guide through a process:

1. Ordered list
2. Clear, actionable steps
3. Numbers provide sequence

Styling Best Practices

Tables

• Use header rows for clarity
• Align numbers to the right
• Keep consistent column widths
• Don’t overcrowd cells
• Use subtle borders

Lists

• Keep items concise
• Use parallel structure
• Limit nesting depth
• Maintain consistent formatting

Troubleshooting

Table Text Not Showing

• Check font size isn’t too small
• Verify text color against background
• Ensure cell padding allows for content

Column Widths Uneven

• Check column width settings
• Reset to equal widths if needed
• Adjust manually for content

List Numbers Not Sequential

• Check list type is “ordered”
• Verify items are in correct order
• May need to recreate list

Cells Won’t Resize

• Adjust column width percentages
• Check if element is locked
• Verify table isn’t at minimum size

Content Cut Off

• Increase cell padding
• Reduce font size
• Expand table dimensions
• Check text alignment

---

← Previous: Shape Elements | Next: Scene Sounds →