HTML <tfoot> Tag
Il tag <tfoot> definisce il piè di pagina di una tabella HTML. Si usa insieme a <thead> e <tbody>. Vedi esempi.
Il tag <tfoot> definisce il piè di pagina di una tabella HTML. Viene utilizzato insieme agli elementi <thead> e <tbody>, che raggruppano rispettivamente le righe di intestazione e le righe del corpo della tabella.
Il piè di pagina è il posto naturale per totali di colonna, somme, medie o altre righe di riepilogo che aggregano i dati presenti nel corpo. Raggruppare queste righe con <tfoot> invece di un semplice <tr> conferisce alla tabella una struttura semantica chiara, che aiuta le tecnologie assistive a descrivere la tabella agli utenti di screen reader.
Perché usare <tfoot> ?
- Semantica e riepiloghi. Il piè di pagina segnala "queste righe riassumono la tabella" — totali, subtotali, conteggi o note. Spesso un singolo
<th>o<td>occupa l'intera larghezza concolspan. - Comportamento in stampa e scorrimento. Quando una tabella lunga viene stampata su più pagine, alcuni user agent ripetono
<thead><tfoot>overflow), il piè di pagina può rimanere fisso in basso. - Accessibilità. I gruppi espliciti di intestazione, corpo e piè di pagina forniscono agli screen reader una struttura più significativa rispetto a un semplice elenco di righe.
Dove va <tfoot> ?
Il tag <tfoot> deve essere dichiarato all'interno dell'elemento <table>, dopo gli elementi <caption> e <colgroup> (se presenti).
In HTML5, <tfoot> può apparire prima o dopo <tbody> nel codice sorgente. La vecchia regola dell'HTML4 che richiedeva che <tfoot> venisse prima di <tbody> è obsoleta. In ogni caso, i browser eseguono sempre il rendering del piè di pagina in fondo alla tabella, quindi collocarlo per ultimo (subito dopo il corpo) è la scelta più leggibile.
Il tag <tfoot> deve contenere almeno un tag <tr>.
Gli elementi <thead> , <tbody> e <tfoot> non influenzano il layout della tabella per impostazione predefinita. Usa le proprietà CSS per personalizzare l'aspetto della tabella.
Sintassi
Il tag <tfoot> viene usato in coppia. Il contenuto è scritto tra il tag di apertura ( <tfoot> ) e quello di chiusura ( </tfoot> ).
Tag HTML <tfoot>
<table>
<thead> ... </thead>
<tbody> ... </tbody>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
</table>Esempio con una riga dei totali
Questo esempio usa <thead> , <tbody> e <tfoot> insieme. Il piè di pagina contiene una riga di riepilogo che totalizza i valori del corpo:
<!DOCTYPE html>
<html>
<head>
<title>tfoot totals row</title>
<style>
table { width: 360px; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
tfoot td { font-weight: bold; background-color: #f2f2f2; }
</style>
</head>
<body>
<table>
<caption>Monthly Sales</caption>
<thead>
<tr>
<th>Product</th>
<th>Units</th>
</tr>
</thead>
<tbody>
<tr>
<td>Keyboards</td>
<td>40</td>
</tr>
<tr>
<td>Mice</td>
<td>35</td>
</tr>
<tr>
<td>Monitors</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
</table>
</body>
</html>Si noti che <tfoot> è scritto dopo <tbody> nel sorgente, eppure il piè di pagina viene comunque renderizzato in fondo — esattamente dove lo si legge.
Strutturare tabelle complesse
Usa gli elementi <thead> , <tbody> e <tfoot> per organizzare tabelle che contengono set di dati ampi o complessi. Rendono il sorgente più facile da leggere, consentono di stilizzare ogni sezione in modo indipendente e migliorano l'accessibilità. Per abilitare lo scorrimento indipendente del corpo mantenendo visibili intestazione e piè di pagina, applica la proprietà CSS overflow a <tbody> .
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| align | right, left, center, justify, char | Imposta l'allineamento orizzontale del contenuto all'interno dell'elemento <tfoot> . Questo attributo non è supportato da HTML5. |
| bgcolor | bgcolor | Imposta il colore di sfondo delle righe all'interno dell'elemento <tfoot> . Questo attributo non è supportato da HTML5. |
| char | character | Specifica l'allineamento del contenuto all'interno dell'elemento <tfoot> rispetto a un carattere. Viene usato solo quando l'attributo è align="char". Questo attributo non è supportato da HTML5. |
| charoff | number | Specifica il numero di caratteri di cui il contenuto all'interno dell'elemento <tfoot> sarà allineato rispetto al carattere specificato dall'attributo char. Viene usato solo quando l'attributo è align="char". Questo attributo non è supportato da HTML5. |
| valign | top, bottom, middle, baseline | Specifica l'allineamento verticale del contenuto all'interno dell'elemento <tfoot> . Questo attributo non è supportato da HTML5. |
Nota: tutti gli attributi elencati sopra sono deprecati in HTML5. Usa invece CSS. La tabella seguente mostra il corrispettivo moderno per ciascuno:
| Attributo deprecato | Sostituzione CSS |
|---|---|
align | text-align |
valign | vertical-align |
bgcolor | background-color |
Il tag <tfoot> supporta anche gli Attributi Globali e gli Attributi Evento.
Come stilizzare un tag HTML <tfoot>
tfoot {
background-color: #f2f2f2; /* replaces bgcolor */
font-weight: bold;
text-align: right; /* replaces align */
vertical-align: middle; /* replaces valign */
}Consulta il capitolo CSS Tables per ulteriori modi di stilizzare le sezioni della tabella.