Multi-level Tables

Multi-level tables are too complex to identify a strict horizontal or vertical association between header and data cells. In such tables, each table header is identified with an (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 to each data cell.

Multi-level tables 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 to consider 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 an unique id and each <td> cell has a headers attribute that lists the id values of the associated header cells.

Example:
Supplier contacts
  Example 1 Ltd Example 2 Co
Contact James Phillips Marie Beauchamp
Position Sales Director Sales Manager
Email jp@1ltd.example.com marie@2co.example.com
  Example 3 Ltd Example 4 Inc
Contact Suzette Jones Alex Howe
Position Sales Officer Sales Director
Email Suz@ltd3.example.com howe@4inc.example.com
Code snippet: Assigning id attributes to <th> cells
[…]
<th id="co1">Example1 Ltd</th>
<th id="co2">Example2 Co</th>
[…]
<th id="c1">Contact</th>
[…]
Code snippet: Assigning header attributes to <td> cells
[…]
<td headers="co1 c1">James Phillips</td>
<td headers="co2 c1">Marie Beauchamp</td>
[…]

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

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.

Example:
Availability of holiday accommodation
Studio Apt Chalet Villa
Paris
1 bedroom 11 20 25 23
2 bedroom - 43 52 32
3 bedroom - 13 15 40
Rome
1 bedroom 13 21 22 3
2 bedroom - 23 43 30
3 bedroom - 16 32 40
Code snippet: Assigning id attributes to <th> cells
[…]
	<th id="par" colspan="5" scope="colgroup">Paris</th>
</tr>
<tr>
	<th id="pbed1">1 bedroom</th>
[…]
Code snippet: Assigning header attributes to <td> cells
[…]
<td headers="par pbed1 stud">11</td>
<td headers="par pbed1 apt"> 20</td>
[…]

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 by 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.

Example:

Availability of holiday accommodation

Paris
Studio Apt Chalet Villa
1 bedroom 11 20 25 23
2 bedroom - 43 52 32
3 bedroom - 13 15 40
Rome
Studio Apt Chalet Villa
1 bedroom 13 21 22 3
2 bedroom - 23 43 30
3 bedroom - 16 32 40

Techniques: