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 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="head-1">In millions of pounds sterling</th>
       <th id="head-2">In the UK</th>
       <th id="head-3">Rest of the World</th>
   </tr>
   <tr>
       <th id="head-4">Davis</th>
       <td headers="head-4 head-2 head-1">
           50.7
       </td>
       <td headers="head-4 head-3 head-1">
           139.3
       </td>
   </tr>
   <tr>
       <th id="head-5">Davison</th>
       <td headers="head-5 head-2 head-1">
           27.1
       </td>
       <td headers="head-5 head-3 head-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

Find out more

Comments

Back to top