Balise HTML <tfoot>
The <tfoot> tag defines the footer of the table. Is used together with the <thead> and <tbody> elements. See examples.
La balise `<tfoot>` définit le pied de page d’un tableau HTML. Elle est utilisée avec les éléments <thead> et <tbody>, qui définissent respectivement l’en-tête et le corps du tableau.
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). Notez que `<tfoot>` doit être placé avant `<tbody>` dans le code source, bien que les navigateurs l’affichent toujours en bas du tableau.
danger
La balise
`<tfoot>`doit contenir au moins une balise <tr>.
success
Les éléments
`<thead>`,`<tbody>`et`<tfoot>`n’affectent pas par défaut la mise en page du tableau. Utilisez des propriétés CSS pour personnaliser l’apparence du tableau.
Syntaxe
La balise `<tfoot>` se présente par paires. Le contenu est écrit entre les balises ouvrante (`<tfoot>`) et fermante (`</tfoot>`).
Balise HTML `<tfoot>`
<table>
<thead> ... </thead>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
<tbody> ... </tbody>
</table>Exemple de la balise HTML `<tfoot>` :
Balise HTML `<tfoot>`
<!DOCTYPE html>
<html>
<head>
<title>The title of the document.</title>
</head>
<body>
<table style="width: 400px; border-collapse: collapse;" border="1">
<caption>
FIFA World Cup 2018 Top Goalscorers
<hr />
</caption>
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th>Goal</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">Harry Kane - the best player!</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Harry Kane</td>
<td>England</td>
<td>6</td>
</tr>
<tr>
<td>Christiano Ronaldo</td>
<td>Portugal</td>
<td>4</td>
</tr>
<tr>
<td>Neymar</td>
<td>Brazil</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html><!-- Note: The border attribute is deprecated in HTML5. Use CSS for styling. -->
Résultat
La balise `<tfoot>` et les autres balises pour résumer le contenu d’un tableau
L’élément `<tfoot>` définit une section de pied de page pour le tableau, contenant généralement des données récapitulatives ou agrégées. Dans le code source, il doit apparaître avant l’élément `<tbody>`, mais les navigateurs l’affichent toujours en bas.
Utilisez les éléments `<thead>`, `<tbody>` et `<tfoot>` pour structurer des tableaux contenant des ensembles de données complexes. Ces éléments aident à organiser le contenu du tableau. Pour permettre un défilement indépendant du corps, appliquez les propriétés CSS overflow.
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 à partir du caractère indiqué par l’attribut char auquel le contenu à l’intérieur de l’élément `<tfoot>` sera aligné. Utilisé uniquement lorsque l’attribut align="char". Cet attribut n’est pas pris en charge par HTML5. |
| valign | top, bottom, middle, baseline | Spécifie un 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 obsolètes en HTML5. Utilisez CSS pour le style.
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;
font-weight: bold;
}Practice
What is the purpose of HTML tfoot tag and where is it usually placed in a table?