Tabelle

Le tabelle HTML mostrano i dati tabulari con righe e colonne. Ti consigliamo di utilizzare un <table> in base ai contenuti che visualizzi e alle esigenze dei tuoi utenti in relazione a questi contenuti. Se i dati vengono presentati, confrontati, ordinati, calcolati o sottoposti a riferimenti incrociati, <table> è probabilmente la scelta giusta. Se ti interessa organizzare contenuti non tabellari, ad esempio un gruppo numeroso di immagini in miniatura, le tabelle non sono adatte. In alternativa, crea un elenco di immagini e applica uno stile alla griglia con CSS.

In questa sezione vengono illustrati tutti gli elementi che compongono la tabella, insieme ad alcune funzionalità di accessibilità e usabilità da considerare quando si presentano dati tabellari. Sebbene Learn HTML non si concentri sul CSS, tratteremo alcune proprietà CSS specifiche per le tabelle. Per saperne di più sui CSS, consulta la pagina Learn CSS.

Elementi della tabella, in ordine

Il tag <table> racchiude il contenuto della tabella, inclusi tutti gli elementi della tabella. Il ruolo ARIA implicito di un <table> è table; le tecnologie assistive sanno che questo elemento è una struttura di tabella contenente dati disposti in righe e colonne. Se la tabella mantiene uno stato di selezione, ha una navigazione bidimensionale o consente all'utente di riorganizzare l'ordine delle celle, imposta role="grid". Se le righe di grid possono essere espanse e compresse, utilizza invece role="treegrid".

All'interno di <table>, troverai le intestazioni della tabella (<thead>), i corpi della tabella (<tbody>) e, facoltativamente, i piè di pagina della tabella (<tfoot>). Ognuno di questi è composto da righe della tabella (<tr>). Le righe contengono celle di intestazione della tabella (<th>) e di dati della tabella (<td>), che a loro volta contengono tutti i dati. Nel DOM, prima di tutto ciò, potresti trovare due funzionalità aggiuntive: la didascalia della tabella (<caption>) e i gruppi di colonne (<colgroup>). A seconda che l'elemento <colgroup> abbia o meno un attributo span, potrebbe contenere elementi di colonna della tabella nidificati (<col>).

I figli della tabella sono, in ordine:

1. Elemento <caption>
2. <colgroup> elementi
3. <thead> elementi
4. <tbody> elementi
5. <tfoot> elementi

Esamineremo gli elementi secondari di <table>, che sono tutti facoltativi ma consigliati, poi daremo un'occhiata a righe, celle di intestazione della tabella e celle di dati della tabella. L'argomento <colgroup> verrà trattato per ultimo.

Didascalia tabella

Il metodo preferito per denominare una tabella è l'elemento semantico, <caption>. <caption> fornisce un titolo di tabella descrittivo e associato in modo programmatico. Per impostazione predefinita, è visibile e disponibile per tutti gli utenti.

L'elemento <caption> deve essere il primo elemento nidificato nell'elemento <table>. Se lo includi, tutti gli utenti conosceranno immediatamente lo scopo della tabella senza dover leggere il testo circostante. In alternativa, puoi utilizzare aria-label o aria-labelledby su <table> per fornire un nome accessibile come didascalia. L'elemento <caption> non ha attributi specifici dell'elemento.

La didascalia viene visualizzata al di fuori della tabella. La posizione della didascalia può essere impostata con la proprietà CSS caption-side, che è una pratica migliore rispetto all'utilizzo dell'attributo align ritirato. In questo modo, la didascalia può essere posizionata in alto e in basso. Il posizionamento laterale sinistro e destro, con inline-start e inline-end, non è ancora completamente supportato. In alto è la presentazione predefinita del browser.

Preferibilmente, le tabelle dati devono avere intestazioni e didascalie chiare ed essere sufficientemente chiare da essere quasi autoesplicative. Tieni presente che non tutti gli utenti hanno le stesse capacità cognitive. Quando la tabella "fa un punto" o ha bisogno di interpretazione, fornisci un breve riepilogo del punto o della funzione principale della tabella. La posizione del riepilogo dipende dalla sua lunghezza e complessità. Se è breve, utilizzalo come testo interno della didascalia. Se è più lungo, riassumilo nella didascalia e fornisci il riepilogo nel paragrafo precedente la tabella, associando i due all'attributo aria-describedby. Un'altra opzione è inserire la tabella in un <figure> e il riepilogo in un <figcaption>.

Sezionamento dei dati

Il contenuto delle tabelle è composto da un massimo di tre sezioni: zero o più intestazioni di tabella (<thead>), corpi di tabella (<tbody>) e piè di pagina della tabella (<tfoot>). Tutte sono facoltative e sono supportate zero o più sezioni di ciascuna.

