Utilisez le bon code pour associer les en-têtes de tableau aux données dans des tableaux de données (complexes)

Les tableaux avec une structure standard (en-têtes dans la première colonne ou ligne, données dans les autres cellules) sont facilement lisibles par les visiteurs qui ont besoin d’une technologie d’assistance.

Par contre, les liens des tableaux avec une structure complexe doivent être explicitement indiqués et enregistrés dans le code source pour que la technologie d’assistance puisse présenter les informations de manière claire et logique.

Comment vous y prendre ?

Définir une cellule comme en-tête pour une ligne ou une colonne

Pour définir le statut d’une cellule (càd un en-tête pour une ligne ou pour une colonne ou un groupe de lignes ou de colonnes), utilisez l’attribut scope pour les cas suivants :

• Quand des cellules de donnée (éléments <td>) font également office d’en-tête d’une ligne ou d’une colonne ;
• Pour des tableaux avec des en-têtes aussi bien dans la première ligne que dans la première colonne (horizontalement et verticalement) ;
• Quand les en-têtes ne se trouvent pas dans la première ligne ou colonne, mais dans la deuxième, la troisième ou la suivante.

Exemple : attribut scope

Le tableau ci-après a des en-têtes dans la première ligne ainsi que dans la première colonne. On a donc utilisé l’attribut scope pour les cellules d’en-tête.

<table>
<caption>Lieu et date de naissance des participants</caption>
<tr>
<th></th>
<th scope="col">Lieu de résidence</th>
<th scope="col">Date de naissance</th>
</tr>
<tr>
<th scope="row">Jean</th>
<td>Namur/td>
<td>20-11-2002</td>
</tr>
<tr>
<th scope="row">Pierre</th>
<td>Liège</td>
<td>10-02-1984</td>
</tr>
</table>

Tableaux complexes

Un tableau est considéré comme complexe dans les cas suivants :

• Lorsque des en-têtes de colonne changent ou réapparaissent au milieu du tableau ;
• Quand une cellule avec des données est définie par 3 informations ou plus
  • Ex. dans le tableau ci-dessous : Paris, 1 chambre, chalet ou villa

Dans ces cas-là, il faut utiliser les attributs id et headers :

• Id pour les cellules d’en-tête (élément <th>)
• Headers pour les cellules appartenant aux cellules d’en-tête

Exemple : attributs id et headers

Le tableau ci-dessous comprend plusieurs niveaux et des en-têtes de colonne changent au milieu du tableau. Il faut donc employer des attributs id et headers pour clarifier la structure.

Consultez également le manuel pour les tableaux du W3C pour plus d’exemples de code pour des tableaux.

<table>
<caption>Prix de maisons de vacances, par personne et par nuit</caption>
<thead>
<tr>
<td></td>
<th id="chalet">
Chalet
</th>
<th id="villa">
Villa
</th>
</tr>
</thead>
<tbody>
<tr>
<th id="paris" colspan="3">
Paris
</th>
</tr>
<tr>
<th headers="paris" id="paris1chambre">
1 chambre
</th>
<td headers="paris paris1chambre chalet">
50 €
</td>
<td headers="paris paris1chambre villa">
90 €
</td>
</tr>
...
</tbody>
</table>

Pour les redacteurs

Pour chaque tableau complexe, les rédacteurs doivent décider si celui-ci peut être divisé ou simplifié. Dans le cas contraire, ils doivent placer le tableau correctement sur la page. Si l’éditeur utilisé ne supporte pas l’insertion de tableaux, le rédacteur doit pouvoir introduire le tableau dans le code HTML.

Pour les développeurs

Le développeur doit veiller à ce que les rédacteurs puissent ajouter correctement des tableaux.