Tables with Multi-Level Headers

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.

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.

Full code for Example “Table with multiple column headers in each column”

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.

Full code for Example “Table with three headers related to each 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.