tableaux block

<th>

Représente une cellule d'en-tête dans un tableau. L'attribut scope précise si l'en-tête s'applique à une colonne, une ligne ou un groupe.

Description

L’élément <th> est une cellule d’en-tête qui décrit le contenu des cellules <td> associées. Il est rendu en gras et centré par défaut. L’attribut scope est essentiel pour l’accessibilité, car il indique si l’en-tête s’applique à une colonne (col), une ligne (row) ou un groupe de colonnes/lignes.

Syntaxe

<th scope="col">Titre de colonne</th>

Exemples

En-têtes de colonnes :

<thead>
  <tr>
    <th scope="col">Élément</th>
    <th scope="col">Type</th>
    <th scope="col">Obsolète</th>
  </tr>
</thead>

En-têtes de lignes :

<tbody>
  <tr>
    <th scope="row">div</th>
    <td>Block</td>
    <td>Non</td>
  </tr>
</tbody>

Cellule fusionnée sur plusieurs colonnes :

<tr>
  <th colspan="3" scope="colgroup">Propriétés de mise en page</th>
</tr>

Attributs spécifiques

AttributTypeDescription
scopeenumPortée de l’en-tête : col (colonne), row (ligne), colgroup (groupe de colonnes), rowgroup (groupe de lignes).
colspanintegerNombre de colonnes sur lesquelles la cellule s’étend (défaut : 1).
rowspanintegerNombre de lignes sur lesquelles la cellule s’étend (défaut : 1).
headersstringIDs des cellules <th> qui s’appliquent à cette cellule (pour les tableaux complexes).
abbrstringVersion abrégée du contenu, utilisée par les lecteurs d’écran pour les en-têtes longs.

Notes

scope est obligatoire pour l’accessibilité : sans scope, les lecteurs d’écran ne savent pas comment associer les en-têtes aux données. Toujours ajouter scope="col" ou scope="row".

Support navigateurs

Chrome1+ · Firefox1+ · Safari1+ · Edge12+