Tables allow you to present sets of data in visually appealing displays to help convey detailed information.
Guidelines and Best Practices
- Organize your tables in order of importance from left to right
- Use clear and simple language
- Remove complexity where possible
- Consider breaking complex tables into smaller tables
- Avoid combining multiple types of data into a single cell
- Avoid hosting large data sets when possible
- Consider how your table displays on mobile screens
- Consider removing non-essential columns for the best user experience on mobile screens
- When possible, consider making a table the last section on a page to prevent information from being pushed down and hidden on mobile screens
- Follow best practices for Links
- Add a caption to provide broad context for users – especially those accessing the table with a screen reader.
Tables that are used to present data in a column and row format must be appropriately marked up in the html. Tables should include column headers and a caption.
Without the appropriate markup, a screen reader would read the resulting table from left to right and line by line which would not make much sense, particularly in a large data table. With the markup, users of screen readers will hear the information presented in a logical way.
We do not recommend using a table strictly for layout purposes (i.e., not to present tabular data). If you opt to do so, do not use the caption, table header, and scope markup described above, but do know that the screen reader software will read it as people read a book, left to right and top down. Be aware that your layout might not make sense and consider using CSS rather than table html.