Tables organise and display information from a data set.
Use tables to make information easier to compare and scan for users.
When using tables:
- Make your tables as easy to understand as possible
- List your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order
- Provide a caption to describe what the table is about
- Header cells must be marked up with
<th>and data cells with
<td>to make tables accessible
- Complex tables may require more explicit cell and header associations using
id, and headers attributes
- Provide a summary for complex tables describing how the data is organised to help users understand and navigate the table
Use a sortable table when you want to give users the option to order content.
A flexible table adjusts on smaller screen sizes to display the content as stacked.
- Headers should be informative and descriptive
- Include unit of measurement symbols in the header so they aren’t repeated throughout the columns
- Use decimals consistently
- Start your headers with a capital letter
- Don’t use commas or any punctuation at the end of each header
- Don’t use more than three words per header