Il Tag Th E Tbody in Html

Ripassiamo la tabella della lezione precedente

Nella lezione precedente abbiamo imparato a costruire una tabella utilizzando tre elementi fondamentali:

<table> contiene l’intera tabella;
<tr> crea una riga;
<td> crea una cella contenente un dato.

Abbiamo realizzato un semplice orario scolastico simile al seguente:

<table>

    <tr>
        <td>Ora</td>
        <td>Lunedì</td>
        <td>Martedì</td>
        <td>Mercoledì</td>
        <td>Giovedì</td>
        <td>Venerdì</td>
    </tr>

    <tr>
        <td>8:00</td>
        <td>Italiano</td>
        <td>Matematica</td>
        <td>Informatica</td>
        <td>Inglese</td>
        <td>Storia</td>
    </tr>

    <tr>
        <td>9:00</td>
        <td>Inglese</td>
        <td>Informatica</td>
        <td>Italiano</td>
        <td>Matematica</td>
        <td>Scienze</td>
    </tr>

</table>

Osserviamo

La prima riga contiene realmente dei dati come le altre?

Ora, Lunedì, Martedì, Mercoledì, Giovedì e Venerdì hanno una funzione particolare: indicano il significato delle colonne.

Il tag <th>: le celle di intestazione

Non tutte le celle di una tabella hanno la stessa funzione.

Alcune celle contengono i dati, mentre altre servono a spiegare che cosa rappresentano quei dati.

Per creare una cella di intestazione utilizziamo:

<th> ... </th>

Il nome th deriva da table header.

Nell’orario possiamo quindi modificare la prima riga.

Prima

<tr>

    <td>Ora</td>
    <td>Lunedì</td>
    <td>Martedì</td>
    <td>Mercoledì</td>
    <td>Giovedì</td>
    <td>Venerdì</td>

</tr>

Dopo

<tr>

    <th>Ora</th>
    <th>Lunedì</th>
    <th>Martedì</th>
    <th>Mercoledì</th>
    <th>Giovedì</th>
    <th>Venerdì</th>

</tr>

Differenza fondamentale

<td> contiene normalmente un dato;
<th> contiene una intestazione.

Il browser normalmente evidenzia automaticamente il contenuto delle celle th, per esempio utilizzando il grassetto e l’allineamento centrato.

Attenzione

Non utilizziamo th soltanto perché vogliamo ottenere un testo in grassetto.

Utilizziamo th quando la cella ha realmente la funzione di intestazione.

th oppure td?

Tag	Significato	Utilizzo	Esempio
`<th>`	Table Header	Cella di intestazione	Lunedì
`<td>`	Table Data	Cella contenente un dato	Informatica

Il tag <caption>: dare un titolo alla tabella

Ora la nostra tabella contiene intestazioni e dati, ma possiamo renderne ancora più chiaro il significato.

Il tag <caption> permette di associare un titolo o una breve descrizione alla tabella.

Per esempio:

<table>

    <caption>Orario scolastico della classe 3A</caption>

    ...

</table>

caption viene inserito all’interno di table.

Ricorda

caption descrive il significato dell’intera tabella.

Possiamo quindi iniziare il nostro orario in questo modo:

<table>

    <caption>Orario scolastico della classe 3A</caption>

    <tr>

        <th>Ora</th>
        <th>Lunedì</th>
        <th>Martedì</th>
        <th>Mercoledì</th>
        <th>Giovedì</th>
        <th>Venerdì</th>

    </tr>

    ...

</table>

Intestazione e corpo della tabella

Osserviamo nuovamente il nostro orario.

Ora      Lunedì       Martedì       Mercoledì
------------------------------------------------

8:00     Italiano     Matematica    Informatica

9:00     Inglese      Informatica   Italiano

10:00    Matematica   Inglese       Storia

Possiamo riconoscere due parti:

una parte che contiene le intestazioni delle colonne;
una parte che contiene i dati dell’orario.

