L'élémentHTML<tfoot> encapsule un ensemble de lignes de tableau (éléments<tr>), indiquant qu'elles constituent le pied d'un tableau avec des informations sur les colonnes du tableau. Il s'agit généralement d'un récapitulatif des colonnes, par exemple une somme des nombres présents dans une colonne.

Exemple interactif

<table>  <caption>    Budget du conseil (en livres sterling) 2018  </caption>  <thead>    <tr>      <th scope="col">Articles</th>      <th scope="col">Dépenses</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">Beignets</th>      <td>3 000</td>    </tr>    <tr>      <th scope="row">Fournitures de bureau</th>      <td>18 000</td>    </tr>  </tbody>  <tfoot>    <tr>      <th scope="row">Total</th>      <td>21 000</td>    </tr>  </tfoot></table>

thead,tfoot {  background-color: #2c5e77;  color: white;}tbody {  background-color: #e4f0f5;}table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}caption {  caption-side: bottom;  padding: 10px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}td {  text-align: center;}

Attributs

Cet élément inclut lesattributs universels.

Attributs obsolètes

Les attributs qui suivent sont dépréciés et ne devraient pas être utilisés. Ils sont uniquement documentés à des fins historiques et pour la mise à jour du code existant qui les utiliserait.

alignObsolète

Définit l'alignement horizontal de chaque cellule du pied de tableau. Les valeursénumérées possibles sontleft,center,right,justify etchar. Lorsque cela est pris en charge, la valeurchar aligne le contenu textuel sur le caractère défini dans l'attributchar et sur le décalage défini par l'attributcharoff. Utilisez plutôt la propriété CSStext-align, car cet attribut est obsolète.

bgcolorObsolète

Définit la couleur d'arrière-plan de chaque cellule du pied de tableau. La valeur est une couleur HTML ; soit uncode RGB hexadécimal à 6 chiffres, préfixé d'un#, soit unmot-clé de couleur. Les autres valeurs CSS<color> ne sont pas prises en charge. Utilisez la propriété CSSbackground-color à la place, car cet attribut est obsolète.

charObsolète

Ne fait rien. Il était à l'origine destiné à définir l'alignement du contenu sur un caractère de chaque cellule du pied de tableau. Les valeurs typiques incluent un point (.) pour aligner des nombres ou des valeurs monétaires. Sialign n'est pas défini àchar, cet attribut est ignoré.

charoffObsolète

Ne fait rien. Il était à l'origine destiné à définir le nombre de caractères de décalage du contenu de la cellule du pied de tableau par rapport au caractère d'alignement défini par l'attributchar.

valignObsolète

Définit l'alignement vertical de chaque cellule du pied de tableau. Les valeursénumérées possibles sontbaseline,bottom,middle ettop. Utilisez la propriété CSSvertical-align à la place, car cet attribut est obsolète.

Notes d'utilisation

• L'élément<tfoot> est placé après les éléments<caption>,<colgroup>,<thead>,<tbody> et<tr>.
• Avec les éléments associés<thead> et<tbody>, l'élément<tfoot> fournit des informationssémantiques utiles et peut être utilisé lors de l'affichage à l'écran ou à l'impression. Définir de tels groupes de contenu de tableau fournit également des informations contextuelles précieuses pour les technologies d'assistance, y compris les lecteurs d'écran et les moteurs de recherche.
• Lors de l'impression d'un document, dans le cas d'un tableau sur plusieurs pages, le pied du tableau indique généralement des informations qui sont affichées comme un récapitulatif intermédiaire sur chaque page.

Exemples

Voir<table> pour un exemple complet de tableau présentant les standards courants et les bonnes pratiques.

Tableau avec pied de tableau

Cet exemple montre un tableau divisé en une section d'en-tête avec les en-têtes de colonnes, une section de corps avec les données principales du tableau, et une section de pied récapitulant les données d'une colonne.

HTML

Les éléments<thead>,<tbody> et<tfoot> servent à structurer un tableau de base en sectionssémantiques. L'élément<tfoot> représente la section de pied du tableau, qui contient une ligne (<tr>) représentant la moyenne calculée des valeurs de la colonne « Crédits ».

Pour placer les cellules du pied dans les bonnes colonnes, l'attributcolspan est utilisé sur l'élément<th> pour étendre la cellule d'en-tête de ligne sur les trois premières colonnes du tableau. La seule cellule de données (<td>) du pied est automatiquement placée à l'endroit approprié, c'est-à-dire la quatrième colonne, la valeur omise de l'attributcolspan étant par défaut1. De plus, l'attributscope est défini àrow sur la cellule d'en-tête (<th>) du pied pour indiquer explicitement que cette cellule d'en-tête du pied est liée aux cellules du tableau de la même ligne, qui dans notre exemple est la seule cellule de données de la ligne du pied contenant la moyenne calculée.

<table>  <thead>    <tr>      <th>Identifiant de l'étudiant</th>      <th>Nom</th>      <th>Spécialité</th>      <th>Crédits</th>    </tr>  </thead>  <tbody>    <tr>      <td>3741255</td>      <td>Jones, Martha</td>      <td>Informatique</td>      <td>240</td>    </tr>    <tr>      <td>3971244</td>      <td>Nim, Victor</td>      <td>Littérature</td>      <td>220</td>    </tr>    <tr>      <td>4100332</td>      <td>Petrov, Alexandra</td>      <td>Astrophysique</td>      <td>260</td>    </tr>  </tbody>  <tfoot>    <tr>      <th colspan="3" scope="row">Crédits moyens</th>      <td>240</td>    </tr>  </tfoot></table>

CSS

Quelques règles CSS de base sont utilisées pour mettre en forme et mettre en valeur le pied du tableau afin que les cellules du pied se distinguent des données du corps du tableau.

tfoot {  border-top: 3px dotted rgb(160 160 160);  background-color: #2c5e77;  color: white;}tfoot th {  text-align: right;}tfoot td {  font-weight: bold;}thead {  border-bottom: 2px solid rgb(160 160 160);  background-color: #2c5e77;  color: white;}tbody {  background-color: #e4f0f5;}

table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}tr > td:last-of-type {  text-align: center;}

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Apprendre : bases des tableaux HTML
• Les autres éléments HTML relatifs aux tableaux :<caption>,<col>,<colgroup>,<table>,<tbody>,<td>,<th>,<thead>,<tr>
• Propriété CSSbackground-color pour définir la couleur d'arrière-plan de chaque cellule du pied de tableau
• Propriété CSSborder pour contrôler les bordures des cellules du pied de tableau
• Propriété CSStext-align pour aligner horizontalement le contenu de chaque cellule du pied de tableau
• Propriété CSSvertical-align pour aligner verticalement le contenu de chaque cellule du pied de tableau