Tag HTML <tfoot>

❮ Précédent Suivant ❯

L’élément <tfoot> définit le pied de page de la Table HTML. Il est utilisé conjointement avec les éléments <thead> et <tbody>, qui définissent respectivement l'en-tête et le contenu (corps) de la table.

L'élément <tfoot> est placé après les éléments <caption>, <colgroup> (le cas échéant) et <thead>. Notez que pour afficher correctement le pied de page dans la table, l'élément <tfoot> doit être devant l'élément <tbody>.

L’élément <tfoot> doit contenir au moins un élément <tr>.

Par défaut, les tags <thead>, <tbody> et <tfoot> n’affectent pas l’apparence externe de la table, pour les paramètres de l’apparence externe de la table utilisez les styles CSS.

Syntaxe

<table>
  <thead> ... </thead>
  <tfoot>
    <tr>
      <td> ... </td>
    </tr>
  </tfoot>
  <tbody> ... </tbody>
</table>

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Le titre du document.</title>
  </head>
  <body>
    <table summary="Goalscorers" width="400" border="1">
      <caption>
        Meilleurs buteurs de la Coupe du Monde de la FIFA 2018
        <hr>
      </caption>
      <thead>
        <tr>
          <th>Nom</th>
          <th>Pays</th>
          <th>But</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th colspan="3">Harry Kane - le meilleur joueur!</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Harry Kane</td>
          <td>Angleterre</td>
          <td>6</td>
        </tr>
        <tr>
          <td>Christiano Ronaldo</td>
          <td>Portugal</td>
          <td>4</td>
        </tr>
        <tr>
          <td>Neymar</td>
          <td>Brésil</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez-vous-même!

Résultat

Attributs

Attribut	Valeur	Description
align	right left center justify char	Aligne le contenu de l’élément <tfoot>. Non supporté en HTML 5.
bgcolor	bgcolor	Définit la couleur d'arrière-plan des cellules dans le tag <tfoot>. Non supporté en HTML 5.
char	character	Aligne le contenu de l'élément avec le caractère spécifié. Utilisé uniquement si l'attribut align = "char". Non supporté en HTML 5.
charoff	number	Aligne le contenu de l'élément avec le symbole spécifié dans l'attribut, en passant d'un certain caractère à droite (valeurs positives) ou à gauche (valeurs négatives). Utilisé uniquement si l'attribut align = "char". Non supporté en HTML 5.
valign	top bottom middle baseline	Spécifie l'alignement vertical du contenu de l'élément. Non supporté en HTML 5.

Le tag <tfoot> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <tfoot> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <tfoot>:

La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
La propriété CSS font-size définit la taille de la police.
La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.

Coloration du texte dans le tag HTML <tfoot>:

La propriété CSS color décrit la couleur du contenu et les décorations du texte.
La propriété CSS background-color définit la couleur de fond d’un élément.

Styles de mise en page du texte pour la tag HTML <tfoot>:

La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
La propriété CSS word-break spécifie où les lignes doivent être cassées.

Autres propriétés utiles pour le tag HTML <tfoot>:

La propriété CSS text-shadow ajoute des ombres au texte.
La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
La propriété CSS line-height spécifie la hauteur d’une ligne.
La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
La propriété CSS word-spacing permet de définir l’espacement entre les mots.


✓	✓	✓	✓	✓

✓