Page 32 - Guida tascabile HTML5

precisa il ruolo degli elementi della tabella utilizzando tag aggiuntivi che

identificano meglio la funzione di determinate righe.
Un esempio è il tag <caption>, da inserire subito dopo il tag di apertura <table>,

che permette di associare alla tabella una didascalia.

TERMINOLOGIA Il tag <caption> fornisce un ottimo pretesto per sottolineare ancora

una volta il concetto di markup semantico: utilizzare questo tag specifico, strettamente
associato alla tabella tanto da essere nidificato all’interno del tag <table> stesso, ha
molto più valore rispetto all’utilizzo di un normale paragrafo con attributo class specifico
(per esempio <p class="didascalia">), anche se l’effetto grafico finale potrebbe essere

analogo.
Altrettanto utili i tag <thead>, <tfoot> e <tbody>, da utilizzare in quest’ordine dopo

l’eventuale tag <caption>, e che suddividono la tabella in tre blocchi:

un’intestazione (table header), un piè di pagina (table footer) e un corpo vero e

proprio (table body). Questa struttura, illustrata nel prossimo esempio, permette al
browser di trattare in modo diverso le varie parti della tabella anche dal punto di

vista grafico, per esempio ripetendo intestazione e piè di pagina su ogni foglio in
un’eventuale stampa del documento. Ecco di seguito la struttura definitiva della

tabella, articolata e ricca di dettagli significativi.

<table border="1">
<caption>Orari di apertura</caption>
<thead>
<tr>
<th scope="col" id="Lun">Lunedì</th>
<th scope="col" id="MarVen">Martedì - Venerdì</th>
<th scope="col" id="Sab">Sabato</th>
<th scope="col" id="Dom">Domenica</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Torno subito</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="Lun">15:00</td>
<td headers="MarVen">10:00</td>
<td headers="Sab">10:00</td>
<td headers="Dom" rowspan="2">CHIUSO</td>
</tr>
<tr>
<td headers="Lun">19:00</td>
<td headers="MarVen">19:00</td>
<td headers="Sab">20:00</td>
</tr>
</tbody>
</table>