Balise <tfoot> HTML

Définition et utilisation

<tfoot> L'étiquette est utilisée pour regrouper le contenu du pied de page dans un tableau HTML.

<tfoot> L'élément avec <thead> et <tbody> Les éléments combinés pour spécifier chaque partie du tableau (pied de page, en-tête, texte).

Les navigateurs peuvent utiliser ces éléments pour que les en-têtes et les pieds de page puissent être affichés indépendamment lors du défilement du texte du tableau. De plus, lors de l'impression de grandes tables qui traversent plusieurs pages, ces éléments permettent que les en-têtes et les pieds de page soient imprimés en haut et en bas de chaque page.

Remarque : L'élément <tfoot> doit contenir un ou plusieurs <tr> étiquette.

<tfoot> L'étiquette doit être utilisée dans le contexte suivant : en tant que <table> Les éléments enfants de l'élément, dans n'importe quel <caption>、<colgroup>、<thead> et <tbody> après l'élément.

Astuce :Par défaut, <thead>、<tbody> et <tfoot> Les éléments ne modifient pas la mise en page du tableau. Cependant, vous pouvez utiliser CSS pour définir leur style (consultez les exemples ci-dessous) !

Exemple

Exemple 1

Tableau HTML contenant des éléments <thead>、<tbody> et <tfoot> :

<table>
  <thead>
    <tr>
      <th>Mois</th>
      <th>Épargne</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Janvier</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Février</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Essayez-le vous-même

Exemple 2

Définir les styles de <thead>、<tbody> et <tfoot> en utilisant CSS :

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Mois</th>
      <th>Épargne</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Janvier</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Février</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Essayez-le vous-même

Exemple 3

Comment aligner <tfoot> du contenu (utilisez CSS) :

<table style="width:100%">
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Essayez-le vous-même

Exemple 4

Comment aligner verticalement <tfoot> du contenu (utilisez CSS) :

<table style="width:100%">
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Essayez-le vous-même

Attributs globaux

<tfoot> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<tfoot> Les balises prennent également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs affichent les valeurs par défaut suivantes <tfoot> Élément :

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

Compatibilité des navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support