## 8.1 - I tag di base delle tabelle

Una tabella e' specificata come il contenuto di un tag `<table>`.

L'attributo piu' comune per il tag `<table>` e' `border`. Una tabella priva dell'attributo `border` risulterebbe in una matrice di informazioni prive di righe di separazione orizzontali o verticali per delimitare le celle.

Nei browser lo spessore dei bordi della tabella e' predefinito, e viene utilizzato quando il valore `"border"` e' assegnato all'attributo omonimo `border`. Altrimenti e' possibile assegnare al parametro un valore numerico per specificare lo spessore in pixel.

Nella maggior parte dei casi le tabelle sono precedute da un titolo, contenuto nel tag `<caption>`.

Nel codice HTML i contenuti di una tabella vengono specificati una riga alla volta. Alle colonne e alle righe delle tabelle viene assegnata di norma un'intestazione.

- Ogni riga e' specificata da un apposito tag `<tr>` (table row)
- l'intestazione all'interno di ogni riga e' specificata dal tag di intestazione della tabella `<th>` (table head).
  Nonostante nel nome del tag `<th>` appaia la parola intestazione (table header), in realta' si intende etichetta per evitare di confonderla con le intestazioni create dal tag `<hx>`.
- Ogni cella di dati di una riga viene specificata dal tag dei dati della tabella `<td>` (table data).

La prima riga di una tabella contiene le etichette delle colonne. Di conseguenza, la prima delle specifiche HTML per la tabella deve essere un elenco delle etichette delle colonne.

Immaginiamo ad esempio che una tabella abbia tre colonne dati le cui etichette corrispondenti sono `Apple, Orange`, `Screwdriver` , allora la prima riga sara' specificata dal codice seguente:

`<tr>
<th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>`

Apple | Orange | Screwdriver
--- | --- | ---

Le righe di dati di una tabella vengono specificate con un tag di intestazione (per l'intestazione della riga corrispondente) e un tag di dati per ogni colonna di dati. Per esempio, la prima riga di dati per la tabella in costruzione potrebbe essere la seguente:

`<tr>
<th> Breakfast </th>
<td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</tr>`

Breakfast | 0 | 1 | 0

Nelle tabelle dotate di etichette di riga e di colonna, la cella nell'angolo superiore sinistro e' spesso vuota: questa cella pertanto viene specificata da un tag di intestazione della tabella privo di contenuto: `<th></th>` oppure `<th />`.

Esempio 1: tabella ---- Rendering dell'esempio

### Etichette Multiple

In molti casi le tabelle hanno livelli multipli di etichette di riga o di colonna, in cui un'etichetta e' posta al di sopra di due o piu' etichette secondarie. Si consideri il seguente esempio:

Esempio 2: tabella con etichette multiple ---- Rendering dell'esempio

Nell'esempio precedente l'etichetta `"Fruit Juice Drinks"` occupa lo stesso spazio delle tre celle contenenti le etichette del livello inferiore.

Le etichette a livelli multipli possono essere specificate in HTML utilizzando gli attributi `rowspan` e `colspan`.

L'attributo `colspan` in un tag di intestazione `<th>` o di dati `<td>` della tabella indica al browser di allargare la cella secondo il numero di righe specificato nel valore (numero intero) dell'attributo.

L'attributo `rowspan` dei tag di intestazione della tabella o dei tag di dati della tabella ha sulle righe lo stesso effetto di `colspan` sulle colonne.

Si consideri il prossimo esempio, una versione leggermente modificata della tabella dell'esempio precedente:

Esempio 3: tabella con etichette multiple ---- Rendering dell'esempio

Osservazione: non vi e' un unico modo di fare le cose! il codice riportato di seguito non fa uso dell'attributo `rowspan` ma sortisce lo stesso effetto dell'esempio precedente:

Esempio 4: tabella con etichette multiple ---- Rendering dell'esempio

L'inserimento dei contenuti all'interno delle celle puo' essere specificato con gli attributi `align` e `valingn` nei tag `<tr>`, `<th>` e `<td>`.

I possibili valori dell'attributo `align` sono `left`, `right` e `center` e si riferiscono all'inserimento orizzontale del contenuto nella cella. L'allineamento predefinito per le intestazioni e' `center` mentre per i dati e' `left`. Se l'attributo `align` viene specificato nel tag `<tr>` allora viene applicato a tutte le celle della riga, altrimenti l'attributo viene applicato solo all'interno di una singola cella.

I possibili valori dell'attributo `valign` dei tag `<th>` e `<td>` sono `top` e `bottom`. L'allineamento verticale predefinito per entrambi i dati e le intestazioni e' `center`. L'attributo `valign` si applica ad una cella. Non ha senso specificare l'attributo `valign` all'interno del tag `<tr>` dato che tale valore coincide con il valore di default.

Il prossimo esempio illustra gli attributi `align` e `vlign`:

Esempio 5: tabella con disposizione testo ---- Rendering dell'esempio