<tfoot> : l'élément de pied de tableau

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 les attributs 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.

align Obsolète

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

bgcolor Obsolète

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

char Obsolè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. Si align n'est pas défini à char, cet attribut est ignoré.

charoff Obsolè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'attribut char.

valign Obsolète

Définit l'alignement vertical de chaque cellule du pied de tableau. Les valeurs énumérées possibles sont baseline, bottom, middle et top. Utilisez la propriété CSS vertical-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 informations sé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 sections sé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'attribut colspan 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'attribut colspan étant par défaut 1. De plus, l'attribut scope 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é CSS background-color pour définir la couleur d'arrière-plan de chaque cellule du pied de tableau
• Propriété CSS border pour contrôler les bordures des cellules du pied de tableau
• Propriété CSS text-align pour aligner horizontalement le contenu de chaque cellule du pied de tableau
• Propriété CSS vertical-align pour aligner verticalement le contenu de chaque cellule du pied de tableau