In complex tables, use the headers and id attributes to associate header cells with their corresponding data cells

A data table is complex when the header cells do not apply to all of the cells in the row or column.

To associate headers with their corresponding data cells in this type of table, add the id (identifiants) 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.

<table>
   <caption>Comparison of sales revenue between the Davis and Davison companies in the UK and the rest of the world.</caption>
   <tr>
       <th id="entete-1">In millions of pounds sterling</th>
       <th id="entete-2">In the UK</th>
       <th id="entete-3">Rest of the World</th>
   </tr>
   <tr>
       <th id="entete-4">Davis</th>
       <td headers="entete-4 entete-2 entete-1">
           50.7
       </td>
       <td headers="entete-4 entete-3 entete-1">
           139.3
       </td>
   </tr>
   <tr>
       <th id="entete-5">Davison</th>
       <td headers="entete-5 entete-2 entete-1">
           27.1
       </td>
       <td headers="entete-5 entete-3 entete-1">
           476.0
       </td>
   </tr>
</table>
Comparison of sales revenue between the Davis and Davison companies in the UK and the rest of the world.
In millions of pounds sterling In the UK Rest of the World
Davis 50.7 139.3
Davison 27.1 476.0

Warning

The headers attribute should not be used in combination with the scope attribute.

Note

Good practice is to organize the id values of the header cell according to the logical visual order of the table.

A screen reader (using voice or braille) will announce the headers in this order.

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top