Tabelle

L'orario di un autobus è una tabella: ogni cella ha senso solo insieme all'intestazione della sua riga e a quella della sua colonna.

Le tabelle servono per i dati

Usa una tabella quando le informazioni hanno righe e colonne: un orario, un listino prezzi, i risultati di un sondaggio. Alla fine degli anni 1990 molti siti usavano le tabelle per costruire l'impaginazione di intere pagine, con i menu in una cella e il contenuto in un'altra. Questo crea problemi reali. Gli screen reader annunciano ogni cella con la sua riga e la sua colonna, quindi una tabella di impaginazione suona come un foglio di calcolo confuso, e le impaginazioni a tabella non si adattano bene agli schermi piccoli. Oggi l'impaginazione si fa con il CSS, e le tabelle restano per i dati.

Righe, celle e intestazioni

Una tabella si costruisce riga per riga. <table> avvolge tutto, ogni <tr> (table row) è una riga, e dentro una riga ogni <td> (table data) è una cella. Le celle che etichettano una riga o una colonna usano invece <th> (table header), che i browser mostrano in grassetto e centrato per impostazione predefinita. Il numero di celle di ogni riga dovrebbe essere lo stesso, così le colonne restano allineate.

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

Fai in modo che la tabella si spieghi da sola

Tre aggiunte trasformano una griglia di celle in una tabella che tutti possono leggere. Primo, <caption>, messo subito dopo il tag di apertura <table>, dà un titolo alla tabella; gli screen reader lo annunciano prima del contenuto, così chi ascolta sa di che cosa parla la tabella. Secondo, l'attributo scope su ogni <th> dice se etichetta una colonna (scope="col") o una riga (scope="row"). Con esso, uno screen reader può leggere Rye, Price, 5.00 invece di un semplice 5.00. Terzo, <thead>, <tbody> e <tfoot> raggruppano le righe di intestazione, le righe del corpo e le eventuali righe dei totali. Rendono chiara la struttura, aiutano il CSS a dare stile a ogni parte e permettono ai browser di ripetere l'intestazione su ogni pagina stampata di una tabella lunga.

Celle che si estendono

Una cella può estendersi su più colonne con colspan o su più righe con rowspan. In un orario settimanale, una pausa pranzo che copre tutti e cinque i giorni feriali può essere un'unica cella con colspan="5". Quando una cella si estende, la riga in cui si trova ha bisogno di meno celle: se una riga ha normalmente 6 celle e una di esse ha colspan="5", quella riga contiene solo 2 celle nell'HTML. Usa le estensioni quando rispecchiano i dati; le tabelle molto complesse sono difficili da leggere per tutti, quindi spesso è meglio dividere una tabella grande in due più semplici.

Le tabelle larghe possono essere un problema sui telefoni. Una tabella non può andare a capo come il testo, quindi una tabella con molte colonne può essere più larga dello schermo. Una soluzione comune è racchiudere la tabella in un elemento che scorre lateralmente da solo, con il CSS, così il resto della pagina non si allarga.

Tieni i dati di ogni cella il più semplici possibile: un valore per cella, le unità di misura nell'intestazione (Prezzo in euro) invece di ripeterle in ogni cella, e nessuna cella vuota usata come distanziatore. Una tabella costruita così è più facile da leggere ad alta voce, da ordinare e da incollare in un foglio di calcolo.