Balise HTML <tfoot>
La balise <code><tfoot></code> 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 <code><tfoot></code> 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 <code><tfoot></code> doit être placé avant <code><tbody></code> dans le code source, bien que les navigateurs l’affichent toujours en bas du tableau.
DANGER
La balise <code><tfoot></code> doit contenir au moins une balise <tr>.
TIP
Les éléments <code><thead></code>, <code><tbody></code> et <code><tfoot></code> 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 <code><tfoot></code> se présente par paires. Le contenu est écrit entre les balises ouvrante (<code><tfoot></code>) et fermante (<code></tfoot></code>).
Balise HTML <code><tfoot></code>
<table>
<thead> ... </thead>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
<tbody> ... </tbody>
</table>Exemple de la balise HTML <code><tfoot></code> :
Balise HTML <code><tfoot></code>
<!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>Résultat
La balise <code><tfoot></code> et les autres balises pour résumer le contenu d’un tableau
L’élément <code><tfoot></code> 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 <code><tbody></code>, mais les navigateurs l’affichent toujours en bas.
Utilisez les éléments <code><thead></code>, <code><tbody></code> et <code><tfoot></code> 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 <code><tfoot></code>. 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 <code><tfoot></code>. 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 <code><tfoot></code> 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 <code><tfoot></code> 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 <code><tfoot></code>. 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 <code><tfoot></code> prend également en charge les attributs globaux et les attributs d’événement.
Comment styliser une balise HTML <code><tfoot></code>
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?