Table Block

The Table block presents structured values in rows and columns so visitors can compare related information quickly.

Use it for concise specifications, schedules, plan comparisons, or other data whose column relationships matter.

Properties

Edit the table content first, then use the available layout controls only when the Table sits inside a section grid.

The Properties capture above shows the layout controls available for a Table in grid context.

Table content

Edit headers and cells directly in the Table editor. Keep one clear subject per table, use concise column headings, and place related values in a consistent row order.

In direct inline content, the Table participates in the article flow. Its height follows its rows, typography, padding, and borders.

Responsive Vertical Position

Inside a section grid, Desktop supports Top, Center, or Bottom placement within the block frame. Tablet inherits Desktop until changed, and Mobile inherits Tablet, then Desktop. This control positions the table vertically; it does not add data rows or change the section grid.

Style Panel

Table styles the complete surface with Spacing, Background, Borders, and Effects. Its On Hover state can also use Transform and Transition.

Header, Rows, and Cells each expose Typography, Background, and Borders, with matching hover treatment and Transition where supported. Use Header for column labels, Rows for row-wide rhythm or states, and Cells for the individual data areas.

Build the Default state first, preserve readable contrast, and use hover only as supplementary feedback. Gradient border paint and effects-style backgrounds are not available on Header, Rows, or Cells.

Responsive behavior

Table is content-driven. In a grid it starts at 8 columns by 4 rows, but the final height should follow the rendered rows, cell wrapping, padding, and borders.

At narrow widths, check the longest headings and values for readable wrapping and horizontal overflow. Preserve the column relationships; do not force dense data into unreadably narrow cells.

Accessibility

Use clear header text that identifies each column and keep the reading order logical from left to right and top to bottom.

Maintain sufficient contrast for headers, rows, cells, borders, and hover states. Never use color alone to encode the meaning of a value.

Keep the table concise. For complex datasets, add nearby context or a downloadable accessible format rather than relying on cramped visual density.

Tips & tricks

1. Build a clear reading hierarchy before refining decorative details.

2. Keep each column focused on one comparable attribute.

3. Let the rendered rows determine height instead of adding empty grid space.

4. Test the shortest, longest, empty, and most complex realistic values.

Common mistakes

• Styling before headers and values establish a clear structure.

• Using vague headers, inconsistent units, or excessive column counts.

• Depending on hover or color alone to explain the data.

Quick recipe

Add the final headers and values, set Responsive Vertical Position only when the Table is in a grid frame, style Table plus Header, Rows, and Cells as needed, then verify wrapping, contrast, and overflow at all three breakpoints.