Le tabelle

Struttura di una tabella

Le tabelle in HTML sono costituite da un insieme di tag annidati. Il tag <table> è quello principale, che contiene tutta la tabella. La tabella è suddivisa in sezioni:

<thead> (“table head”): contiene la prima riga della tabella. Solitamente corrisponde alla riga di intestazione della tabella;
<tbody> (“table body”): contiene tutte le righe della tabella ad eccezione dell'ultima;
<tfoot> (“table foot”): contiene l'ultima riga della tabella.

Benché questi 3 tag non siano obbligatori, è bene inserirli in quanto consentono una migliore esperienza utente con la tabella. Soprattutto nel caso di tabelle molto lunghe, la suddivisione in sezioni, infatti, consente di visualizzare sempre la prima e l'ultima riga della tabella rendendo possibile la visione di poche righe del body per volta tramite una barra di scorrimento. In questo modo la tabella può non occupare tutta la pagina ed essere adattata a schermi più piccoli. Attenzione: di seguito queste tre sezioni saranno omesse per semplicità di spiegazione

Ogni sezione è composta da righe, definite con il tag <tr> (“table row”). Ogni riga può essere composta da due tipi di elementi:

<td> (“table data”): genera una cella all'interno della riga. Ogni elemento definito da <td> è quindi l'intersezione tra una riga e una colonna. Il numero di <td> in righe diverse non deve essere obbligatoriamente lo stesso: una riga può avere una cella, una due e una tre, anche se alle volte può non essere graficamente bello da vedersi. Ogni elemento <td> può contenere del testo oppure qualsiasi elemento html, dalle immagini, ai link e persino altre tabelle.
<th> (“table head”): genera una cella all'interno della riga. Tuttavia, ad eccezione di <td>, questo tag è usato per definire le celle di intestazione della tabella, per cui rende il testo contenuto al suo interno in grassetto.

Infine, si può impiegare il tag <caption> per inserire una didascalia sopra o sotto alla tabella.

<table>
    <caption>Didascalia</caption>
    <thead>
        <tr>
            <th>Colonna 1</th>
            <th>Colonna 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Riga 1 col 1</td>
            <td>Riga 1 col 2</td>
        </tr>
        <tr>
            <td>Riga 2 col 1</td>
            <td>Riga 2 col 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Riga 3 col 1</td>
            <td>Riga 3 col 2</td>
        </tr>
    </tfoot>
</table>

Attributi delle tabelle

Attributi di `<table>`

Un attributo che possiamo applicare a tutta la tabella è la grandezza del bordo. Possiamo regolarla tramite l'attributo border. Più il valore di border è elevato e maggiore sarà lo spessore. Zero è il valore di default, che sussiste senza specificare alcun valore di border e che rappresenta l'assenza di bordi.

border=“1”:

<table border="1">
<tr>
    <td>El 1</td>
    <td>El 2</td>
</tr>
<tr>
    <td>El 3</td>
    <td>El 4</td>
</tr>
</table>

border=“3”:

<table border="3">
<tr>
    <td>El 1</td>
    <td>El 2</td>
</tr>
<tr>
    <td>El 3</td>
    <td>El 4</td>
</tr>
</table>

Attributi di `<th>` e `<td>`

Rowspan

È possibile unire due o più righe di una tabella con l'attributo rowspan:

<table border="1">
<tr>
    <td rowspan="3">El 1</td>
    <td>El 2</td>
</tr>
<tr>
    <td>El 3</td>
</tr>
<tr>
    <td>El 4</td>
</tr>
<tr>
    <td>El 5</td>
    <td>El 6</td>
</tr>
</table>

Da notare che, vista la presenza di un elemento che occupa 3 righe, nelle due righe successive alla sua non vi sono 2 elementi <td>, ma bensì uno, che corrisponde alla colonna segnata dall'elemento 2. Cosa succederebbe se mettessimo più elementi? La tabella si presenterebbe così:

<table border="1">
<tr>
    <td rowspan="3">El 1</td>
    <td>El 2</td>
</tr>
<tr>
    <td>El 3</td>
    <td>El 4</td>
</tr>
<tr>
    <td>El 5</td>
    <td>El 6</td>
</tr>
<tr>
    <td>El 7</td>
    <td>El 8</td>
</tr>
</table>

L'attributo rowspan funge quindi da “segnaposto”, permettendo a <td> di occupare più righe sotto di lui.

Colspan

Allo stesso modo, è possibile applicare l'attributo colspan per unire tra loro due o più colonne:

<table border="1">
<tr>
    <td colspan="2">El 1</td>
    <td>El 2</td>
    <td>El 3</td>
</tr>
<tr>
    <td>El 4</td>
    <td>El 5</td>
    <td>El 6</td>
    <td>El 7</td>
</tr>
</table>

Il fatto che l'elemento 1 occupi più colonne, fa sì che nella riga seguente siano necessari un numero di <td> maggiori per riempire lo spazio.

Rowspan e Colspan

I due attributi possono essere combinati in un'unica tabella:

Codice:

<table border="1">
    <tr>
        <th colspan="2">
            Cella allargata
        </th>
        <th>Cella normale</th>
    </tr>
    <tr>
        <td>El 1</td>
        <td>El 2</td>
        <td>El 3</td>
    </tr>
    <tr>
        <td rowspan="2">El 4</td>
        <td>El 5</td>
        <td>El 6</td>
    </tr>
    <tr>
        <td>El 7</td>
        <td>El 8</td>
    </tr>
</table>

Da notare come visto che colspan è uguale a 2, occupa due colonne nella riga di intestazione. Queste due, sommate all'altro <th> (cella normale) fanno un totale di 3 colonne per la riga di intestazione. Per questo motivo, ogni riga della tabella dovrebbe avere specificati 3 tag <td> differenti (così come avviene nella seconda riga della tabella, quella con El 1, 2 e 3). Tuttavia, visto che nella terza riga della tabella, El 4 occupa due righe differenti (rowspan="2"), prende spazio sia nella sua riga dove è stato specificato, sia nella riga successiva (l'ultima riga della tabella). Di conseguenza, nell'ultima riga sono specificati solo 2 elementi <td>(il terzo è lo spazio occupato da El 4).