HTML permette di rappresentare questa organizzazione anche nel codice.

<thead>: l’intestazione della tabella

Il tag <thead> raggruppa la parte della tabella che contiene le intestazioni.

<thead>

    <tr>

        <th>Ora</th>
        <th>Lunedì</th>
        <th>Martedì</th>
        <th>Mercoledì</th>
        <th>Giovedì</th>
        <th>Venerdì</th>

    </tr>

</thead>

All’interno di thead troviamo quindi una riga tr che contiene le celle di intestazione th.

<tbody>: il corpo della tabella

Il tag <tbody> raggruppa invece le righe che costituiscono il corpo della tabella.

Nel nostro caso contiene le lezioni dell’orario.

<tbody>

    <tr>

        <td>8:00</td>
        <td>Italiano</td>
        <td>Matematica</td>
        <td>Informatica</td>
        <td>Inglese</td>
        <td>Storia</td>

    </tr>

    <tr>

        <td>9:00</td>
        <td>Inglese</td>
        <td>Informatica</td>
        <td>Italiano</td>
        <td>Matematica</td>
        <td>Scienze</td>

    </tr>

</tbody>

Un modo semplice per ricordarli

thead = testa della tabella;
tbody = corpo della tabella.

Come si organizza la tabella

Possiamo rappresentare la struttura in questo modo:

table
 |
 +-- caption
 |
 +-- thead
 |     |
 |     +-- tr
 |           |
 |           +-- th
 |           +-- th
 |           +-- th
 |
 +-- tbody
       |
       +-- tr
       |     |
       |     +-- td
       |     +-- td
       |     +-- td
       |
       +-- tr
             |
             +-- td
             +-- td
             +-- td

Struttura da ricordare

<table>

    <caption>Titolo della tabella</caption>

    <thead>

        <tr>

            <th>Intestazione</th>

        </tr>

    </thead>


    <tbody>

        <tr>

            <td>Dato</td>

        </tr>

    </tbody>

</table>

LABORATORIO

Miglioriamo il nostro orario

Riprendiamo il file orario.html realizzato nella lezione precedente.

Riprendiamo il file orario.html realizzato nella lezione precedente.

Non dobbiamo creare una nuova tabella: miglioreremo quella che abbiamo già costruito.

Passo 1 - Aprire orario.html

Apri il file:

orario.html

Individua nel codice il tag:

<table>

Passo 2 - Trasformare le intestazioni

Individua la prima riga dell’orario.

<tr>

    <td>Ora</td>
    <td>Lunedì</td>
    <td>Martedì</td>
    <td>Mercoledì</td>
    <td>Giovedì</td>
    <td>Venerdì</td>

</tr>

Sostituisci i tag td con th.

<tr>

    <th>Ora</th>
    <th>Lunedì</th>
    <th>Martedì</th>
    <th>Mercoledì</th>
    <th>Giovedì</th>
    <th>Venerdì</th>

</tr>

Osserva il browser

Salva e aggiorna la pagina.

Che differenza noti tra le intestazioni e le altre celle?

Passo 3 - Aggiungere caption

Subito dopo l’apertura di table aggiungi:

<caption>Orario scolastico della classe 3A</caption>

La struttura iniziale sarà quindi:

<table>

    <caption>Orario scolastico della classe 3A</caption>

    <tr>

        ...

    </tr>

</table>

Controlla

Dove viene visualizzato il testo contenuto in caption?

Passo 4 - Creare thead

Ora racchiudiamo la riga contenente le intestazioni all’interno di thead.

<thead>

    <tr>

        <th>Ora</th>
        <th>Lunedì</th>
        <th>Martedì</th>
        <th>Mercoledì</th>
        <th>Giovedì</th>
        <th>Venerdì</th>

    </tr>

</thead>

Passo 5 - Creare tbody

Tutte le righe che contengono le lezioni devono invece essere racchiuse all’interno di:

<tbody>

    ...

</tbody>

Per esempio:

