Tables

The Table element places a real table on your page, with rows, columns and header cells that you can add, remove and style at any time. Tables carry over to the mobile layout automatically, and header cells make the table accessible for readers who use assistive technology.

Adding a table

To add a table to your page:

1. Open the Add elements drawer and go to Numbers.
2. Drag Table onto the canvas. The new table has 3 columns: one header row and two empty rows.
3. Double-click the table to edit its cells.
4. Press Tab to move to the next cell. Pressing Tab in the last cell adds a new row.

Adding and removing rows and columns

You change a table's structure through the context menu, which opens when you right-click inside a table you are editing.

1. Double-click the table to edit it.
2. Right-click the cell where you want to make the change.
3. Choose an action:
4. • Row before or Row after adds a row above or below the cell.
   • Column before or Column after adds a column to the left or right of the cell.
   • Delete row or Delete column removes the row or column that contains the cell.
   • Merge cells combines the selected cells into one. Select several cells before you right-click.
   • Split cell divides a merged cell again.

Making a table header

A table header is a row or column whose cells describe the content of the other cells. Headers are important for accessibility, and you can style them separately from the rest of the table.

To turn a row, column or single cell into a header:

1. Double-click the table to edit it.
2. Right-click a cell in the row or column.
3. Choose Toggle header row, Toggle header column or Toggle header cell.

Choose the same option again to turn the header back into normal cells.

Styling a table

You style a whole table in the Edit style section of the table's settings in the right panel. By default, a table has a black header with white bold text and thin black borders.

1. Select the table.
2. In the right panel, go to Edit style.
3. Click the level you want to style: Table, Header, Row or Cell.
4. Set the typography, background, padding, border or text alignment in the window that opens. The options differ per level.
5. To style more specific levels, click the sliders icon in the Edit style header. This adds levels for odd, even, first, last and hovered rows, and for even, first and last columns.

Style order

Table styles are applied in layers. Each level styles its own part of the table, and a more specific level overrides a more general one:

• Table is the base layer and applies to the whole table.
• Row and the more specific row levels style the rows, on top of the Table layer.
• Header styles the header cells, and overrides Table and the row levels for those cells. A row level's background doesn't show in header cells that have their own background, such as the default black header.
• Cell styles all cells that are not header cells, and overrides Table and the row levels.
• The column levels (Column (even), Column (first) and Column (last)) override Cell for the cells in those columns. They don't apply to header cells.

Styles applied to individual cells while editing the table override all Edit style levels.

Styling individual cells

To give one or more cells their own style:

1. Double-click the table to edit it.
2. Select the cells you want to change.
3. In the right panel, change the typography under Inline edit, or set Cell background or Vertical align.

These cell styles override everything set for the table in Edit style.

Setting column width

By default, the columns of a table share the width of the table's frame equally, whatever their content. To give a column its own width:

1. Double-click the table to edit it.
2. Hover over the edge of a column until the resize handle appears.
3. Drag the edge to the width you want.

The width is stored in pixels, and the mobile layout uses the same column widths as desktop. Columns you haven't resized keep sharing the remaining width. Once every column has a width, the table is as wide as the sum of those widths, so it can become wider than its frame. Set a width for every column if you want the table to scroll horizontally.

Tables on mobile

A table appears on the mobile layout automatically, with the same content and styling as on desktop. On the mobile layout, you can override the styling, for example to make the typography smaller or reduce the cell padding.

Avoid editing the table's content on the mobile layout. Once you do, the mobile content is detached from desktop, and later changes to the desktop table no longer carry over to mobile. The right panel then shows "Text is overwritten on mobile. Reset on mobile layout to sync." To undo this, select the table on the mobile layout and click Reset in the "Reset element" bar at the top of the editor.

Making a table scroll

A table scrolls inside its frame when the Scrollbar setting is on and the table is larger than the frame. This is how a wide or long table stays readable on mobile.

1. Select the table.
2. If the table should only scroll on mobile, switch to the mobile layout.
3. In the right panel, click the + next to Scrollbar to switch it on.
4. Optionally, set the scrollbar's Width, Background and Tracker colours, or tick Hide scrollbar to keep scrolling without a visible bar.
5. For horizontal scrolling, set a width for every column so the table becomes wider than its frame. See Setting column width.

When the Scrollbar setting is on, swiping inside the table on the published page scrolls the table instead of turning the page.

Keeping the header visible while scrolling

The Sticky table header on scroll setting keeps a table's header cells in view while readers scroll through the rows. A header row stays at the top and a header column stays at the left. This works both when the whole page scrolls and when the table scrolls inside its own frame.

1. Select the table.
2. In the right panel, below Edit style, tick Sticky table header on scroll.

The setting only has an effect when the table has header cells.

Stretching the table to its frame

By default, a table's height is the total height of its rows, and you add white space between rows by giving the cells more padding. To make the table fill the full height of its frame instead:

1. Select the table.
2. In the right panel, below Edit style, tick Stretch height in container.

The rows then grow to fill the frame.

Frequently asked questions

How do I delete a row or column from a table?

Double-click the table to edit it, right-click a cell in the row or column, and choose Delete row or Delete column.

Why doesn't my table scroll horizontally?

A table only scrolls horizontally when two things are true. The Scrollbar setting in the table's right panel must be on, and every column must have a width set by dragging its edge, with a total width larger than the table's frame. Columns without a set width share the frame width, so the table never becomes wider than its frame.

Why don't my desktop changes to a table show on mobile?

The table's content was edited on the mobile layout, which detaches the mobile content from desktop. The right panel shows "Text is overwritten on mobile. Reset on mobile layout to sync." To make it follow the desktop content again, switch to the mobile layout, select the table and click Reset in the "Reset element" bar at the top of the editor.

Updated on: 20/10/2026