Corso HTML – Lo schema delle tabelle

Con l’HTML 4 è stato definito e formalizzato lo schema delle tabelle, introducendo molte modifiche rispetto alle versioni precedenti e arrivando ad una sintesi definitiva. Lo schema di una tabella nel codice HTML si può quindi riassumere con la seguente immagine:

Ogni singolo elemento della tabella corrisponde a uno specifico tag: titolo <caption>, intestazione <thead>, corpo <tbody>, piede <tfoot>.
E’ bene sottolineare come queste quattro parti di una tabella HTML servono a definire lo schema concettuale di questo importante strumento che, lo ricordiamo, serve principalmente per rappresentare dati aggregati, ma non sono obbligatorie. Quindi nella definizione di una tabella si possono omettere le parti non presenti (spesso il titolo e il piede).
Inoltre si potrebbero omettere anche i tag che definiscono le singole parti della tabella senza che questo causi alcune problema (ad esempio si potrebbe non specificare il tag <tbody> per raggruppare le righe del corpo), però dal mio punto di vista per una maggiore correttezza formale della pagina HTML sarebbe bene non farlo.

Ecco di seguito un esempio completo per meglio comprendere quanto detto finora:

<table width="75%" border="1" bordercolor="#666666">
<caption><div align="center"><b>ACME s.r.l.</b><br>Fatturato 1° semestre 2009</div></caption>
<thead>
<tr>
<th width="20%">Mesi</th>
<th width="40%">Vendita al dettaglio</th>
<th width="40%">Vendita all'ingrosso</th>
</tr>
</thead>
<tbody>
<tr><td>gennaio</td><td>3.000</td><td>9.000</td></tr>
<tr><td>febbraio</td><td>2.000</td><td>8.600</td></tr>
<tr><td>marzo</td><td>2.500</td><td>7.500</td></tr>
<tr><td>aprile</td><td>1.900</td><td>7.950</td></tr>
<tr><td>maggio</td><td>2.200</td><td>8.200</td></tr>
<tr><td>giugno</td><td>3.200</td><td>9.500</td></tr>
</tbody>
<tfoot>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td><b>Totale</b></td>
<td>14.800</td>
<td>50.750</td>
</tr>
</tfoot>
</table>

che viene visualizzato così:

N.B. Il testo inserito all’interno di un <th> (l’equivalente del <td> per le righe presenti nell’intestazione <thead>) viene visualizzato centrato all’interno della cella e in grassetto.

N.B. Alcuni browser non visualizzano il bordo -se presente con l’attributo border della table- delle celle che non hanno alcun contenuto. In questo caso l’inconveniente si risolve inserendo uno spazio vuoto con il carattere speciale &nbsp;. Si utilizza questo carattere e non il normale spazio (quindi il codice <td>&nbsp;</td> anziché <td> </td>) perchè alcuni browser ignorano lo spazio inserito tramite la barra della tastiera.