Skip to main content

Tables

  Tables should only be used for displaying data in a tabular format. Tables should not be used for layout or arranging elements on a page.

Tables can be difficult for assistive devices such as screen readers to parse, so they should only be used sparingly and only for true tabular data. If you need to layout information in a grid format, try using the multi-row/column content options instead.

  The Summary attribute should be used when creating tables to provide a description to the user of what information the table contains and its structure.

Assistive devices such as screen readers cannot decipher how the table should be read (by column or by row or in a matrix formation). Each cell is read individually, so it is important to indicate which column or row contains headings and which contain data, so that reading direction can be determined.

For example:

An example summary for the table below would be Contact information. Table of 2 columns, to be read by row. Column 1 lists names, Column 2 lists phone extensions. The summary field will not appear on the page, but can be read by assistive devices like screen readers.

Sample table:

Contact information
John Doe ext. 1234
Jane Doe ext. 5678

  Semantic HTML table headings should be used for headings in tables instead of regular text headings.

Regular text headings include H1- to H6-level headings. Headings in tables can be better defined for assistive devices such as screen readers using semantic HTML table cell headings.

How to

  1. Select the Table icon in the WYSIWYG editor toolbar. Select the number of columns and rows (you can edit this after).Insert table screenshot
  2. An empty table will appear. Place your cursor in a cell and add your content.
  1. Highlight the two cells you want to merge. Ensure that the cells are fully highlighted (not just the text).
  2. Right click and hover over Cell, then select Merge cells. Merge Table cells screenshot
  1. Highlight the merged cells. 
  2. Right click and hover over Cell, then select Split cells. 

Add a row

  1. Click inside a cell.
  2. Right click and hover over Row, them select Insert Row Before to insert a row above the current row, or Insert Row After to insert a row below the current row.Add a row screenshot

Remove a row

  1. Highlight the row you want to remove or click inside a cell that is in the row you want to remove.
  2. Right click and hover over Row, then select Delete row.Delete a row screenshot

Add a column

  1. Click inside a cell.
  2. Right click and hover over Column, then select Insert column before to insert a column before the current column, or Insert column after to insert a column after the current column. Insert column screenshot

Delete a column

  1. Highlight the column you want to remove or click inside a cell that is in the column you want to remove.
  2. Right click and hover over Column, then select Delete column. Delete column screenshot

There are several style options to choose from when creating tables. By default, tables will have an outside border, no cell borders, rows will alternate between white and light grey, and the width will automatically adjust to the cell contents (unless set widths are specified on columns). 

The available style options are listed and described below. You can have one or several styles "chained" together on a single table. 

tblFullWidth - The table will span the full width of the content area. 
Example of full width table

tblWhite - All cell backgrounds will be white; rows will not alternate between white and light grey.
Example of white table

tblNoBorders - Remove the default outside border around the table.
Example of table with no outside borders

tblCellBorders - Add a border around each cell. 
Example of table with cell borders

tblRowBorders - Add borders only to the rows (tblCellBorders should not be selected).
Example of table with row borders

tblAlignTop - Aligns multi-line text in each cell to the top (the default is the middle of the cell).
Example of table with multi-line text aligned to the top of the cell

How to

Add styles to a table

  1. Create your table and add your content.
  2. Highlight the entire table so that all the text is highlighted and 'table' appears in the WYSIWYG editor footer.  Highlight entire table screenshot
  3. Select the Formats dropdown, then Custom and select a table style, which begins with 'tbl'.how to format a table
  4. To add or chain another style to the table, repeat the steps above.

Example of table with tblFullWidth, tblWhite, tblNoBorders, and tblRowBorders applied:

Example of table with multiple styles

  Formatting tables in the WYSIWYG editor can be tricky. Please contact us if your table is not displaying as you intended. Make a note in the comments section when you submit the page to the workflow.

  1. Review the accessibility guidelines for tables .
  2. Use proper table cell headings and other HTML formatting to make a table more accessible. Instead of using regular text headings or bolded text in tables, you can use semantic HTML table headings. 
    1. Right-click in a table cell and select Cell >  Cell properties.
      Cell properties
    2. In the Cell Type dropdown, select Header cell.
      Header cell
    3. Click Ok to save your changes.
  3. When you submit the page and perform a content review, the CMS will scan your page for basic accessibility. Tables that do not contain a summary will be flagged as an accessibility error.
    Accessibility check on tables
  4. Select Fix to add a table summary. Enter your table summary in the field provided.

Contact us if you require further assistance with styling or creating accessible tables. 

Search the CMS User Guide