Page 31 - Guida tascabile HTML5

tabella già utilizzata come esempio il markup potrebbe essere il seguente:

<tr>
<th>Lunedì</th>
<th>Martedì - Venerdì</th>
<th>Sabato</th>
<th>Domenica</th>
</tr>

NOTA Il tag <th> è di default caratterizzato graficamente dall’utilizzo del grassetto.

Per specificare meglio il valore semantico del contenuto è possibile utilizzare

alcuni attributi con i quali i dati vengono messi in relazione tra loro nel modo

corretto: in particolare con <th scope="col"> si esplicita il fatto che l’intestazione fa
riferimento a una colonna. Altri valori possibili sono row nel caso di una riga, e

colgroup o rowgroup per gruppi di colonne e righe.

In alternativa è possibile attribuire un id univoco a ogni tag <th> e specificare

l’attributo headers in ogni tag <td> associato. Ecco un listato completo che rende

chiara l’associazione delle informazioni.

<table border="1">
<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>
<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>
</table>

Questo markup, senza interferire con la resa grafica della tabella, fornisce un

livello di informazioni utile per navigare tra i dati, per esempio quando
l’interpretazione è affidata a screen reader o ad altri dispositivi.

La struttura delle tabelle

Per ottenere un markup preciso e descrittivo, soprattutto quando la mole di dati

nella tabella diventa importante, è possibile specificare in maniera ancora più