# Table Panel

Use Table Panels when each child belongs in a specific cell. Add one from the left sidebar. Children have assigned positions and can span multiple rows or columns; Grid Panel children flow in order instead.

## Common properties

Most blocks share these controls in the right sidebar. Selecting a child also shows controls for its parent layout.

| Property | Details |
| --- | --- |
| Size | Width can be fixed, percentage-based, or automatic. Height can be fixed, flexible, or constrained by minimum and maximum values. Lock the aspect ratio to preserve proportions. Size values support variables. |
| Arrange | X and Y position blocks on the canvas or inside Free Panels, using fixed values or percentage anchors. Alignment controls place blocks at common positions. Rotate, flip, lock, or change the layer order. |
| Background | Choose a solid color, a linear, radial, or conic gradient, or a pattern. Colors support variables. Gradient stops have colors and positions and are sorted by position; linear and conic gradients also have an angle. Pattern colors and size support variables, with controls varying by pattern. |
| Border | Simple mode shares color, thickness, style, and radius across all sides. Advanced mode sets each side's color, thickness, and style and each corner's radius independently. |
| Shadow | Add layers of regular shadow, inner shadow, or glow, subject to the block-specific limits below. |

Canvas and block backgrounds are separate: transparent areas reveal the parent or canvas. Patterns are based on [CSS Pattern](https://css-pattern.com/). See [Sizing and positioning](/template-editor/advanced/sizing-positioning/) for sizing modes and position anchors.

**Auto size to grid cell** makes a child fill its assigned area. Disable it when the child should keep its own width or height.

## Block-specific properties

| Property | Details |
| --- | --- |
| Padding | Space inside the panel edge. Simple mode sets all sides; Advanced mode sets each side. Separate from gaps and child margins. |
| Columns | Number and sizing of columns. |
| Rows | Number and sizing of rows. |
| Column gap | Space between columns. |
| Row gap | Space between rows. |
| Cell alignment | Default alignment for blocks inside cells. |

## Child properties

Select a child to adjust its behavior inside the Table Panel.

| Property | Details |
| --- | --- |
| Position | Assigned column and row. |
| Columns | Number of columns the child spans. |
| Rows | Number of rows the child spans. |
| Horizontal align | Horizontal alignment override. |
| Vertical align | Vertical alignment override. |
| Margin | Space around the child inside its cell, without changing the whole table. |
| Auto size to grid cell | Whether the child fills the cell area. |

## Grid tracks

Each column and row has its own size and background. Select a track using its hover selector or the collapsible Rows and Columns sections in the panel sidebar.

| Size mode | Behavior |
| --- | --- |
| Defined | Use fr, %, or px. |
| Auto | Size to the content. |
| Min Content | Use the smallest intrinsic size. |
| Max Content | Use the largest intrinsic size. |

Track backgrounds create bands or highlights. Child backgrounds appear above them; transparent children let the track background show through.

See [Advanced panels](/template-editor/advanced/panels/) for help choosing and combining panel types.

## Templated content

Many properties can use [variables](/template-editor/variables/) to assign their value when each image is created. Variables can be required, ignored, or given a fallback value. Pass values in `template_values` when rendering the template.