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

Heures d'ouverture du service à la population
Jour Matinée Après-midi
Lundi 8h-12h 14h-18h
Mardi 8h-12h Fermé
Mercredi 8h-12h 14h-20h
Jeudi Fermé 14h-18h
Vendredi 8h-12h Fermé

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 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.

comment tester

  • Dans la barre d'outils Web Developer, cliquez sur Entourer > Entourer les tableaux > Cellules de tableaux, et Entourer > Afficher le nom de l'élément entouré.
  • Vérifiez que chaque cellule qui contient un titre est marquée par th