Le tabelle sono componenti importanti in HTML: nate agli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici, per tornare, già nell'epoca dei CSS, ad essere elementi utilissimi per rappresentare informazioni.
Come sempre in questa guida HTML ci rifacciamo allo standard attuale, per cui l'elemento <table> serve alla rappresentazione di dati, anche "in più dimensioni", sotto forma di tabelle.
Tabella HTML di base
Per definire una tabella "minimale", che sia comunque interpretata correttamente dai browser possiamo riprodurre un esempio simile al seguente:
<table>
<tr><td>Colonna 1</td><td>Colonna 2</td></tr>
<tr><td>Dato 1,1</td><td>Dato 1,2</td></tr>
<tr><td>Dato 2,1</td><td>Dato 2,2</td></tr>
<tr><td>Dato 3,1</td><td>Dato 3,2</td></tr>
</table>
Nell'esempio riusciamo a definire una griglia formata da righe e colonne, il risultato è piuttosto povero a livello semantico (non distinguiamo ad esempio il nome di una colonna dai suoi valori), ma ci aiuta a presentare i tag di base:
| Tag | Descrizione |
|---|---|
| <table> | È il contenitore di tutta la tabella e la definisce |
| <tr> | "table row" |
| <td> | "table data" |
Questo tipo di tabella era un elemento predominante nel "vecchio Web" (ed è ancora presente in quello attuale), perché funzionale anche alla suddivisione degli spazi, oltre che alla rappresentazione dei dati. Con il consolidarsi di pratiche più specifiche per il markup dei layout, questo utilizzo delle tabelle è caduto in disuso.
Per ottenere una visualizzazione come quella in figura dobbiamo forzare un po' lo stile della tabella utilizzando le seguenti regole CSS:
<style>
table {
border-collapse:collapse
}
td, th {
border:1px solid #ddd;
padding:8px;
}
</style>Le riportiamo solo per completezza senza commentarle in quanto non aggiungono nulla alla comprensione delle tabelle in questa fase.
Il template di una tabella: caption, thead, tbody, tfoot
Per scrivere una tabella che fornisca una rappresentazione più chiara dei dati introduciamo un template leggermente più ricco:
<table>
<caption>
<p>I miei dati</p>
</caption>
<thead>
<tr><th>Colonna 1</th><th>Colonna 2</th></tr>
</thead>
<tfoot>
<tr><td>Totale 1</td><td>Totale 2</td></tr>
</tfoot>
<tbody>
<tr><td>Dato 1,1</td><td>Dato 1,2</td></tr>
<tr><td>Dato 2,1</td><td>Dato 2,2</td></tr>
<tr><td>Dato 3,1</td><td>Dato 3,2</td></tr>
</tbody>
</table>
I tag introdotti sono tutti definiti come "facoltativi", nel senso che la tabella non si "rompe" se manca uno di essi. Tuttavia si tratta di elementi fondamentali per la semantica delle tabelle. Esaminiamoli:
| Tag | Descrizione |
|---|---|
| <caption> | È una didascalia che ci permette di dare una contestualizzazione ai dati e rendere più chiaro il loro significato. |
| <thead> | Serve per raggruppare le righe che rappresentano l'intestazione della tabella. |
| <th> | "table header" |
| <tbody> | Raggruppa le righe che contengono il corpo della tabella, spesso con i dati veri e propri. |
| <tfoot> | Racchiude le righe che utilizziamo come footer della tabella, in cui si possono inserire dei dati di riepilogo, somme, medie, etc. |
Interessante notare che thead tbody tfoot raggruppamenti di righe tfoot tbody
Alla fine la rappresentazione della tabella rimane quella che ci aspetteremmo:
colgroup e col, raggruppare le colonne
Possiamo raggruppare le celle della tabella anche per colonna grazie al tag <colgroup>, che deve essere inserito tra il caption e ogni possibile raggruppamento per riga (thead, tbody, tfood).
All'interno di colgroup definiamo le colonne che volgiamo includere usando il tag <col>.
Con colgroup i gruppi vengono creati prendendo le colonne da sinistra verso destra. Il numero di colonne da considerare lo indichiamo grazie all'attributo span.
<table>
<colgroup id="a" span="3"></colgroup>
<thead>
<tr><th>head</th><th>head</th><th>head</th><th>head</th><th>head</th><th>head</th></tr>
</thead>
<tbody>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</tbody>
</table>
col
Possiamo anche sfruttare il tag <col> per definire singole colonne o sottogruppi all'interno di un gruppo:
<table>
<colgroup id="a" span="3"></colgroup>
<colgroup id="a">
<col id="b1">
<col id="b2" span="2">
</colgroup>
<thead>
<tr><th>head</th><th>head</th><th>head</th><th>head</th><th>head</th><th>head</th></tr>
</thead>
<tbody>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</tbody>
</table>I sottogruppi si creano utilizzando l'attributo span all'interno di col.
th, l'attributo scope
Il tag <th> indica il significato dei dati all'interno delle celle, ma quali? Possiamo sfruttare questo tag sia per le colonne sia per le righe impostando l'attributo scope che prevede 5 valori (stati):
| Valori di scope per th | Descrizione |
|---|---|
| scope="row" | L'header si riferisce ai valori sulla stessa riga |
| scope="col" | L'header si riferisce ai valori sulla stessa colonna |
| scope="rowgroup" | L'header si riferisce a tutte le celle incluse nello stesso gruppo di righe del th th |
| scope="colgroup" | L'header si riferisce a tutte le celle incluse nello stesso gruppo di colonne del th th |
| scope="auto" | se diamo come scope "auto" o se omettiamo lo scope, l'insieme di celle cui si applica il contenuto di th viene selezionato dal contesto. |
I tag thead tbody tfoot
Annidare tabelle inHTML
Chiudiamo mostrando come è possibile annidare le tabelle le une dentro le altre e lo facciamo esaminando un semplice esempio:
<table>
<thead>
<tr><th>Campo</th><th>Tabella</th></tr>
</thead>
<tbody>
<tr>
<td>Campo1</td>
<td>
<table>
<thead><tr><th>Campo</th><th>Descrizione</th></tr></thead>
<tbody><tr><td>Campo1</td><td>Descrizione1</td></tr></tbody>
</table>
</td>
</tr>
</tbody>
</table>
Tabelle e layout, storia passata
Come abbiamo detto, l'ampio utilizzo che delle tabelle è stato fatto per la formattazione dei documenti ha fatto sì che - nel passaggio dall'HTML 3.2 all'HTML 4 - le specifiche delle tabelle fossero estese con una serie di notazioni destinate a "far ordine" all'interno di un codice che rischiava di diventare troppo vasto.
Leggi ora la Guida CSS, progetta layout moderni e scegli lo stile migliore per le tabelle.