This page covers tables that have multi-level header cells associated per data cell. Such tables are too complex to identify a strict horizontal or vertical association between header and data cells. In such tables, each table header is represented by a (document-wide) unique
id. Data cells refer to those
ids by listing one or more in their
headers attribute, separated by spaces.
Tables that should be marked up this way include:
- Tables with column headers that repeat or change part-way through the table.
- Tables with three or more header cells associated with each data cell.
Tables with multiple headers may also need to have a caption to identify it and a summary to describe the layout of the table, see Caption & Summary.
In many cases, it is worth considering to restructure the information in such tables to make them less complex for all readers, for example by splitting the information in smaller, more manageable tables as shown in Example 3.
Table with multiple column headers in each column
In the table below, the headers for the top half of the tables are different to the headers of the bottom half. The header changes halfway through the table which makes the headers in columns ambiguous. To ensure each data cell is associated with the correct header, each
<th> element has a unique
id and each
<td> cell has a
headers attribute that lists the
id values of the associated header cells.
|Example 1 Ltd||Example 2 Co|
|Contact||James Phillips||Marie Beauchamp|
|Position||Sales Director||Sales Manager|
|Example 3 Ltd||Example 4 Inc|
|Contact||Suzette Jones||Alex Howe|
|Position||Sales Officer||Sales Director|
In the following code snippet, the headers for the header cells themselves have been set to an empty cell (with the
id “blank”). This will prevent some assistive technologies from reading a header for those heading cells.
Table with three headers related to each data cell
In this example, table headers are used as subheadings to describe what the next section of the table is about. Without these headers, the information would be unclear. Using the
headers attribute, all three headers can be properly associated with the data cell.
Split up multi-level tables
The two tables below provide the same information as the mutli-level table in the example above. This makes the information easier to understand for everyone and easier to code. Also, simple tables are much better supported by tools to create web content, including WYSIWYG (“What you see is what you get”) editors.
Availability of holiday accommodation
Related WCAG 2.0 resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels: