In complex tables, use the
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
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
<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>
|In millions of pounds sterling||In the UK||Rest of the World|
headers attribute must not be used in combination with the
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.