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 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 columnIn 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.
<th> cells
[…]
<td id="blank"> </td>
<th id="co1" headers="blank">Example 1 Ltd</th>
<th id="co2" headers="blank">Example 2 Co</th>
[…]
<th id="c1" headers="blank">Contact</th>
[…]
<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.
id attributes to <th> cells
[…]
<th id="par" colspan="5" scope="colgroup">Paris</th>
</tr>
<tr>
<th id="pbed1">1 bedroom</th>
[…]
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 tablesThe 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.
ExampleAvailability 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 Help improve this pagePlease share your ideas, suggestions, or comments via e-mail to the publicly-archived list wai@w3.org or via GitHub.
Back to TopRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3