Table Component

Display simple tabular data

The table component is used to display numerical data or short, simple text. Tables should be reserved for structured, tabular data, rather than visually structuring text items, links, paragraphs, or lists.

Use the table caption to summarize the table contents for screen reader users. Include a headline and additional text for instructions or other supplemental information.

Consider Alternatives

Avoid using tables if possible. Although a perfectly coded table meets the basic accessibility requirements, tables are generally a less-than-ideal experience for users, especially those with disabilities, on mobile devices, or when using a screen reader.

Additional considerations:

• Tables should never contain complex, rich text, such as paragraphs, bulleted lists, and headlines.
• It is likely the table will scroll horizontally on mobile devices, meaning users are unlikely to see complete rows on their screens.
• Small tables might be more scannable as bulleted lists with headlines.
• Large tables might be more effective broken down into small bites of information, even several smaller tables.
• If the information is primarily for regulatory bodies, do they require it to be displayed on the website, or would a link to a spreadsheet satisfy our obligation?
• It might be more appropriate to spread the information across multiple web pages in another format.

Required Fields

• Completed table head
• Minimum of 2 columns
• Minimum of 3 rows

Character Limits

• Headline: 35 characters
• Every cell requires content

Usage Guidelines

• The number of cells in each row must match the number of columns in the header.
• Each cell should contain an entry. Use "N/A" or a similar placeholder for empty values.
• Always include a caption summarizing the table for screen readers.
• Avoid complex content such as rich text, paragraphs, or bulleted lists inside tables.
• Before using a table, consider alternatives such as bulleted lists, organized text, or links to downloadable spreadsheets.

Example