Balise HTML <thead>
La balise HTML <thead> regroupe les lignes d'en-tête d'un tableau. Syntaxe, accessibilité avec scope et CSS illustrés par des exemples.
La balise <thead> définit l'en-tête d'un tableau HTML. Elle s'utilise conjointement avec les balises <tbody> et <tfoot>, qui précisent respectivement le corps et le pied du tableau.
La balise <thead> doit être utilisée comme enfant de l'élément <table>, après les éléments <caption> et <colgroup>, et avant les éléments <tbody>, <tfoot> et <tr>. On ne peut utiliser qu'une seule balise <thead> à l'intérieur d'un <table>.
En HTML5, la balise <tfoot> peut être placée avant ou après <tbody> — le navigateur affiche le pied de tableau en bas dans les deux cas. (Dans l'ancienne spécification HTML 4.01, <tfoot> devait précéder <tbody> ; cette exigence a été abandonnée en HTML5.)
Pourquoi la balise <thead> est importante
Regrouper les lignes d'en-tête dans <thead> ne sert pas uniquement à avoir un balisage ordonné. Cela confère au tableau une véritable structure sémantique que les navigateurs et les technologies d'assistance peuvent exploiter :
- Les lecteurs d'écran peuvent identifier et annoncer les cellules d'en-tête, aidant les utilisateurs à comprendre la signification de chaque cellule de données lorsqu'ils naviguent dans le tableau.
- Impression et tableaux longs : lorsqu'un tableau s'étend sur plusieurs pages imprimées (ou défile dans un conteneur à hauteur fixe), les navigateurs peuvent répéter les lignes
<thead>en haut de chaque page ou section, afin que les colonnes restent étiquetées. - Le style et le scripting deviennent plus simples : vous pouvez cibler
theaden CSS ou trier uniquement les lignes du corps en JavaScript sans toucher à l'en-tête.
Pour que la structure soit significative, placez des cellules <th scope="col"> à l'intérieur de <thead> — consultez la section Accessibilité ci-dessous.
Le <thead> doit contenir au moins un élément <tr>.
Les éléments <thead>, <tbody> et <tfoot> n'ont aucun effet sur la mise en page du tableau par défaut. Utilisez les propriétés CSS pour personnaliser l'apparence du tableau.
Syntaxe
La balise <thead> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<thead>) et fermante (</thead>).
<table>
<thead>
<tr>
<th scope="col"> ... </th>
</tr>
</thead>
<tbody> ... </tbody>
<tfoot> ... </tfoot>
</table>Exemple de la balise HTML <thead> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>Accessibilité
La balise <thead> tire principalement sa valeur de l'accessibilité. Pour en bénéficier pleinement, utilisez <th> (et non <td>) à l'intérieur et ajoutez l'attribut scope :
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>scope="col" indique aux lecteurs d'écran que la cellule est l'en-tête de toute la colonne. Lorsque l'utilisateur descend dans la colonne, la technologie d'assistance peut annoncer l'en-tête avant chaque cellule de données, de sorte que la relation entre une valeur (par exemple, 500) et son libellé (Savings) n'est jamais perdue. Pour un en-tête qui étiquette une ligne plutôt qu'une colonne, utilisez scope="row". Consultez la balise <th> pour en savoir plus sur les cellules d'en-tête et les portées.
Conservez les titres de colonnes réels dans <thead> et placez les lignes de résumé ou de total cumulatif dans <tfoot> ; cette structure cohérente permet aux lecteurs d'écran, aux feuilles de style d'impression et aux scripts de traiter correctement l'en-tête.
Attributs
Tous les attributs ci-dessous sont obsolètes et non pris en charge en HTML5. Ils sont listés ici uniquement pour vous permettre de les reconnaître dans du balisage hérité. Utilisez CSS à la place — voir Remplacement des attributs obsolètes par CSS.
| Attribut | Valeurs | Description |
|---|---|---|
| align | left, right, center, justify, char | Alignement horizontal du contenu dans un <thead>. Non pris en charge en HTML5. |
| bgcolor | color (nom ou valeur hexadécimale) | Couleur d'arrière-plan des lignes dans un <thead>. Non pris en charge en HTML5. |
| char | character | Aligne le contenu sur un caractère ; utilisé uniquement avec align="char". Non pris en charge en HTML5. |
| charoff | number | Décalage (en caractères) par rapport au caractère défini par char ; utilisé uniquement avec align="char". Non pris en charge en HTML5. |
| valign | top, bottom, middle, baseline | Alignement vertical du contenu dans un <thead>. Non pris en charge en HTML5. |
La balise <thead> prend également en charge les attributs globaux et les attributs d'événement.
Remplacement des attributs obsolètes par CSS
Chaque attribut de présentation ci-dessus possède un équivalent CSS direct à utiliser à la place :
| Ancien attribut | Remplacement CSS |
|---|---|
align="center" | text-align: center; |
valign="middle" | vertical-align: middle; |
bgcolor="#f2f2f2" | background-color: #f2f2f2; |
char / charoff | Pas d'équivalent CSS ; alignez les nombres avec text-align ou le rembourrage. |
Un en-tête stylisé typique ressemble à ceci :
thead {
background-color: #f2f2f2;
font-weight: bold;
}
thead th {
text-align: center;
vertical-align: middle;
padding: 10px;
}Pour plus d'options de style de tableau, consultez CSS Tables.