9.3. Tag complex data tables headers with <th> and headers and id
A data table is complex when the header cells do not apply to all the cells in the row or column.
To associate headers with their corresponding data cells in this type of table, add the id attribute to all <th> cells and the headers attribute to all the <td> cells.
The next step is to populate the headers attributes with the values found in the corresponding header cells. If several headers are associated with a data cell, they are separated by a space (space delimited) in the corresponding headers attribute.
Note
In the case of a complex data table, the <caption> tag should provide an explanation of the structure and nature of the table for screen readers.
<table>
<caption>Average monthly temperatures in the 3 largest cities in France and Spain <span class="sr-only">(the first column shows the month, and the other columns show temperatures by country and city)</span></caption>
<tr>
<td></td>
<th id="col1" colspan="3">France</th>
<th id="col2" colspan="3">Spain</th>
</tr>
<tr>
<td></td>
<th id="col3" headers="col1">Paris</th>
<th id="col4" headers="col1">Marseille</th>
<th id="col5" headers="col1">Lyon</th>
<th id="col6" headers="col2">Madrid</th>
<th id="col7" headers="col2">Barcelona</th>
<th id="col8" headers="col2">Valence</th>
</tr>
<tr>
<th id="row1">June</th>
<td headers="col1 col3 row1">22°C</td>
<td headers="col1 col4 row1">28°C</td>
<td headers="col1 col5 row1">26°C</td>
<td headers="col2 col6 row1">32°C</td>
<td headers="col2 col7 row1">26°C</td>
<td headers="col2 col8 row1">26°C</td>
</tr>
<tr>
<th id="row2">July</th>
<td headers="col1 col3 row2">24°C</td>
<td headers="col1 col4 row2">30°C</td>
<td headers="col1 col5 row2">28°C</td>
<td headers="col2 col6 row2">34°C</td>
<td headers="col2 col7 row2">28°C</td>
<td headers="col2 col8 row2">30°C</td>
</tr>
</table>
| France | Spain | |||||
|---|---|---|---|---|---|---|
| Paris | Marseille | Lyon | Madrid | Barcelona | Valence | |
| June | 22°C | 28°C | 26°C | 32°C | 26°C | 26°C |
| July | 24°C | 30°C | 28°C | 34°C | 28°C | 30°C |
Warning
The headers attribute must not be used in combination with the scope attribute.
Note
A good practice is to organize the id values of the header cells according to the logical visual order of the table.
A screen reader (using voice or braille) will announce the headers in this order.