Balise HTML <tfoot>
La balise <tfoot> définit le pied d'un tableau HTML. Elle s'utilise avec <thead> et <tbody>. Voir des exemples.
La balise `<tfoot>` définit le pied d'un tableau HTML. Elle s'utilise avec les éléments <thead> et <tbody>, qui regroupent respectivement les lignes d'en-tête et les lignes du corps du tableau.
Le pied est l'endroit naturel pour les totaux de colonnes, sommes, moyennes ou autres lignes récapitulatives qui agrègent les données du corps. Regrouper ces lignes avec `<tfoot>` plutôt qu'avec un simple <tr> donne au tableau une structure sémantique claire, ce qui aide les technologies d'assistance à décrire le tableau aux utilisateurs de lecteurs d'écran.
Pourquoi utiliser `<tfoot>` ?
- Sémantique et résumés. Le pied signale « ces lignes résument le tableau » — totaux, sous-totaux, comptages ou notes. Souvent un seul
<th>ou<td>s'étend sur toute la largeur aveccolspan. - Impression et défilement. Lorsqu'un long tableau est imprimé sur plusieurs pages, certains agents utilisateurs répètent
`<thead>`et`<tfoot>`sur chaque page. Si vous rendez le corps défilable indépendamment (avec la propriété CSSoverflow), le pied peut rester fixé en bas. - Accessibilité. Des groupes explicites d'en-tête, de corps et de pied offrent aux lecteurs d'écran une structure plus significative qu'une liste plate de lignes.
Où placer `<tfoot>` ?
La balise `<tfoot>` doit être déclarée à l'intérieur de l'élément <table>, après les éléments <caption> et <colgroup> (le cas échéant).
En HTML5, `<tfoot>` peut apparaître avant ou après `<tbody>` dans le code source. L'ancienne règle HTML4 qui exigeait que `<tfoot>` précède `<tbody>` est obsolète. Dans tous les cas, les navigateurs affichent toujours le pied en bas du tableau, donc le placer en dernier (juste après le corps) est le choix le plus lisible.
La balise `<tfoot>` doit contenir au moins une balise <tr>.
Les éléments `<thead>`, `<tbody>` et `<tfoot>` n'affectent pas la mise en page du tableau par défaut. Utilisez les propriétés CSS pour personnaliser l'apparence du tableau.
Syntaxe
La balise `<tfoot>` fonctionne par paires. Le contenu est écrit entre les balises ouvrante (`<tfoot>`) et fermante (`</tfoot>`).
Balise HTML `<tfoot>`
<table>
<thead> ... </thead>
<tbody> ... </tbody>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
</table>Exemple avec une ligne de totaux
Cet exemple utilise `<thead>`, `<tbody>` et `<tfoot>` ensemble. Le pied contient une ligne récapitulative qui totalise les valeurs du corps :
<!DOCTYPE html>
<html>
<head>
<title>tfoot totals row</title>
<style>
table { width: 360px; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
tfoot td { font-weight: bold; background-color: #f2f2f2; }
</style>
</head>
<body>
<table>
<caption>Monthly Sales</caption>
<thead>
<tr>
<th>Product</th>
<th>Units</th>
</tr>
</thead>
<tbody>
<tr>
<td>Keyboards</td>
<td>40</td>
</tr>
<tr>
<td>Mice</td>
<td>35</td>
</tr>
<tr>
<td>Monitors</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
</table>
</body>
</html>Remarquez que `<tfoot>` est écrit après `<tbody>` dans le code source, et pourtant le pied s'affiche toujours en bas — exactement là où vous le lisez.
Structurer des tableaux complexes
Utilisez les éléments `<thead>`, `<tbody>` et `<tfoot>` pour organiser des tableaux contenant des ensembles de données volumineux ou complexes. Ils rendent le code source plus lisible, vous permettent de styliser chaque section indépendamment et améliorent l'accessibilité. Pour activer le défilement indépendant du corps tout en gardant l'en-tête et le pied visibles, appliquez les propriétés CSS overflow à `<tbody>`.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| align | right, left, center, justify, char | Définit l'alignement horizontal du contenu à l'intérieur de l'élément `<tfoot>`. Cet attribut n'est pas pris en charge par HTML5. |
| bgcolor | bgcolor | Définit la couleur d'arrière-plan des lignes à l'intérieur de l'élément `<tfoot>`. Cet attribut n'est pas pris en charge par HTML5. |
| char | character | Spécifie l'alignement du contenu à l'intérieur de l'élément `<tfoot>` sur un caractère. Utilisé uniquement lorsque l'attribut align="char". Cet attribut n'est pas pris en charge par HTML5. |
| charoff | number | Spécifie le nombre de caractères dont le contenu à l'intérieur de l'élément `<tfoot>` sera aligné à partir du caractère spécifié par l'attribut char. Utilisé uniquement lorsque l'attribut align="char". Cet attribut n'est pas pris en charge par HTML5. |
| valign | top, bottom, middle, baseline | Spécifie l'alignement vertical du contenu à l'intérieur de l'élément `<tfoot>`. Cet attribut n'est pas pris en charge par HTML5. |
Remarque : tous les attributs listés ci-dessus sont dépréciés en HTML5. Utilisez CSS à la place. Le tableau ci-dessous indique le remplacement CSS moderne pour chacun :
| Attribut déprécié | Remplacement CSS |
|---|---|
align | text-align |
valign | vertical-align |
bgcolor | background-color |
La balise `<tfoot>` prend également en charge les attributs globaux et les attributs d'événement.
Comment styliser une balise HTML `<tfoot>`
tfoot {
background-color: #f2f2f2; /* replaces bgcolor */
font-weight: bold;
text-align: right; /* replaces align */
vertical-align: middle; /* replaces valign */
}Consultez le chapitre Tableaux CSS pour découvrir d'autres façons de styliser les sections d'un tableau.