Tabelle HTML con celle unite: usare <code>rowspan</code> e <code>colspan</code> in modo corretto

Introduzione

Le tabelle HTML sono progettate per rappresentare dati organizzati in righe e colonne. In alcuni casi, però, una singola informazione deve estendersi su più colonne o più righe. Per esempio, un report mensile può raggruppare diverse colonne sotto la stessa categoria, oppure una voce di reparto può descrivere più righe consecutive.

Per questi scenari HTML mette a disposizione gli attributi colspan e rowspan. colspan indica quante colonne deve occupare una cella, mentre rowspan indica quante righe deve attraversare. Sono strumenti potenti, ma devono essere usati con attenzione: un uso eccessivo può rendere la tabella difficile da leggere, mantenere e interpretare.

In questo tutorial costruiremo una tabella riepilogativa delle vendite trimestrali. Vedremo come creare intestazioni su più livelli, come allineare correttamente le celle e quali pratiche adottare per evitare strutture ambigue.

Codice completo

<table>
  <caption>Vendite annuali suddivise per reparto e trimestre</caption>

  <thead>
    <tr>
      <th rowspan="2" scope="col">Reparto</th>
      <th colspan="4" scope="colgroup">Vendite trimestrali</th>
      <th rowspan="2" scope="col">Totale annuo</th>
    </tr>
    <tr>
      <th scope="col">1° trimestre</th>
      <th scope="col">2° trimestre</th>
      <th scope="col">3° trimestre</th>
      <th scope="col">4° trimestre</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th rowspan="2" scope="rowgroup">Elettronica</th>
      <td>18.500 €</td>
      <td>21.300 €</td>
      <td>19.800 €</td>
      <td>24.100 €</td>
      <td>83.700 €</td>
    </tr>
    <tr>
      <td>14.200 €</td>
      <td>16.900 €</td>
      <td>17.400 €</td>
      <td>20.600 €</td>
      <td>69.100 €</td>
    </tr>
    <tr>
      <th scope="row">Casa</th>
      <td>11.800 €</td>
      <td>13.500 €</td>
      <td>12.900 €</td>
      <td>15.700 €</td>
      <td>53.900 €</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th colspan="5" scope="row">Totale complessivo</th>
      <td>206.700 €</td>
    </tr>
  </tfoot>
</table>

Spiegazione

Come funziona colspan

Nella prima riga dell’intestazione, la cella “Vendite trimestrali” utilizza colspan="4". Questo significa che occupa lo spazio di quattro colonne: una per ciascun trimestre.

<th colspan="4" scope="colgroup">Vendite trimestrali</th>

La riga successiva contiene infatti quattro intestazioni separate: primo, secondo, terzo e quarto trimestre. Il valore di colspan deve corrispondere esattamente al numero di colonne sottostanti. Se il valore è errato, la struttura risulta disallineata e la tabella può essere interpretata in modo ambiguo.

Nel piè di pagina, invece, colspan="5" unisce la colonna del reparto e le quattro colonne dei trimestri. La cella “Totale complessivo” occupa quindi tutto lo spazio precedente alla colonna finale del totale annuo.

Come funziona rowspan

L’attributo rowspan estende una cella su più righe. Nell’esempio, l’intestazione “Reparto” attraversa le due righe dell’intestazione:

<th rowspan="2" scope="col">Reparto</th>

La stessa tecnica viene utilizzata per il reparto “Elettronica”, che raggruppa due righe di dati. Poiché la cella occupa già entrambe le righe, nella seconda riga non bisogna inserire una nuova cella per il reparto. Aggiungerla altererebbe il numero di colonne e romperebbe l’allineamento.

Perché usare th per i raggruppamenti

Le celle che identificano una categoria o un gruppo di dati dovrebbero essere create con th, non con td. Anche quando una cella contiene un nome di reparto e non una semplice intestazione visuale, rappresenta un riferimento per le celle della stessa riga o dello stesso gruppo.

L’attributo scope chiarisce il ruolo dell’intestazione. scope="col" indica un’intestazione di colonna, scope="row" un’intestazione di riga, mentre scope="colgroup" e scope="rowgroup" identificano gruppi più ampi.

Best practice

• Conta sempre le colonne: ogni riga deve avere lo stesso numero logico di colonne, considerando i valori di colspan e rowspan.
• Usa le celle unite solo quando rappresentano una relazione reale: non utilizzare colspan o rowspan per ottenere semplicemente un effetto grafico.
• Preferisci intestazioni su più livelli per gruppi complessi: una categoria generale seguita da intestazioni specifiche è più comprensibile di una singola intestazione molto lunga.
• Non lasciare celle vuote senza motivo: una cella vuota può essere corretta, ma spesso indica un errore nel conteggio delle colonne.
• Utilizza scope in modo coerente: specifica se l’intestazione descrive una colonna, una riga o un gruppo.
• Controlla la tabella con dati reali: valori con lunghezze diverse possono rivelare rapidamente errori di struttura.
• Evita tabelle eccessivamente complesse: se servono molti livelli di celle unite, valuta se suddividere i dati in più tabelle più semplici.
• Non usare tabelle per il layout: rowspan e colspan servono a rappresentare relazioni tra dati, non a disporre elementi nella pagina.

È inoltre consigliabile validare il markup con strumenti automatici e verificare la navigazione tramite tecnologie assistive. Una tabella visivamente corretta non è necessariamente strutturalmente corretta.

Riepilogo

colspan permette a una cella di estendersi su più colonne, mentre rowspan la estende su più righe. Questi attributi sono particolarmente utili per costruire intestazioni gerarchiche, raggruppare categorie e creare righe riepilogative.

Il punto fondamentale è mantenere una corrispondenza precisa tra le celle. Ogni riga deve rispettare la griglia logica della tabella e ogni intestazione deve descrivere chiaramente i dati associati. L’uso combinato di th, scope, thead, tbody e tfoot produce una struttura più leggibile sia per le persone sia per gli strumenti automatici.

Approfondisci con risorse ufficiali

• MDN Web Docs: consulta la documentazione degli elementi table, th, td, rowspan e colspan.
• Specifiche HTML WHATWG: approfondisci il modello di struttura delle tabelle e le regole per intestazioni e celle.
• W3C WAI: studia le tecniche per rendere comprensibili le tabelle con intestazioni semplici o raggruppate.
• Validator HTML del W3C: verifica che il markup sia valido e che la struttura delle righe non contenga errori.