2.4.4 Les tableaux complexes ont un attribut headers

Un tableau de données complexe est un tableau qui a au moins deux niveaux d'en-têtes de colonnes ou de lignes. L'attribut headers offre la possibilité de rendre ce genre de tableaux accessible, mais cela reste relativement compliqué. De manière générale, il est plus simple de diviser le tableau en plusieurs tableaux.

Pourquoi?

Le fait d'utiliser correctement l'attribut headers lors de la construction d'un tableau complexe va permettre aux lecteurs d'écran d'annoncer les en-têtes de colonnes et de lignes des différents niveaux lorsque le contenu d'une cellule est lu.

En pratique

Evitez de préférence les tableaux complexes en les divisant en plusieurs tableaux simples.

Si vous décidez d'utiliser un tableau complexe, alors

• donnez à chaque en-tête (th) un attribut id,
• utilisez l'attribut headers dans chaque cellule (tr) pour indiquer les en-têtes correspondantes.

Exemple de tableau complexe

Exemple de tableau complexe divisé en tableaux simples (option préférée)

Dans cet exemple, le tableau complexe a été divisé en deux tableaux simples , un pour la maison communale et un pour le CPAS.

Exemple de tableau complexe utilisant les attributs header et id

Dans cet exemple de tableau construit avec headers, l'aspect du tableau n'a pas changé mais l'ajout des attributs header et id le rend plus accessible.

<table>
<caption>Heures d'ouverture de la maison communale et du CPAS</caption>
  <tr>
    <td></td>
      <th colspan="2" id="mc" abbr="Maison communale">Maison communale</th>
      <th colspan="2" id="cp" abbr="CPAS">CPAS</th>
  </tr>
  <tr>
    <td></td>
      <th id="mc-am" abbr="matin">Matin</th>
      <th id="mc-pm" abbr="après-midi">Après-midi</th>
      <th id="cpas-am" abbr="matin">Matin</th>
      <th id="cpas-pm" abbr="après-midi">Après-midi</th>
  </tr>
  <tr>
    <th id="lu" abbr="lundi">Lundi</th>
    <td headers="mc mc-am lu">8h-12h</td>
    <td headers="mc mc-pm lu">Fermé</td>
    <td headers="cp cp-am lu">Fermé</td>
    <td headers="cp cp-pm lu">14h-18h</td>
  </tr>
...
</table> </pre>