Tabelle

Le tabelle HTML vengono utilizzate per visualizzare i dati tabulari con righe e colonne. La decisione di utilizzare un <table> deve basarsi sui contenuti che presenti e sulle esigenze dei tuoi utenti in relazione a questi contenuti. Se i dati vengono presentati, confrontati, ordinati, calcolati o incrociati, <table> è probabilmente la scelta giusta. Se vuoi semplicemente disporre in modo ordinato contenuti non tabulari, come un grande gruppo di miniature, le tabelle non sono appropriate: crea un elenco di immagini e imposta lo stile della griglia con CSS.

In questa sezione parleremo di tutti gli elementi che compongono la tabella, nonché di alcune funzionalità di accessibilità e usabilità che dovresti prendere in considerazione quando presenti i dati tabulari. Anche se Impara HTML non riguarda principalmente il CSS e esiste un intero corso dedicato all'apprendimento del CSS, illustreremo alcune proprietà CSS specifiche per le tabelle.

Elementi della tabella, in ordine

Il tag <table> inserisce un a capo nei contenuti della tabella, inclusi tutti gli elementi della tabella. Il ruolo ARIA implicito di un <table> è table; le tecnologie per la disabilità 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 role="treegrid".

All'interno di <table> troverai le intestazioni (<thead>), i testi (<tbody>) e, facoltativamente, i piè di pagina (<tfoot>) della tabella. Ognuno di questi è composto da righe (<tr>) che contengono celle di intestazione (<th>) e dati (<td>) della tabella 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 <colgroup> abbia o meno un attributo span, può contenere elementi di colonna della tabella (<col>) nidificati.

Le tabelle figlio sono, in ordine:

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

Tratteremo gli elementi secondari di <table>, che sono tutti facoltativi, ma consigliati, quindi daremo un'occhiata alle righe, alle celle delle intestazioni di tabella e alle celle dei dati della tabella. <colgroup> verrà coperto per ultimo.

Didascalia tabella

Essendo un elemento semantico nativo, <caption> è il metodo preferito per assegnare un nome a una tabella. <caption> fornisce un titolo descrittivo associato tramite programmazione alla tabella. È visibile e disponibile per tutti gli utenti per impostazione predefinita.

L'elemento <caption> deve essere il primo elemento nidificato nell'elemento <table>. Se la includi, tutti gli utenti possono conoscere 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.

La didascalia viene visualizzata all'esterno 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 deprecato. In questo modo, la didascalia può essere impostata in alto e in basso. Il posizionamento sul lato sinistro e destro, con inline-start e inline-end, non è ancora completamente supportato. La visualizzazione superiore è la presentazione predefinita del browser.

È preferibile che le tabelle di dati abbiano intestazioni chiare e una didascalia ed essere abbastanza semplici da essere quasi autoesplicative. Tieni presente che non tutti gli utenti hanno le stesse capacità cognitive. Quando la tabella "vuole dimostrare qualcosa" o richiede un'interpretazione, fornisci un breve riepilogo del punto principale o della funzione della tabella. La posizione del riepilogo dipende dalla sua lunghezza e complessità. Se è breve, utilizzalo come testo interno della didascalia. Se è più lunga, riassumila nella didascalia e fornisci il riepilogo nel paragrafo che precede la tabella, associando i due elementi all'attributo aria-describedby. Un'altra opzione è inserire la tabella in un <figure> e il riepilogo in <figcaption>.

Sezionamento dei dati

I contenuti delle tabelle sono costituiti da un massimo di tre sezioni: zero o più intestazioni di tabelle (<thead>), corpo di tabelle (<tbody>) e piè di pagina di tabelle (<tfoot>). Sono tutti facoltativi e sono supportati zero o più di ciascuno.

Questi elementi non favoriscono né ostacolano l'accessibilità della tabella, ma sono utili in termini di usabilità. Forniscono hook per lo stile. Ad esempio, i contenuti dell'intestazione possono essere bloccati, mentre i contenuti di <tbody> possono essere visualizzati tramite scorrimento. Le righe non nidificate in uno di questi tre elementi contenitore sono implicitamente inserite in un <tbody>. Tutti e tre condividono lo stesso ruolo implicito rowgroup. Nessuno di questi tre elementi ha attributi specifici.

Ecco cosa abbiamo finora:

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

L'elemento <tfoot> è stato originariamente specificato per essere visualizzato subito dopo <thead> e prima di <tbody> per motivi di accessibilità, per questo motivo potresti riscontrare questo ordine delle origini non intuitivo nei codebase precedenti.

Contenuti della tabella

Le tabelle possono essere suddivise in intestazioni, corpo e piè di pagina, ma nessuna di queste ha un'utilità 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>. In caso contrario, utilizza <td>.

In genere, i fogli di stile degli user agent mostrano i contenuti in una cella dell'intestazione della tabella <th> in grassetto e centrati. Questi stili predefiniti, e tutti gli stili, sono controllati meglio con CSS anziché con gli attributi deprecati che erano disponibili per le singole celle, le righe e persino il <table>.

