Il Tag Tfoot in Html

Completiamo la struttura della tabella

Nelle lezioni precedenti abbiamo imparato a costruire una tabella, a distinguere intestazioni e dati e a unire alcune celle.

Ora utilizziamo una tabella diversa dall’orario scolastico: una semplice tabella di prodotti e spese.

Questo esempio ci permette di capire facilmente a cosa serve il nuovo elemento tfoot.

Una tabella completa con intestazione e dati

<table>

    <caption>Spese per il materiale scolastico</caption>

    <thead>

        <tr>
            <th>Prodotto</th>
            <th>Quantità</th>
            <th>Prezzo</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Quaderni</td>
            <td>10</td>
            <td>20 €</td>
        </tr>

        <tr>
            <td>Penne</td>
            <td>20</td>
            <td>15 €</td>
        </tr>

        <tr>
            <td>Cartelline</td>
            <td>5</td>
            <td>10 €</td>
        </tr>

    </tbody>

</table>

La tabella contiene tre colonne: Prodotto, Quantità e Prezzo.

Manca però un’informazione utile: il totale della spesa.

Il tag <tfoot>

Il tag <tfoot> rappresenta la parte finale della tabella.

Il tag <tfoot> rappresenta la parte finale della tabella.

È particolarmente utile quando vogliamo inserire informazioni conclusive, per esempio un totale.

La stessa tabella con tfoot

<table>

    <caption>Spese per il materiale scolastico</caption>

    <thead>

        <tr>
            <th>Prodotto</th>
            <th>Quantità</th>
            <th>Prezzo</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Quaderni</td>
            <td>10</td>
            <td>20 €</td>
        </tr>

        <tr>
            <td>Penne</td>
            <td>20</td>
            <td>15 €</td>
        </tr>

        <tr>
            <td>Cartelline</td>
            <td>5</td>
            <td>10 €</td>
        </tr>

    </tbody>

    <tfoot>

        <tr>
            <th colspan="2">Totale</th>
            <td>45 €</td>
        </tr>

    </tfoot>

</table>

Osserviamo la struttura

thead contiene le intestazioni;
tbody contiene i dati;
tfoot contiene la parte conclusiva.

Ripassiamo colspan

Nella riga finale abbiamo scritto:

<tr>
    <th colspan="2">Totale</th>
    <td>45 €</td>
</tr>

La tabella possiede 3 colonne.

La cella contenente la parola Totale occupa le prime due colonne grazie a:

colspan="2"

La cella contenente 45 € occupa invece la terza colonna.

Contiamo le colonne

La riga finale contiene:

2 colonne + 1 colonna = 3 colonne

La struttura completa

A questo punto conosciamo le principali parti di una tabella HTML:

<table>

    <caption>Titolo della tabella</caption>

    <thead>
        ... intestazioni ...
    </thead>

    <tbody>
        ... dati ...
    </tbody>

    <tfoot>
        ... informazioni finali ...
    </tfoot>

</table>

Elemento	Funzione
`caption`	Titolo o descrizione della tabella
`thead`	Parte dedicata alle intestazioni
`tbody`	Parte contenente i dati
`tfoot`	Parte finale, per esempio un totale

Miglioriamo la tabella con il CSS

La struttura HTML della tabella è completa. Ora possiamo migliorare il suo aspetto utilizzando alcune semplici proprietà CSS.

1. I bordi

th, td {
    border: 1px solid black;
}

Questa regola applica un bordo alle celle di intestazione th e alle celle di dati td.

2. Unire i bordi

table {
    border-collapse: collapse;
}

La proprietà border-collapse: collapse fa coincidere i bordi delle celle adiacenti.

3. La larghezza della tabella

table {
    border-collapse: collapse;
    width: 100%;
}

Con width: 100% la tabella occupa tutta la larghezza disponibile.

4. Lo spazio interno delle celle

th, td {
    border: 1px solid black;
    padding: 10px;
}

Il padding crea spazio tra il contenuto della cella e il suo bordo.

5. Allineare il contenuto

th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

Con text-align: center il contenuto delle celle viene centrato orizzontalmente.

6. Colorare le intestazioni

th {
    background-color: lightblue;
}

La proprietà background-color permette di modificare il colore di sfondo.

Esempio completo

Vediamo ora la pagina HTML completa con la tabella e tutte le regole CSS appena studiate.

<!DOCTYPE html>

<html lang="it">

<head>

    <meta charset="UTF-8">

    <title>Spese scolastiche</title>

    <style>

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: lightblue;
        }

    </style>

</head>

<body>

    <table>

        <caption>Spese per il materiale scolastico</caption>

        <thead>

            <tr>
                <th>Prodotto</th>
                <th>Quantità</th>
                <th>Prezzo</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>Quaderni</td>
                <td>10</td>
                <td>20 €</td>
            </tr>

            <tr>
                <td>Penne</td>
                <td>20</td>
                <td>15 €</td>
            </tr>

            <tr>
                <td>Cartelline</td>
                <td>5</td>
                <td>10 €</td>
            </tr>

        </tbody>

        <tfoot>

            <tr>
                <th colspan="2">Totale</th>
                <td>45 €</td>
            </tr>

        </tfoot>

    </table>

