- Docs
- Template Editor
- Blocks
- Table Panel
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. See Sizing and 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
Section titled “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
Section titled “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 for help choosing and combining panel types.
Templated content
Many properties can use 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.