2.4.2 Des th définissent les en-têtes des tableaux de données

Les cellules qui forment les en-têtes des colonnes et des lignes doivent être distinguées par la balise th (Table header). Les cellules qui contiennent les données seront définies par les balises habituelles td (Table data).

Pourquoi ?

Les balises th sont essentielles, d'une part parce qu'elles découlent d'une bonne utilisation du code HTML, et, d'autre part parce qu'elles sont reconnues par la plupart des lecteurs d'écran. Elles contribuent directement à une bonne interprétation des données; les utiliser correctement, c'est respecter les standards HTML.

Concrêtement, grâce à la présence des th bien placés, un visiteur aveugle qui parcourt le tableau peut, au moyen d’une combinaison de touches propre à son aide technique, rappeler à tout moment l’entête de colonne et de ligne qui se rapporte à la cellule de données qu’il consulte. Souvenez-vous que ce visiteur ne dispose pas de vision globale du tableau; si la fonction de rappel n’est pas disponible et que votre table contient plus de 4 colonnes, vous surestimez peut-être ses capacités de mémorisation et vous risquez qu'il se sente perdu.

En pratique

Dans l'exemple ci-dessous, les en-têtes de lignes et de colonnes sont correctement définies par la balise th.

Exemple de bonne pratique

<table>
  <caption>Heures d'ouverture du service à la population</caption>
  <tr>
  <th>Jour</th>

  <th>Matinée</th>
  <th>Après-midi</th>
  </tr><tr>
  <th>Lundi</th>

  <td>8h-12h</td>
  <td>14h-18h</td>
  </tr><tr>
  <th>Mardi</th>

  <td>8h-12h</td>
  <td>Fermé</td>
  </tr><tr>
  <th>Mercredi</th>

  <td>8h-12h</td>
  <td>14h-20h</td>
  </tr><tr>
  <th>Jeudi</th>

  <td>Fermé</td>
  <td>14h-18h</td>
  </tr><tr>
  <th>Vendredi</th>

  <td>8h-12h</td>
  <td>Fermé</td>
  </tr>
</table>

Remarques

• Le contenu des th apparaît par défaut en gras et centré dans les navigateurs graphiques. Si cette apparence vous dérange, elle ne doit pas vous servir de prétexte pour ne pas utiliser les th car il vous suffit tout simplement d’en redéfinir le style via CSS. N'utilisez pas td class="entête" mais th et ajoutez un style.
• Cette directive est d'application uniquement sur les tableaux de données. Pour les tableaux de mise en page l'utilisation de th n'est pas autorisée.