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. 


  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 HTML table cell headings. HTML table cell headings can be created in the HTML source code. For assistance with creating semantic table headings, contact us

Search the CMS User Guide