Erano disponibili attributi per aggiungere spaziatura tra le celle e all'interno delle celle, per i bordi e per l'allineamento del testo. Cellpadding e cellspacing, che definiscono lo spazio tra i contenuti di una cella e il relativo bordo e tra i bordi delle celle adiacenti, devono essere impostati con le proprietà CSS border-collapse e border-spacing rispettivamente. Border-spacing non avrà alcun effetto se è impostato border-collapse: collapse. Se è impostato border-collapse: separate;, è possibile nascondere completamente le celle vuote con empty-cells: hide;. Per scoprire di più su come applicare stili alle tabelle, ecco una presentazione interattiva di 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 di tabella. L'intestazione ha una riga contenente tre celle di intestazione <th>, in modo da creare 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 delle celle della tabella, a seconda del valore dell'attributo enumerato scope. Se scope non è impostato esplicitamente, il browser utilizzerà col o row. 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 è visibile. Avremmo potuto impostare esplicitamente <th scope="col">Year</th> e <th scope="row">Lou Minious</th>, ma con una tabella semplice come questa, i valori predefiniti enumerati funzionano. Altri valori per scope includono rowgroup e colgroup, che sono utili con tabelle complesse.

Unisci celle

Come in MS Excel, Fogli Google e Numbers, è possibile unire più celle in una singola cella. Questo viene fatto con HTML. L'attributo colspan viene utilizzato per unire due o più celle adiacenti all'interno di una singola riga. L'attributo rowspan viene utilizzato per unire le celle tra le righe e viene inserito nella cella della riga superiore.

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". Le due celle adiacenti vengono unite. Le celle prima e ultima includono rowspan="2". La cella viene unita alla cella 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 nella seconda riga. Non viene dichiarata alcuna cella per la prima o l'ultima colonna perché la cella nelle prime e ultime colonne della prima riga si estende su due righe.

Nei casi in cui una cella sia definita da più celle di intestazione con associazioni che non possono essere impostate solo dagli attributi scope, includere 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 un caso d'uso così semplice, ma è importante averli a disposizione 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 riga o colonna, 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 è più comune negli elementi <td>, ma è valido anche in <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. Dal punto di vista cognitivo e in termini di supporto per gli screen reader, le tabelle più semplici, con poche o nessuna cella espansa, anche senza aggiungere ambito e intestazioni, sono più facili da comprendere. Sono anche più facili da gestire.

Applicare uno stile alle tabelle

Esistono due elementi relativamente oscuri che sono stati brevemente menzionati: 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 di organizzazione dei contenuti di una tabella è generalmente il seguente, con <table> e <caption> che sono i due elementi che devono essere inclusi:

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

Né <colgroup> né <col> hanno un significato semantico in termini di contributo alla maggiore accessibilità della tabella, ma consentono di applicare stili limitati alle colonne, inclusa l'impostazione di una larghezza per la colonna con CSS.

Gli stili <col> applicheranno uno stile a una colonna a condizione che non siano presenti stili <td> o <th> che sostituiscono lo stile. Ad esempio, quando viene utilizzato <colspan> per unire le celle in alcune righe di una tabella, ma non in tutte, non puoi essere certo che un selettore come tr > *:nth-child(8), che seleziona l'8a riga secondaria di ogni riga, evidenzi l'8a colonna per intero o evidenzi l'8a colonna per più righe, ma con alcune celle delle colonne 9 e 10, a seconda delle celle di riga o di colonna unite.

Purtroppo, sono supportate solo alcune proprietà, gli stili non vengono ereditati nelle celle e l'unico modo per utilizzare l'elemento <col> nelle celle di targeting è con un selettore complesso che include il :has() selettore relazionale.

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

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

Le tabelle non sono adattabili per impostazione predefinita. ma vengono impostate in base ai contenuti per impostazione predefinita. Sono necessarie misure aggiuntive per fare in modo che lo stile del layout della tabella funzioni efficacemente su una serie di dispositivi. Se modifichi la proprietà CSS display per gli elementi della tabella, includere gli attributi ARIA role. Sebbene possa sembrare ridondante, la proprietà CSS display può influire sulla struttura di accessibilità in alcuni browser.

Presentazione dei dati

Gli elementi della tabella hanno significati semantici che vengono utilizzati dalle tecnologie per la disabilità per consentire di spostarsi tra le righe e le 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 sola tabella per i dati. Pensaci in questo modo: se i tuoi dati richiedono un foglio di lavoro per essere presentati in una riunione, utilizza<table>. Se vuoi utilizzare le funzionalità disponibili nei software per le presentazioni come Keynote o PowerPoint, probabilmente hai bisogno di un elenco descrittivo.

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

Molti sviluppatori utilizzano le tabelle per la disposizione dei moduli, ma non è necessario. Tuttavia, devi conoscere i moduli HTML, quindi lo faremo in seguito.

Verificare di aver compreso

Verifica le tue conoscenze sulle tabelle.