Skip to Main content

Tables

Web Style Guide

Tables can be added to web pages to display structured data, but they should be used correctly to ensure clarity and accessibility.

  • Tables should be used only for tabular data that is naturally organized in rows and columns, never for layout purposes, as this can cause accessibility issues. Use Blocks, such as the Grid System, to organize things visually without using a table.
  • Tables should have column and/or row headers to provide context to the data.
  • Tables should include a caption that provides a clear description of the table’s content.

Inserting Tables

Using the Table Button

Click the Table button in the editor toolbar, hover over “Table” and click in the grid to indicate the number of rows and columns you want in your table. The resulting table will contain no headers or captions, which will need to be added manually.

Using a Content Layout

A starter table is provided as a Content Layout that is preformatted with a caption and proper headers. Click “Insert” in the toolbar, then “Content Layout”. In the dropdown, choose “Table”, and click “Insert”. A table will be added that looks like the following. Rows or columns can be added following the instructions below.

Caption
Header Header
Content Content
Content Content

Editing Tables

Right-click a table to open a context menu with options for editing the table:

  • Choose “Cell > Cell Properties” to change its type between “Cell” and “Cell Header”, for example to create a header at the beginning of a row.
  • Hover over “Row” to reveal options for adding or removing rows.
  • Hover over “Column” to reveal options for adding or removing columns.
  • Click “Table Properties” to access the checkbox for adding a caption.
  • Click “Delete Table” to remove the table from the page.