Tag HTML <tfoot>

Definizione e uso

<tfoot> l'etichetta viene utilizzata per raggruppare il contenuto del piè di pagina in una tabella HTML.

<tfoot> L'elemento con <thead> e <tbody> Gli elementi combinati per specificare ogni parte della tabella (piè di pagina, intestazione, corpo).

i browser possono utilizzare questi elementi per far sì che l'intestazione e il piè di pagina siano visualizzati separatamente durante lo scorrimento del corpo della tabella. Inoltre, quando si stampa una tabella grande che attraversa più pagine, questi elementi possono far sì che l'intestazione e il piè di pagina siano stampati in alto e in basso di ogni pagina.

Attenzione: L'elemento <tfoot> deve contenere uno o più <tr> etichetta.

<tfoot> l'etichetta deve essere utilizzata nei seguenti contesti: come <table> i figli dell'elemento, in qualsiasi <caption>、<colgroup>、<thead> e <tbody> dopo l'elemento.

Suggerimento:Di default, <thead>, <tbody> e <tfoot> Gli elementi non influenzano la layout della tabella. Tuttavia, puoi impostare lo stile di questi elementi utilizzando CSS (vedi gli esempi di seguito)!

esempio

esempio 1

HTML tabella che contiene <thead>, <tbody> e <tfoot> elementi:

<table>
  <thead>
    <tr>
      <th>mese</th>
      <th>risparmio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>gennaio</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td Febbraio</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Importo totale</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova da solo

esempio 2

Impostare lo stile di <thead>, <tbody> e <tfoot> utilizzando 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>mese</th>
      <th>risparmio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>gennaio</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td Febbraio</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Importo totale</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova da solo

esempio 3

come allineare <tfoot> del contenuto (utilizzando CSS):

<table style="width:100%">
  <tr>
    <th>mese</th>
    <th>risparmio</th>
  </tr>
  <tr>
    <td>gennaio</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td Febbraio</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Importo totale</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova da solo

esempio 4

come allineare verticalmente <tfoot> del contenuto (utilizzando CSS):

<table style="width:100%">
  <tr>
    <th>mese</th>
    <th>risparmio</th>
  </tr>
  <tr>
    <td>gennaio</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td Febbraio</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Importo totale</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova da solo

Attributi globali

<tfoot> Il tag supporta anche Attributi globali in HTML.

Attributi di evento

<tfoot> Il tag supporta anche Attributi di evento in HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <tfoot> Elemento:

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

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto