Utiliser les attributs headers et id pour associer les cellules aux entêtes des tableaux de données complexes
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 s’agit 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</caption>
<tr>
<th id="entete-1">En millions d'euros</th>
<th id="entete-2">En France</th>
<th id="entete-3">Dans le monde</th>
</tr>
<tr>
<th id="entete-4">Dupond</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">Dupont</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>
| En millions d’euros | En France | Dans le monde |
|---|---|---|
| Dupond | 50,7 | 139,3 |
| Dupont | 27,1 | 476,0 |
Attention
L’attribut headers ne doit pas être utilisé en combinaison de l’attribut scope.
Remarque
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.
En effet, un lecteur d’écran (synthèse vocale et/ou plage braille) annoncera les entêtes dans cet ordre.