En bref. Les tableaux HTML utilisent un balisage structurel pour identifier les en-têtes et les cellules de données, dont les attributs scope ou headers expriment les relations.

Définition : Les tableaux HTML représentent des données dont le sens dépend des relations entre les lignes et les colonnes. L’élément <table> contient des cellules, dont les cellules d’en-tête sont désignées par <th> et les cellules de données par <td>.

Points clés

Le standard HTML du WHATWG, mis à jour le 16 octobre 2026, définit un tableau comme une grille entièrement couverte par ses cellules, sans chevauchement.
Le tutoriel sur les tableaux à un seul niveau d’en-tête du W3C explique que scope="col" associe les en-têtes de colonne aux cellules de données correspondantes lorsque les données sont ambiguës.
Le tutoriel sur les en-têtes à plusieurs niveaux du W3C utilise des identifiants d’en-tête uniques et l’attribut headers des cellules pour exprimer des associations complexes.
Le tutoriel sur la légende et le résumé du W3C explique que la plupart des lecteurs d’écran annoncent les légendes, ce qui aide les utilisateurs à identifier un tableau et son sujet.

Comment un tableau simple exprime-t-il les relations entre les cellules ?

Les éléments de tableau du standard HTML donnent un sens à chaque partie. Un élément <tr> représente une ligne. Les cellules d’en-tête utilisent <th> ; les cellules de données utilisent <td>. Un élément <thead> regroupe les lignes contenant les libellés des colonnes et les éventuelles cellules qui les accompagnent sans être des en-têtes, tandis que <tbody> regroupe les lignes contenant le corps des données.

L’exemple de données ambiguës du W3C montre l’intérêt des associations explicites : le nom de famille, le prénom et la ville d’une personne peuvent se ressembler. Cette version abrégée conserve la ligne d’en-tête et la première ligne de données du tutoriel :

<table>
  <caption>Teddy bear collectors:</caption>
  <tr>
    <th scope="col">Last Name</th>
    <th scope="col">First Name</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>Phoenix</td>
    <td>Imari</td>
    <td>Henry</td>
  </tr>
</table>

Ici, scope="col" établit que « Henry » relève de « City ». Pour un en-tête qui désigne une ligne, scope="row" exprime la relation horizontale. Le standard définit également les valeurs rowgroup et colgroup pour les en-têtes qui s’appliquent à des groupes de lignes ou de colonnes.

Quand une cellule a-t-elle besoin de l’attribut headers ?

Les recommandations du W3C sur les tableaux à plusieurs niveaux d’en-tête couvrent les structures pour lesquelles une simple association horizontale ou verticale ne suffit pas. Les exemples comprennent des en-têtes de colonne qui changent en cours de tableau et des cellules de données associées à plusieurs niveaux d’en-tête.

Chaque en-tête reçoit un id unique à l’échelle du document. Chaque cellule de données énumère les identifiants pertinents dans son attribut headers, séparés par des espaces. Le standard HTML exige que ces références désignent des éléments <th> du même tableau.

L’exemple du tutoriel du W3C consacré aux contacts des fournisseurs associe « James Phillips » à l’en-tête de l’entreprise co1 et à l’en-tête « Contact » c1 au moyen de headers="co1 c1". Le même tutoriel recommande d’envisager des tableaux plus petits lorsqu’une structure complexe peut se décomposer en structures plus simples.

Comment vérifier les tableaux d’un site web ?

Une inspection fondée sur le tutoriel du W3C sur les tableaux vérifie que les libellés utilisent <th>, que les valeurs utilisent <td> et que les associations avec les en-têtes correspondent aux données. Les lecteurs d’écran utilisent ces relations pour annoncer les en-têtes lors de la lecture de chaque cellule. Pour la mise en page, le même tutoriel recommande CSS, le langage qui permet de contrôler la présentation visuelle.

Le tutoriel prévient également que la conversion entre formats de document entraîne souvent la perte du balisage des tableaux. Le balisage structurel d’un tableau importé dans un site web doit donc faire l’objet d’une vérification après conversion. De nombreux systèmes de gestion de contenu proposent des commandes pour définir les cellules d’en-tête sans modification manuelle du code.

Les recommandations du W3C sur les légendes ajoutent une vérification du contexte. Un élément <caption> se place directement à l’intérieur de <table> et donne un titre court à son contenu. Les tableaux complexes peuvent aussi nécessiter un résumé expliquant leur organisation, par exemple les colonnes qui contiennent certaines informations. Lorsque les deux sont présents, le résumé doit apporter des informations supplémentaires par rapport à la légende. Le tutoriel présente un résumé explicatif à l’intérieur de <caption>, ce qui le rend également accessible aux personnes qui consultent le tableau visuellement.

Termes associés

Questions fréquentes

Le texte en gras peut-il servir d’en-tête de tableau ?

Utilisez <th> pour une cellule d’en-tête. Le tutoriel du W3C sur les tableaux exige un balisage structurel pour distinguer les en-têtes des cellules de données et explique que les seuls indices visuels ne suffisent pas.

Tous les tableaux simples ont-ils besoin d’attributs scope ?

Le tutoriel du W3C sur les tableaux à un seul niveau d’en-tête accepte l’utilisation de <th> seul pour les petits tableaux simples dont les données ne présentent aucune ambiguïté. Il demande l’utilisation de scope lorsque les données sont ambiguës ou que le tableau est plus grand.

Que doit indiquer la légende d’un tableau ?

Donnez au tableau un titre court qui décrit son contenu. L’exemple de légende du W3C utilise « Concerts » pour un tableau contenant des dates, des événements et des lieux.

Sources

Vérifiez comment une page se lit pour les moteurs de réponse. Ouvrir l’analyseur de score GEO

Tableaux HTML