English

<thead>

Définir les en-têtes, et l'attribut scope que presque personne n'utilise

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • tableaux

<thead> + <th> — Les en-têtes de tableau

<thead> regroupe les lignes d'en-tête d'un tableau. <th> déclare une cellule d'en-tête, par opposition a <td> qui est une cellule de données. L'attribut scope précise si l'en-tête s'applique a une colonne (col), une ligne (row), un groupe de colonnes (colgroup) ou un groupe de lignes (rowgroup).

Quand l'utiliser

Ton tableau a des intitulés de colonnes ou de lignes. Utilise <thead> pour la première ligne d'en-têtes et <th scope="col"> pour chaque intitulé de colonne. Si tes lignes ont aussi un en-tête (première cellule de chaque ligne), utilise <th scope="row">.

Ce que tu gagnes

Accessibilité : sans <th> et scope, un lecteur d'écran lit "12 000" sans savoir que c'est le chiffre d'affaires de l'Europe au T1. Avec scope, il annonce "Europe, T1 : 12 000". C'est la difference entre une grille de nombres et une information comprehensible.

Exemple de code

<table>
  <caption>Sprint velocity by team</caption>
  <thead>
    <tr>
      <th scope="col">Team</th>
      <th scope="col">Sprint 1</th>
      <th scope="col">Sprint 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alpha</th>
      <td>42</td>
      <td>47</td>
    </tr>
    <tr>
      <th scope="row">Beta</th>
      <td>38</td>
      <td>41</td>
    </tr>
  </tbody>
</table>

Pour aller plus loin