Nel linguaggio dell’informatica e della gestione dei dati, una tabella è una struttura organizzata di informazioni disposte in righe e colonne. Ogni incrocio tra una riga e una colonna forma una cella, che contiene un valore, un’etichetta o un riferimento. Questa forma di rappresentazione è antichissima: precede di molto l’informatica e affonda le radici nei registri contabili, nelle tavole astronomiche e nelle matrici matematiche. La tabella è oggi uno degli strumenti più diffusi per presentare dati in modo leggibile e confrontabile, sia su carta sia su schermo.
Nel contesto del posizionamento sui motori di ricerca, la parola tabella assume due significati distinti e spesso confusi. Da un lato indica l’elemento HTML impiegato per marcare dati tabellari all’interno di una pagina web. Dall’altro indica la struttura con cui un database relazionale conserva i record, e quindi la fonte da cui un sito dinamico estrae i contenuti che poi vengono pubblicati. Comprendere entrambi i livelli è utile a chi lavora su un progetto web, perché dalla corretta gestione delle tabelle dipendono accessibilità, indicizzazione e qualità complessiva delle pagine.
Che cos’è una tabella in HTML
In HTML la tabella si costruisce con l’elemento table, all’interno del quale si collocano le righe contrassegnate dal tag tr. Le intestazioni di colonna o di riga usano il tag th, mentre le celle di dati usano il tag td. Per separare la parte di intestazione dal corpo dei dati si ricorre a thead e tbody, e per la chiusura a tfoot. Questa struttura permette ai browser di rendere la griglia e ai programmi di lettura schermo di annunciare correttamente il rapporto tra ogni cella e la sua intestazione.
L’uso di tabelle per impaginare intere pagine è stato comune negli anni Novanta e nei primi anni Duemila, prima della diffusione dei fogli di stile. Oggi questa pratica è considerata superata, perché ostacola l’accessibilità e rende il codice difficile da mantenere. Le tabelle dovrebbero essere riservate ai dati che hanno davvero una relazione bidimensionale tra righe e colonne.
Tabella HTML e tabella di database: due mondi diversi
La tabella di un database relazionale è un oggetto logico composto da colonne, ciascuna con un tipo di dato definito, e da righe chiamate record. Ogni colonna ha un nome univoco all’interno della tabella e può essere soggetta a vincoli, come l’obbligo di valore non nullo o l’unicità. Le tabelle possono essere collegate tra loro tramite chiavi primarie e chiavi esterne, dando origine a relazioni che permettono di combinare i dati con operazioni di join.
La tabella HTML, invece, è una rappresentazione visiva e semantica pensata per il lettore umano. Non contiene vincoli di integrità né tipi di dato, ma solo marcature che descrivono la posizione delle celle. Chi progetta un sito dinamico lavora quindi su entrambi i livelli: estrae i record da una tabella di database e li dispone in una tabella HTML, spesso generata automaticamente da un linguaggio di programmazione lato server.
Quando usare una tabella e quando evitarla
La regola generale è semplice: se i dati hanno senso solo se letti insieme, incrociando righe e colonne, allora la tabella è lo strumento corretto. Esempi tipici sono i confronti tra prodotti, i calendari, i prospetti di prezzi e le statistiche. Se invece si tratta di un semplice elenco, di una sequenza di passaggi o di un blocco di testo, sono preferibili le liste ordinate e non ordinate o i normali paragrafi.
Accessibilità e tabelle
Per rendere una tabella accessibile occorre indicare con chiarezza le intestazioni, usare l’attributo scope sui tag th per specificare se l’intestazione vale per una riga o per una colonna e, quando la tabella è complessa, fornire una descrizione testuale. Anche una didascalia introduttiva aiuta il lettore a capire di che cosa si sta parlando prima di affrontare la griglia.
Tabelle e indicizzazione sui motori di ricerca
I motori di ricerca sono in grado di leggere il contenuto delle tabelle HTML e di associarlo alla pagina che le contiene. Una tabella ben strutturata, con intestazioni esplicite e dati pertinenti, può comparire nei risultati arricchiti e rispondere direttamente a domande di confronto. Al contrario, una tabella usata per impaginare contenuti non tabellari disperde il significato del testo e non offre alcun vantaggio.
Tabelle e prestazioni delle pagine
Tabelle molto grandi o annidate possono rallentare il rendering, perché il browser deve calcolare le dimensioni delle celle prima di disegnare la griglia. Sui dispositivi mobili le tabelle larghe richiedono scorrimento orizzontale o un ripensamento del layout, per esempio trasformando le righe in schede verticali. Questi accorgimenti migliorano l’esperienza d’uso e riducono la probabilità che l’utente abbandoni la pagina.
Confronto tra tabella HTML e tabella di database
| Aspetto | Tabella HTML | Tabella di database |
|---|---|---|
| Scopo | Presentare dati a un lettore umano | Memorizzare dati in modo strutturato |
| Unità di base | Cella, delimitata da righe e colonne | Record, composto da campi tipizzati |
| Vincoli | Nessun vincolo di integrità | Chiavi, tipi di dato, valori obbligatori |
| Modifica | Avviene nel codice della pagina | Avviene tramite interrogazioni e transazioni |
| Relazioni | Solo visive, tramite affiancamento | Logiche, tramite chiavi esterne |
Buone pratiche nella gestione delle tabelle
- Definire con precisione lo scopo della tabella prima di scrivere il codice.
- Usare thead, tbody e tfoot per separare le parti logiche della griglia.
- Indicare le intestazioni con th e specificarne la portata con l’attributo scope.
- Evitare di annidare tabelle dentro altre tabelle quando non è indispensabile.
- Non impiegare la tabella per impaginare contenuti che non sono dati.
- Prevedere un layout adattivo per la visualizzazione su schermi piccoli.
- Normalizzare le tabelle di database per ridurre ridondanze e anomalie.
- Documentare la struttura delle tabelle, sia nel codice sia nello schema dei dati.
Domande frequenti sulle tabelle
Che differenza c’è tra tabella e foglio di calcolo?
Una tabella è una struttura statica di righe e colonne pensata per presentare o memorizzare dati. Un foglio di calcolo è un programma che contiene molte tabelle e consente di applicare formule, filtri e calcoli sui valori inseriti.
Posso usare una tabella per impaginare una pagina web?
Tecnicamente è possibile, ma la pratica è sconsigliata. I fogli di stile offrono strumenti più flessibili e accessibili per il layout, mentre le tabelle dovrebbero restare riservate ai dati tabellari.
Una tabella HTML aiuta il posizionamento sui motori di ricerca?
Può aiutare se contiene dati pertinenti e ben strutturati, perché facilita la comprensione del contenuto. Non produce invece alcun beneficio quando viene usata solo come espediente grafico.
Che cosa sono le chiavi primarie e le chiavi esterne?
La chiave primaria identifica in modo univoco ogni record di una tabella. La chiave esterna è un campo che rimanda alla chiave primaria di un’altra tabella, realizzando il collegamento tra le due.
Le tabelle di database possono contenere dati non testuali?
Sì, purché il tipo di dato della colonna lo consenta. Oltre a numeri e testo, molte basi di dati supportano date, valori booleani e riferimenti a file esterni.
Perché le tabelle larghe creano problemi sui dispositivi mobili?
Perché lo schermo ridotto non permette di mostrare tutte le colonne contemporaneamente. Occorre quindi prevedere scorrimento orizzontale controllato o una riorganizzazione dei dati in forma verticale.