Tables concepts
Overview
Data tables are used to organize data in columns and rows. It is important to mark up tables semantically to define the relationship between header cells and data cells. For simple tables, using the <table>, <tr>, <th>, and <td> elements makes the relationships perceivable. It is also recommended to use the scope attribute even on simple tables. For complex tables, using the <col> and <colgroup> elements and the scope, id and headers attributes makes the associations explicit.
Screen readers leverage table mark up to declare header information that changes as the user navigates the table by keyboard. The screen reader declares table row and column headers when it makes sense -- moving from a cell in one column to a cell in the next, that next column header is read aloud; moving from one row to the next, that next row header is read aloud. With some screen readers, when users get lost in a complex table, they can “query the table
” and the screen reader will read all the headers associated with whatever cell currently has focus.
To make information accessible to the widest possible audience, convert complex tables into simple tables, and convert tables into lists if the data is simple.
Canada.ca Content Style Guide
Follow the Canada.ca Content Style Guide Section 5.3 recommendations for tables:
- Use tables to organize and present data
- Value of each cell relates to the column and row headers
- Entries in a column don't contain information that could be considered a subhead
- Value of each cell aligns with the column header that appears directly above it
- Give your table a clear title (using
<caption>) that describes the information in it - Convert complex tables into one or more simple tables
- Convert a table to a list if the data is simple