Un tableau de données complexe est un tableau dans lequel les cellules d’entêtes ne s’appliquent pas systématiquement à la totalité des cellules de données d’une ligne ou d’une colonne.
Pour associer les entêtes aux données dans ce type de tableaux, utiliser les attributs id
(identifiants) sur les cellules <th>
et headers
sur les cellules <td>
.
Il suffit ensuite de renseigner l’attribut headers
avec les identifiants des cellules d’entêtes associées. Si plusieurs entêtes sont associés à une cellule de données, les identifiants doivent être séparés par des espaces dans headers
.
<table> <caption>Comparatif du chiffre d'affaires des entreprises Dupond et Dupont en France et dans le monde en 2011</caption> <tr> <th id="entete-un">En millions d'euros</th> <th id="entete-deux">En France</th> <th id="entete-trois">Dans le monde</th> </tr> <tr> <th id="entete-quatre">Dupond</th> <td headers="entete-quatre entete-deux entete-un">50,7</td> <td headers="entete-quatre entete-trois entete-un">139,3</td> </tr> <tr> <th id="entete-cinq">Dupont</th> <td headers="entete-cinq entete-deux entete-un">27,1</td> <td headers="entete-cinq entete-trois entete-un">476,0</td> </tr> </table>
En millions d'euros | En France | Dans le monde |
---|---|---|
Dupond | 50,7 | 139,3 |
Dupont | 27,1 | 476,0 |
Les attributs headers
et id
ne doivent pas être utilisés en combinaison de l’attribut scope
.
Une bonne pratique d’accessibilité consiste à respecter un ordre logique lorsque les valeurs des attributs id
des cellules d’entêtes associées à une cellule de données sont intégrées dans l’attribut headers
de cette dernière.
L’ordre de ces valeurs sera l’ordre de lecture par un lecteur d’écran.