Introduzione
Le tabelle HTML sono uno strumento affidabile per rappresentare dati tabellari: prezzi, risultati, confronti, statistiche e informazioni organizzate in righe e colonne. A differenza di molte soluzioni costruite interamente con CSS o JavaScript, gli elementi <table>, <thead>, <tbody> e <th> sono supportati da tutti i browser moderni e anche da tecnologie assistive.
Il problema nasce quando una tabella contiene molte colonne. Su uno schermo piccolo, come quello di uno smartphone, il contenuto può superare la larghezza della pagina e causare uno scorrimento orizzontale indesiderato. Una soluzione robusta consiste nel partire da una tabella HTML semantica, funzionante anche senza CSS e JavaScript, e aggiungere progressivamente miglioramenti visivi.
Questo approccio è chiamato progressive enhancement: prima si garantisce una base accessibile e compatibile, poi si aggiungono funzionalità avanzate. In questo esempio useremo un contenitore con scorrimento orizzontale, una didascalia descrittiva e un comportamento JavaScript opzionale per migliorare l’esperienza su dispositivi mobili.
Codice completo
<section aria-labelledby="titolo-prezzi">
<h2 id="titolo-prezzi">Confronto dei piani</h2>
<p id="descrizione-prezzi">
Confronta caratteristiche e costi dei diversi piani disponibili.
</p>
<div class="tabella-scroll" tabindex="0"
role="region"
aria-labelledby="titolo-prezzi"
aria-describedby="descrizione-prezzi">
<table>
<caption>Confronto tra i piani Base, Pro e Aziendale</caption>
<thead>
<tr>
<th scope="col">Caratteristica</th>
<th scope="col">Base</th>
<th scope="col">Pro</th>
<th scope="col">Aziendale</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Utenti inclusi</th>
<td>1</td>
<td>10</td>
<td>Illimitati</td>
</tr>
<tr>
<th scope="row">Spazio disponibile</th>
<td>5 GB</td>
<td>100 GB</td>
<td>1 TB</td>
</tr>
<tr>
<th scope="row">Supporto prioritario</th>
<td>No</td>
<td>Sì</td>
<td>Sì</td>
</tr>
<tr>
<th scope="row">Prezzo mensile</th>
<td>9 €</td>
<td>29 €</td>
<td>Contattaci</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Miglioramento opzionale: lo script non è necessario per leggere i dati. -->
<script>
const contenitori = document.querySelectorAll(´.tabella-scroll´);
contenitori.forEach((contenitore) => {
contenitore.addEventListener(´keydown´, (evento) => {
if (evento.key === ´ArrowRight´) {
contenitore.scrollLeft += 120;
}
if (evento.key === ´ArrowLeft´) {
contenitore.scrollLeft -= 120;
}
});
});
</script>Spiegazione
La base semantica
L’elemento <table> comunica al browser e agli screen reader che i dati sono organizzati in forma tabellare. <caption> fornisce un titolo alla tabella, mentre <thead> e <tbody> separano intestazioni e contenuto.
Le celle di intestazione devono essere create con <th>, non con semplici celle <td>. L’attributo scope="col" indica un’intestazione di colonna; scope="row" indica invece un’intestazione di riga. Questa distinzione aiuta le tecnologie assistive a collegare correttamente ogni valore alla propria descrizione.
Scorrimento senza dipendenze
Il contenitore .tabella-scroll è predisposto per ricevere una regola CSS come overflow-x: auto. Se il CSS non viene caricato, la tabella rimane comunque leggibile: il browser mostrerà il contenuto secondo il comportamento standard della pagina.
L’attributo tabindex="0" consente di raggiungere il contenitore tramite tastiera. Gli attributi role="region", aria-labelledby e aria-describedby forniscono un contesto comprensibile, soprattutto quando la tabella è molto larga o fa parte di una pagina complessa.
JavaScript come miglioramento, non come requisito
Lo script aggiunge lo scorrimento tramite i tasti freccia, ma non sostituisce la funzionalità principale. Se JavaScript è disabilitato, non supportato o bloccato da una politica di sicurezza, i dati restano disponibili. Questo è un esempio concreto di progressive enhancement: la funzionalità essenziale appartiene all’HTML, mentre JavaScript migliora l’interazione.
Best practice
- Usa una tabella solo per dati tabellari. Non utilizzare
<table>per costruire il layout generale della pagina. - Inserisci sempre una didascalia.
<caption>aiuta utenti e tecnologie assistive a capire lo scopo della tabella. - Definisci le intestazioni. Utilizza
<th>e specificascopequando la struttura lo richiede. - Evita di nascondere dati importanti sui dispositivi mobili. La riduzione delle colonne può migliorare l’aspetto, ma rischia di rendere invisibili informazioni necessarie.
- Preferisci lo scorrimento orizzontale a trasformazioni fragili. Convertire automaticamente ogni riga in una scheda può rendere più difficile confrontare le colonne.
- Testa più browser e dispositivi. Verifica Chrome, Firefox, Safari ed Edge, sia con mouse sia con tastiera.
- Prova anche senza CSS e JavaScript. Se i dati fondamentali rimangono leggibili, la struttura di base è solida.
- Controlla il contrasto e il focus. Gli utenti da tastiera devono capire quale elemento è attivo.
Riepilogo
Una tabella compatibile tra browser nasce da HTML semantico, non da una tecnica CSS complessa. La struttura con <caption>, intestazioni corrette e sezioni logiche funziona anche in ambienti meno recenti. Il contenitore con scorrimento permette di gestire tabelle larghe senza compromettere il contenuto, mentre ARIA e JavaScript possono aggiungere contesto e comodità.
La regola principale è semplice: costruisci prima una versione completa e utilizzabile, poi aggiungi miglioramenti mirati. In questo modo browser diversi, connessioni lente, utenti da tastiera e tecnologie assistive ricevono comunque un’esperienza funzionale.