Questi elementi non aiutano né ostacolano l'accessibilità della tabella, ma sono utili in termini di usabilità. Forniscono hook di stile. Ad esempio, i contenuti dell'intestazione possono essere resi fissi, mentre i contenuti del <tbody> possono essere resi scorrevoli. Le righe non nidificate in uno di questi tre elementi contenitori vengono racchiuse implicitamente in un <tbody>. Tutti e tre condividono lo stesso ruolo implicito rowgroup. Nessuno di questi tre elementi ha attributi specifici dell'elemento.

Cosa abbiamo finora:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

L'elemento <tfoot> era originariamente specificato per essere inserito subito dopo <thead> e prima di <tbody> per motivi di accessibilità, motivo per cui potresti riscontrare questo ordine della sorgente non intuitivo nei codebase legacy.

Contenuti della tabella

Le tabelle possono essere suddivise in intestazioni, corpi e piè di pagina, ma nessuno di questi elementi fa nulla se le tabelle non contengono righe, celle e contenuti. Ogni riga della tabella, <tr>, contiene una o più celle. Se una cella è una cella di intestazione, utilizza <th>. Altrimenti, utilizza <td>.

I fogli di stile user-agent in genere mostrano i contenuti in una cella di intestazione della tabella <th> centrata e in grassetto. Questi stili predefiniti e tutti gli stili vengono controllati meglio con CSS anziché con gli attributi deprecati che erano disponibili per singole celle, righe e persino per <table>.

Esistevano attributi per aggiungere spaziatura interna tra le celle e all'interno delle celle, per i bordi e per l'allineamento del testo. Il riempimento cella e la spaziatura cella, che definiscono lo spazio tra il contenuto di una cella e il relativo bordo e tra i bordi di celle adiacenti, devono essere impostati con le proprietà CSS border-collapse e border-spacing, rispettivamente. Border-spacing non avrà effetto se border-collapse: collapse è impostato. Se è impostato border-collapse: separate; è possibile nascondere completamente le celle vuote con empty-cells: hide;. Per scoprire di più sullo stile delle tabelle, ecco un file di presentazione interattivo sugli stili CSS relativi alle tabelle.

Negli esempi, abbiamo aggiunto un bordo alla tabella e a ogni singola cella con CSS per rendere più evidenti alcune funzionalità:

In questo esempio, abbiamo una didascalia, un'intestazione di tabella e un corpo della tabella. L'intestazione ha una riga contenente tre celle di intestazione <th>, creando così tre colonne. Il corpo contiene tre righe di dati: la prima cella è una cella di intestazione per la riga, quindi utilizziamo <th> anziché <td>.

La cella <th> ha un significato semantico, con ruoli ARIA impliciti di columnheader o rowheader. Definisce la cella come intestazione della colonna o della riga di celle della tabella, a seconda del valore dell'attributo enumerato scope. Se scope non è impostato in modo esplicito, il browser utilizzerà col o row come valore predefinito. Poiché abbiamo utilizzato il markup semantico, la cella 1956 ha due intestazioni: Anno e Lou Minious. Questa associazione ci dice che "1956" è l'anno di laurea di "Lou Minious". In questo esempio, poiché possiamo vedere l'intera tabella, l'associazione è visivamente evidente. L'utilizzo di <th> fornisce l'associazione anche quando la colonna o la riga dell'intestazione non è più visibile. Avremmo potuto impostare esplicitamente <th scope="col">Year</th> e <th scope="row">Lou Minious</th>, ma con una tabella come questa, i valori predefiniti enumerati funzionano. Altri valori per scope includono rowgroup e colgroup, utili con tabelle complesse.

Unisci celle

Come in MS Excel, Fogli Google e Numbers, è possibile unire più celle in una singola cella. Puoi farlo con gli attributi HTML colspan e rowspan:

• colspan unisce due o più celle adiacenti all'interno di una singola riga.
• rowspan unisce le celle tra le righe quando viene aggiunto alla cella nella prima delle righe unite.

In questo esempio, l'intestazione della tabella contiene due righe. La prima riga di intestazione contiene tre celle che si estendono su quattro colonne: la cella centrale contiene colspan="2". Vengono unite due celle adiacenti. La prima e l'ultima cella includono rowspan="2". Unisce la cella con quella nella riga adiacente, immediatamente sotto.

La seconda riga dell'intestazione della tabella contiene due celle, ovvero le celle per la seconda e la terza colonna della seconda riga. Nessuna cella è dichiarata per la prima o l'ultima colonna, poiché la cella nella prima e nell'ultima colonna della prima riga si estende su due righe.

Nei casi in cui una cella è definita da più celle di intestazione con associazioni che non possono essere impostate solo dagli attributi scope, includi l'attributo headers con un elenco separato da spazi delle intestazioni associate. Poiché questo esempio è una tabella più complessa, definiamo esplicitamente l'ambito delle intestazioni con l'attributo scope. Per maggiore chiarezza, abbiamo aggiunto l'attributo headers a ogni cella.

