9.2.4. Use the headers and id attributes to associate cells with table header cells in complex data tables

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

To associate the headers with data in this type of table, use the id (identifiers) attribute on the <th> cells and headers attribute on the <td> cells.

You then need to enter the identifiers of the associated headers in the headers attribute of data cells. If several headers are associated with one data cell, the identifiers must be separated by a space in the headers attribute. 

<table>
    <caption>Sales revenue comparison of Davis and Davison companies in the UK and in the rest of the world</caption>
    <tr>
        <th id="header-one">In millions of pounds sterling</th>
        <th id="header-two">In the UK</th>
        <th id="header-three">In the World</th>
    </tr>
    <tr>
        <th id="header-four">Davis</th>
        <td headers="header-four header-deux header-one">50,7</td>
        <td headers="header-four header-trois header-one">139,3</td>
    </tr>
    <tr>
        <th id="header-five">Davison</th>
        <td headers="header-five header-two header-one">27,1</td>
        <td headers="header-five header-three header-one">476,0</td>
    </tr>
</table>

Sales revenue comparison of Davis and Davison companies in the UK and in the rest of the world
In millions of pounds sterling In the UK In the World
Davis 50,7 139,3
Davison 27,1 476,0

Warning

The headers and id attributes must not be used in combination with the scope attribute.

Note

It is a good accessibility practice to respect the logical order when including the id attributes of associated header cells in the headers attribute of data cells.

A screen reader will read these values in the order they are entered.