<tbody>

    <tr>

        <td>8:00</td>
        <td>Italiano</td>
        <td>Matematica</td>
        <td>Informatica</td>
        <td>Inglese</td>
        <td>Storia</td>

    </tr>

    <tr>

        <td>9:00</td>
        <td>Inglese</td>
        <td>Informatica</td>
        <td>Italiano</td>
        <td>Matematica</td>
        <td>Scienze</td>

    </tr>

</tbody>

Passo 6 - Aggiornare i bordi

Nella lezione precedente avevamo utilizzato:

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

Ora abbiamo introdotto anche th. Dobbiamo quindi aggiungerlo alla regola:

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

Il CSS completo può diventare:

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

table {
    border-collapse: collapse;
}

th, td {
    padding: 8px;
}

Perché abbiamo modificato il CSS?

Se il bordo fosse applicato soltanto a td, le nuove celle th non riceverebbero la stessa regola.

Passo 7 - Controllare il codice completo

La parte relativa alla tabella dovrebbe ora avere questa organizzazione:

<table>

    <caption>Orario scolastico della classe 3A</caption>


    <thead>

        <tr>

            <th>Ora</th>
            <th>Lunedì</th>
            <th>Martedì</th>
            <th>Mercoledì</th>
            <th>Giovedì</th>
            <th>Venerdì</th>

        </tr>

    </thead>


    <tbody>

        <tr>

            <td>8:00</td>
            <td>Italiano</td>
            <td>Matematica</td>
            <td>Informatica</td>
            <td>Inglese</td>
            <td>Storia</td>

        </tr>


        <tr>

            <td>9:00</td>
            <td>Inglese</td>
            <td>Informatica</td>
            <td>Italiano</td>
            <td>Matematica</td>
            <td>Scienze</td>

        </tr>


        <tr>

            <td>10:00</td>
            <td>Matematica</td>
            <td>Inglese</td>
            <td>Storia</td>
            <td>Informatica</td>
            <td>Italiano</td>

        </tr>

    </tbody>

</table>

Esercizio autonomo

Completa il tuo orario scolastico:

inserisci tutte le ore previste;
utilizza th per le intestazioni dei giorni;
inserisci un caption significativo;
inserisci la riga delle intestazioni all’interno di thead;
inserisci tutte le righe delle lezioni all’interno di tbody;
controlla che th e td abbiano entrambi il bordo.

Errori comuni

1. Utilizzare td per le intestazioni

Questa struttura funziona visivamente:

<td>Lunedì</td>

ma se Lunedì è l’intestazione di una colonna è più corretto utilizzare:

<th>Lunedì</th>

2. Inserire caption fuori dalla tabella

Non scriviamo:

<caption>Orario scolastico</caption>

<table>

    ...

</table>

caption deve appartenere alla tabella:

<table>

    <caption>Orario scolastico</caption>

    ...

</table>

3. Inserire td direttamente dentro tbody

Questa struttura non è corretta:

<tbody>

    <td>Italiano</td>

</tbody>

Le celle devono continuare ad appartenere a una riga:

<tbody>

    <tr>

        <td>Italiano</td>

    </tr>

</tbody>

4. Dimenticare th nel CSS

Dopo aver trasformato le intestazioni da td a th, ricordiamoci di applicare il bordo anche alle nuove celle:

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

Verifica rapida

Domande di controllo

Qual è la differenza tra th e td?
Che cosa significa la sigla th?
A cosa serve il tag caption?
Dove deve essere inserito caption?
A cosa serve thead?
A cosa serve tbody?
Quali elementi troviamo normalmente all’interno di thead?
Quali righe dell’orario inseriamo all’interno di tbody?
Perché abbiamo modificato il CSS da table, td a table, th, td?

Sviluppo Web

Il Tag Th E Tbody

Seconda lezione sulle tabelle HTML: migliorare la struttura di una tabella utilizzando th per le intestazioni, caption per il titolo e thead e tbody per separare intestazione e dati.