Gli attributi headers potrebbero non essere necessari in questo caso, ma è importante ricordarli man mano che le tabelle diventano più complesse. Le tabelle con strutture complesse, ad esempio quelle in cui le intestazioni o le celle sono unite o con più di due livelli di intestazioni di colonna o riga, richiedono l'identificazione esplicita delle celle di intestazione associate. In tabelle così complesse, associa esplicitamente ogni cella di dati a ogni cella di intestazione corrispondente con un elenco di valori id separati da spazi di tutte le intestazioni associate come valore dell'attributo headers.

L'attributo headers si trova più comunemente sugli elementi <td>, ma è valido anche su <th>.

Detto questo, le strutture di tabelle complesse possono essere difficili da comprendere per tutti gli utenti, non solo per gli utenti di screen reader. A livello cognitivo e in termini di supporto dello screen reader, le tabelle più semplici, con poche o nessuna cella unita, sono più comprensibili anche senza aggiungere ambito e intestazioni. Inoltre, sono più facili da gestire.

Applicare uno stile alle tabelle

Sono stati menzionati brevemente due elementi relativamente oscuri: l'elemento gruppo di colonne, <colgroup>, e il suo unico discendente, l'elemento colonna vuoto <col>. L'elemento <colgroup> viene utilizzato per definire gruppi di colonne o elementi <col> all'interno di una tabella.

Se utilizzato, il raggruppamento delle colonne deve essere nidificato in <table>, immediatamente dopo <caption> e prima di qualsiasi dato della tabella. Se si estendono su più colonne, utilizza l'attributo span.

L'ordine della struttura dei contenuti per una tabella è generalmente il seguente, con <table> e <caption> che sono i due elementi da includere:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> e <col> non hanno un significato semantico, il che influirebbe sull'accessibilità della tabella. Tuttavia, ti aiutano a definire lo stile delle colonne con CSS, ad esempio impostando le larghezze.

Gli stili correlati <td> e <th> sostituiscono gli stili <col>. In CodePen, abbiamo impostato colspan per unire alcune righe della tabella, ma non tutte. Se il selettore CSS nth-child viene applicato a <tr>, a seconda della riga o della colonna unite, lo stile potrebbe essere modificato.

Purtroppo, sono supportate solo alcune proprietà. Gli stili non vengono ereditati nelle celle e l'unico modo per scegliere come target le celle con <col> è utilizzare un selettore complesso, ad esempio il :has() selettore relazionale.

Se sia <table> che <colgroup> hanno un colore di sfondo, il background-color di <colgroup> si trova in primo piano. L'ordine di disegno è: tabella, gruppi di colonne, colonne, gruppi di righe, righe, con le celle per ultime e in primo piano, come mostrato nello schema dei livelli della tabella. Gli elementi <td> e <th> non sono discendenti degli elementi <colgroup> o <col> e non ereditano il loro stile.

Per creare strisce in una tabella, i selettori strutturali CSS sono utili. Ad esempio, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} aggiunge un nero traslucido a ogni riga dispari del corpo della tabella, consentendo di visualizzare gli effetti di sfondo impostati su <colgroup>.

Per impostazione predefinita, le tabelle non sono adattabili. Per impostazione predefinita, le dimensioni vengono determinate in base ai contenuti. Sono necessarie misure aggiuntive per far sì che lo stile del layout della tabella funzioni in modo efficace su una serie di dispositivi. Se modifiche la proprietà CSS display per gli elementi della tabella, includi gli attributi ARIA role. Anche se può sembrare ridondante, la proprietà CSS display può influire sull'albero di accessibilità in alcuni browser.

Presentare i dati

Gli elementi della tabella hanno significati semantici utilizzati dalle tecnologie assistive per aiutare gli utenti a navigare tra righe e colonne senza perdersi. L'elemento <table> non deve essere utilizzato per la presentazione. Se hai bisogno di un'intestazione sopra un elenco, utilizza un'intestazione e un elenco. Se vuoi disporre i contenuti in più colonne, utilizza il layout a più colonne. Se vuoi disporre i contenuti in una griglia, utilizza la griglia CSS.

Utilizza una tabella solo per i dati.

Pensa in questo modo: se i tuoi dati richiedono un foglio di lavoro per essere presentati a una riunione, utilizza <table>. Se vuoi utilizzare le funzionalità disponibili nei software di presentazione, come Presentazioni Google o PowerPoint, probabilmente hai bisogno di un elenco di descrizioni.

In breve: se non presenti dati tabulari, non utilizzare un <table>. Se utilizzi una tabella per la presentazione, imposta role="none".

Molti sviluppatori utilizzano le tabelle per disporre i moduli, ma non è necessario. Devi conoscere i moduli HTML.

Verifica la tua comprensione

Metti alla prova le tue conoscenze sulle tabelle.