Il Tag Table

Una tabella permette di organizzare informazioni in righe e colonne.

Pensiamo, per esempio, a un semplice orario scolastico:

Ora     Lunedì       Martedì       Mercoledì
------------------------------------------------
8:00    Italiano     Matematica    Informatica
9:00    Inglese      Informatica   Italiano
10:00   Matematica   Inglese       Storia

Possiamo individuare:

• 3 righe contenenti gli orari delle lezioni;
• 4 colonne: Ora, Lunedì, Martedì e Mercoledì.

Il tag <table> indica l’inizio e la fine di una tabella HTML.

<table>

    ...

</table>

Tutte le righe e tutte le celle della tabella dovranno essere inserite tra il tag di apertura <table> e quello di chiusura </table>.

Il tag <tr> crea una riga della tabella.

Il nome tr deriva dall’inglese table row, cioè riga della tabella.

Una tabella con una sola riga può essere scritta così:

<table>

    <tr>

    </tr>

</table>

Se vogliamo due righe, dobbiamo utilizzare due elementi <tr>:

<table>

    <tr>

    </tr>

    <tr>

    </tr>

</table>

All’interno di ogni riga inseriamo le celle.

Una cella viene creata mediante il tag <td>.

Il nome td deriva da table data.

Per esempio:

<tr>

    <td>Italiano</td>

</tr>

Abbiamo creato una riga contenente una sola cella.

Inseriamo ora tre celle nella stessa riga:

<tr>

    <td>Italiano</td>
    <td>Matematica</td>
    <td>Informatica</td>

</tr>

Le tre celle vengono visualizzate una accanto all’altra. Abbiamo quindi creato tre colonne.

Combiniamo ora i tre tag che abbiamo imparato.

<table>

    <tr>
        <td>Italiano</td>
        <td>Matematica</td>
        <td>Informatica</td>
    </tr>

    <tr>
        <td>Inglese</td>
        <td>Storia</td>
        <td>Informatica</td>
    </tr>

</table>

Contiamo gli elementi:

• ci sono 2 tag tr → quindi abbiamo 2 righe;
• ogni riga contiene 3 tag td → quindi abbiamo 3 colonne.

                 COLONNE

              1           2             3

RIGA 1     Italiano    Matematica    Informatica

RIGA 2     Inglese     Storia        Informatica

Se apriamo una tabella HTML nel browser, i confini delle celle potrebbero non essere chiaramente visibili.

Per vedere meglio righe e colonne possiamo aggiungere un semplice bordo.

<style>

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

</style>

Osserviamo la proprietà:

border: 1px solid black;

Possiamo quindi leggere:

border: 1px solid black;
          |    |     |
          |    |     +--- colore
          |    |
          |    +--------- tipo di linea
          |
          +-------------- spessore

Perché alcuni bordi sembrano doppi?

Applicando un bordo alle celle potremmo vedere due linee tra una cella e quella vicina.

Possiamo unirle utilizzando:

table {
    border-collapse: collapse;
}

La proprietà border-collapse: collapse; fa in modo che i bordi delle celle vicine vengano uniti.

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

table {
    border-collapse: collapse;
}

Diamo un po’ di spazio al contenuto

Il testo può risultare troppo vicino al bordo della cella. Possiamo aggiungere uno spazio interno utilizzando padding.

td {
    padding: 8px;
}

Il valore 8px indica lo spazio tra il contenuto della cella e il suo bordo.

Il nostro CSS completo diventa:

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

table {
    border-collapse: collapse;
}

td {
    padding: 8px;
}

orario.html

<!DOCTYPE html>

<html lang="it">

<head>

    <meta charset="UTF-8">

    <title>Il mio orario scolastico</title>

</head>


<body>

    <h1>Il mio orario scolastico</h1>


</body>

</html>

<table>


</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>

<style>

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

    table {
        border-collapse: collapse;
    }

    td {
        padding: 8px;
    }

</style>

Errore 1 - Inserire td fuori da tr

Questa struttura non è corretta:

<table>

    <td>Italiano</td>
    <td>Matematica</td>

</table>

Le celle devono appartenere a una riga.

La struttura corretta è:

<table>

    <tr>

        <td>Italiano</td>
        <td>Matematica</td>

    </tr>

</table>

Errore 2 - Dimenticare la chiusura di una riga

Quando apriamo un elemento <tr>, dobbiamo ricordarci di chiuderlo con </tr>.

Errore 3 - Numero diverso di celle

Se il nostro orario contiene 6 colonne, ogni riga dovrebbe contenere 6 celle.

<tr>

    <td>9:00</td>
    <td>Italiano</td>
    <td>Matematica</td>

</tr>

Questa riga contiene soltanto tre celle e quindi non completa le sei colonne previste dal nostro orario.