</body>

</html>

LABORATORIO

Tabella delle spese scolastiche

Creiamo una nuova pagina HTML contenente una tabella di prodotti e spese.

Durante l’esercitazione completeremo prima la struttura HTML e successivamente miglioreremo l’aspetto della tabella con il CSS.

Passo 1 - Creare il file

Crea un nuovo file chiamato:

spese.html

Passo 2 - Creare la tabella

Inserisci il seguente codice:

<!DOCTYPE html>

<html lang="it">

<head>

    <meta charset="UTF-8">

    <title>Spese scolastiche</title>

</head>

<body>

    <table>

        <caption>Spese per il materiale scolastico</caption>

        <thead>

            <tr>
                <th>Prodotto</th>
                <th>Quantità</th>
                <th>Prezzo</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>Quaderni</td>
                <td>10</td>
                <td>20 €</td>
            </tr>

            <tr>
                <td>Penne</td>
                <td>20</td>
                <td>15 €</td>
            </tr>

            <tr>
                <td>Cartelline</td>
                <td>5</td>
                <td>10 €</td>
            </tr>

        </tbody>

        <tfoot>

            <tr>
                <th colspan="2">Totale</th>
                <td>45 €</td>
            </tr>

        </tfoot>

    </table>

</body>

</html>

Osserva

Apri la pagina nel browser.

La struttura della tabella è presente, ma senza CSS la tabella è ancora poco evidente.

Passo 3 - Aggiungere i bordi

All’interno di head aggiungi:

<style>

    th, td {
        border: 1px solid black;
    }

</style>

Salva e aggiorna la pagina.

Passo 4 - Unire i bordi

Aggiungi la regola per la tabella:

table {
    border-collapse: collapse;
    width: 100%;
}

Passo 5 - Aggiungere spazio nelle celle

Modifica la regola di th e td:

th, td {
    border: 1px solid black;
    padding: 10px;
}

Osserva come cambia la leggibilità della tabella.

Passo 6 - Centrare il contenuto

Aggiungi:

th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

Passo 7 - Colorare le intestazioni

Aggiungi infine:

th {
    background-color: lightblue;
}

Passo 8 - Controllare il codice completo

<!DOCTYPE html>

<html lang="it">

<head>

    <meta charset="UTF-8">

    <title>Spese scolastiche</title>

    <style>

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: lightblue;
        }

    </style>

</head>

<body>

    <table>

        <caption>Spese per il materiale scolastico</caption>

        <thead>

            <tr>
                <th>Prodotto</th>
                <th>Quantità</th>
                <th>Prezzo</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>Quaderni</td>
                <td>10</td>
                <td>20 €</td>
            </tr>

            <tr>
                <td>Penne</td>
                <td>20</td>
                <td>15 €</td>
            </tr>

            <tr>
                <td>Cartelline</td>
                <td>5</td>
                <td>10 €</td>
            </tr>

        </tbody>

        <tfoot>

            <tr>
                <th colspan="2">Totale</th>
                <td>45 €</td>
            </tr>

        </tfoot>

    </table>

</body>

</html>

Esercizio autonomo

Modifica la tabella appena realizzata.

aggiungi almeno altri due prodotti;
modifica quantità e prezzi;
aggiorna manualmente il totale;
mantieni thead, tbody e tfoot;
utilizza colspan nella riga del totale;
mantieni i bordi e il padding;
scegli un diverso colore di sfondo per le intestazioni.

Controllo finale

La tabella contiene un caption?
Le intestazioni sono dentro thead?
I prodotti sono dentro tbody?
Il totale è dentro tfoot?
La parola Totale occupa due colonne?
I bordi sono correttamente uniti?
Le celle hanno spazio interno?

Errori comuni

1. Inserire il totale dentro tbody

La tabella funzionerebbe comunque visivamente, ma se la riga rappresenta una parte conclusiva è più chiaro organizzarla all’interno di tfoot.

2. Dimenticare che colspan occupa più colonne

Nella nostra tabella abbiamo tre colonne.

<th colspan="2">Totale</th>
<td>45 €</td>

La prima cella occupa due colonne e la seconda una colonna: in totale abbiamo ancora tre colonne.

3. Applicare il bordo soltanto a td

Se vogliamo lo stesso bordo anche sulle intestazioni, dobbiamo includere th:

th, td {
    border: 1px solid black;
}

4. Confondere HTML e CSS

Gli elementi come table, thead, tbody e tfoot organizzano il contenuto.

Le proprietà come padding, text-align e background-color modificano invece l’aspetto grafico.

Verifica rapida

Domande di controllo

A cosa serve tfoot?
Qual è la differenza tra thead, tbody e tfoot?
Perché nella riga del totale utilizziamo colspan="2"?
A cosa serve border-collapse: collapse?
A cosa serve il padding?
Che cosa fa text-align: center?
Quale proprietà CSS abbiamo utilizzato per colorare le intestazioni?
HTML e CSS svolgono lo stesso compito?

Sviluppo Web

Il Tag Tfoot

Lezione sulle tabelle HTML: completare la struttura con tfoot e migliorare la leggibilità della tabella utilizzando semplici proprietà CSS. Esercitazione pratica su una tabella di prodotti e spese.