Le tabelle HTML vengono utilizzate per visualizzare dati tabulari con righe e colonne. La decisione di utilizzare un <table> dovrebbe basarsi sui contenuti che stai presentando e sulle esigenze dei tuoi utenti in merito. Se i dati vengono presentati, confrontati, ordinati, calcolati o incrociati, probabilmente <table> è la scelta giusta. Se vuoi semplicemente disporre i contenuti non tabulari in modo ordinato,
ad esempio un gruppo numeroso di immagini in miniatura, le tabelle non sono appropriate: devi invece creare un elenco di immagini
e applicare uno stile alla griglia con CSS.
In questa sezione, analizzeremo tutti gli elementi che compongono la tabella, oltre ad alcune funzioni di accessibilità e usabilità da considerare durante la presentazione dei dati tabulari. Il corso Impara HTML non riguarda fondamentalmente CSS e esiste un intero corso dedicato all'apprendimento di CSS. Analizzeremo alcune proprietà CSS specifiche delle tabelle.
Elementi della tabella, in ordine
Il tag <table> aggrega i contenuti della tabella, inclusi tutti gli elementi della tabella.
Il ruolo ARIA implicito di un elemento <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, include 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 (<thead>), i corpi delle tabelle (<tbody>) e, facoltativamente, i piè di pagina (<tfoot>).
Ciascuno di questi è composto da righe di tabella (<tr>). Le righe contengono l'intestazione della tabella (<th>) e le celle dei dati della tabella (<td>) che, a loro volta, contengono tutti i dati.
Nel DOM, prima di tutto, 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, potrebbe contenere elementi di colonna della tabella nidificata (<col>).
Gli elementi secondari della tabella sono, in ordine:
- Elemento
<caption> - Elementi
<colgroup> - Elementi
<thead> - Elementi
<tbody> - Elementi
<tfoot>
Esamineremo gli elementi secondari degli elementi <table>, tutti facoltativi ma consigliati, poi daremo un'occhiata alle righe, alle celle di intestazione della tabella e alle celle dei dati delle tabelle. L'argomento <colgroup> sarà l'ultimo.
Didascalia tabella
Essendo un elemento semantico nativo, <caption> è il metodo preferito per assegnare un nome a una tabella. L'elemento <caption> fornisce un titolo descrittivo associato in modo programmatico alla tabella. È visibile e disponibile per tutti gli utenti per impostazione predefinita.
L'elemento <caption> deve essere il primo elemento nidificato nell'elemento <table>. Includerla consente a tutti gli utenti di conoscere
immediatamente lo scopo della tabella senza dover leggere il testo circostante. In alternativa, puoi usare aria-label o aria-labelledby
sul <table> per fornire un nome accessibile come didascalia. L'elemento <caption> non ha attributi specifici dell'elemento.
La didascalia viene visualizzata fuori dalla tabella. La posizione della didascalia può essere impostata con la proprietà CSS caption-side, che è una
migliore pratica rispetto all'utilizzo dell'attributo align deprecato. In questo modo i sottotitoli codificati possono essere visualizzati in alto e in basso. Il posizionamento a sinistra e a destra, con inline-start e inline-end, non è ancora completamente supportato. In alto è la presentazione predefinita del browser.
Preferibilmente, le tabelle di dati devono avere intestazioni e una didascalia chiare ed essere abbastanza semplici da essere quasi autoesplicative. Tieni presente che non tutti gli utenti
hanno le stesse capacità cognitive. Quando la tabella sta "mettendo un punto" o deve essere interpretata, fornisci un breve riepilogo del punto o della funzione principale della tabella. La posizione del riepilogo dipende dalla sua lunghezza e complessità.
Se è breve, usala come testo interno. Se più lungo, riassumilo nella didascalia e fornisci il riepilogo nel paragrafo che precede la tabella, associando i due all'attributo aria-describedby. Un'altra opzione è inserire la tabella in <figure> e il riepilogo in <figcaption>.
Sezionamento dei dati
Il contenuto delle tabelle è formato da massimo tre sezioni: zero o più intestazioni di tabella (<thead>), corpi delle tabelle (<tbody>) e piè di pagina delle tabelle (<tfoot>). Tutte le tabelle sono facoltative e non sono supportate nessuna delle due.
Questi elementi non aiutano né ostacolano l'accessibilità della tabella, ma sono utili in termini di usabilità. Forniscono ganci per lo stile. Ad esempio, i contenuti dell'intestazione possono essere impostati come persistenti,
mentre i contenuti <tbody> possono essere scorretti. Le righe non nidificate in uno di questi tre elementi contenitore vengono inserite implicitamente in un <tbody>. Tutti e tre condividono lo stesso ruolo implicito rowgroup.
Nessuno di questi tre elementi ha attributi specifici.
I dati raccolti finora:
<table>
<caption>MLW Students</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
L'elemento <tfoot> è stato originariamente specificato per essere successivo a <thead> e prima del <tbody> per motivi di accessibilità, motivo per cui potresti trovare questo ordine di origine non intuitivo nei codebase legacy.
Contenuto della tabella
Le tabelle possono essere suddivise in intestazioni, corpo 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>.
In caso contrario, utilizza <td>.
I fogli di stile user-agent generalmente visualizzano i contenuti di una cella di intestazione della tabella <th> centrata e in grassetto. Il controllo migliore di questi stili predefiniti,
e di tutti gli stili, avviene con CSS anziché con gli attributi deprecati che erano disponibili in singole celle,
righe e persino <table>.
C'erano attributi per aggiungere spaziatura interna tra le celle e all'interno delle celle, per i bordi e per l'allineamento del testo. La spaziatura interna delle celle e il pacing delle celle, che definiscono lo spazio tra i contenuti di una cella e il relativo bordo, e tra i bordi delle celle adiacenti, devono essere impostati rispettivamente con le proprietà CSS border-collapse e border-spacing. Border-spacing non avrà effetto se viene impostato border-collapse: collapse. Se il criterio border-collapse: separate;
è impostato, puoi nascondere completamente le celle vuote con empty-cells: hide;. Per ulteriori informazioni sull'applicazione di stili alle tabelle, questa è una
presentazione interattiva di stili CSS correlati 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>,
quindi creano 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 scope enumerato. Il browser verrà impostato in modo predefinito su col o row se scope non è impostato esplicitamente.
Poiché abbiamo utilizzato il markup semantico, la cella 1956 ha due intestazioni: Year e Lou Minious. Questa associazione ci dice che "1956" è l'"anno" di laurea di "Lou Minious". In questo esempio, come possiamo vedere l'intera tabella, l'associazione è visivamente apparente.
L'utilizzo di <th> consente di ottenere l'associazione anche quando la colonna o la riga di intestazione non è più visibile. Potremmo impostare esplicitamente <th scope="col">Year</th> e <th scope="row">Lou Minious</th>, ma con una semplice tabella come questa, i valori predefiniti enumerati funzionano.
Altri valori per scope includono rowgroup e colgroup, che sono utili in caso di tabelle complesse.
Unione di celle
Come per MS Excel, Fogli Google e Numbers, è possibile unire più celle in una singola cella. Puoi farlo con il codice HTML.
L'attributo colspan viene utilizzato per unire due o più celle adiacenti in una singola riga. L'attributo rowspan viene utilizzato per unire le celle tra le righe,
poiché viene posizionata la cella nella riga superiore.
In questo esempio, l'intestazione della tabella contiene due righe. La prima riga di intestazione contiene tre celle su quattro colonne: la cella centrale ha colspan="2". Questa operazione unisce due celle adiacenti. La prima e l'ultima cella includono rowspan="2". In questo modo la cella viene unita a quella
nella riga adiacente, subito sotto.
La seconda riga dell'intestazione della tabella contiene due celle; si tratta delle celle della seconda e della terza riga della seconda riga. Non è stata dichiarata alcuna cella per la prima o l'ultima colonna poiché la cella nella prima e nell'ultima colonna della prima riga comprende due righe.
Nei casi in cui una cella viene 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 essere ancora più chiari, abbiamo aggiunto l'attributo headers a ogni cella.
Probabilmente gli attributi headers non erano necessari in un caso d'uso così semplice, ma sono importanti nella tua barra degli strumenti man mano che
le tabelle diventano più complesse. Le tabelle con strutture complesse, come quelle in cui intestazioni o celle sono unite o con più di due livelli di intestazioni di colonna o di riga, richiedono l'identificazione esplicita delle celle di intestazione associate. In queste tabelle complesse, associa esplicitamente ogni cella di dati a ogni cella di intestazione corrispondente a 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 negli elementi <td>, ma è valido anche su <th>.
Detto questo, può essere difficile comprendere strutture di tabelle complesse per tutti gli utenti, non solo per gli utenti di screen reader. A livello cognitivo e in termini di supporto per screen reader, le tabelle più semplici, con un numero di celle ristretto o nullo, sono più facilmente comprensibili. Inoltre, sono più facili da gestire.
Stile delle tabelle
Esistono due elementi relativamente poco chiari che sono stati menzionati brevemente: il gruppo di colonne <colgroup>, l'elemento e il suo unico discendente, l'elemento colonna <col> vuoto. L'elemento <colgroup> viene utilizzato per definire gruppi di colonne o elementi <col> all'interno di una tabella.
Se utilizzato, il raggruppamento di colonne deve essere nidificato in <table>, subito dopo <caption> e prima di qualsiasi dato della tabella.
Se comprendono più di una colonna, utilizza l'attributo span.
L'ordine di struttura dei contenuti di una tabella è in genere il seguente, dove <table> e <caption> 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 rendere la tabella più accessibile, ma consentono uno stile limitato delle colonne, tra cui l'impostazione di una larghezza per la colonna con CSS.
Gli stili <col> applicano uno stile a una colonna a condizione che non esistano stili <td> o <th> che sostituiscono questo stile. Ad esempio, quando
<colspan> viene utilizzato per unire le celle in alcune righe di una tabella ma non in tutte, non puoi assicurarti che un selettore come tr > *:nth-child(8),
che seleziona l'ottava colonna figlio di ogni riga, evidenzierà l'ottava colonna per intero o l'ottava colonna per più righe,
ma con un'aggiunta di celle della nona e decima colonna, a seconda della riga o delle celle della colonna sono state unite.
Sfortunatamente, 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 includa il selettore relazionale :has().
Se <table> e <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 ultime e in alto, come mostrato nello schema dei livelli della tabella. Gli elementi <td> e <th> non sono discendenti degli elementi <colgroup> o <col> e non ne ereditano lo stile.
Per eliminare una tabella, 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, consentendo di visualizzare gli effetti di sfondo impostati su <colgroup>.
Le tabelle non sono adattabili per impostazione predefinita. ma vengono dimensionate per impostazione predefinita in base ai contenuti. Sono necessarie ulteriori misure per applicare
lo stile del layout delle tabelle a dispositivi diversi. Se stai modificando la proprietà di visualizzazione CSS per gli elementi della tabella,
includi gli attributi role ARIA. Anche se può sembrare ridondante, la proprietà displayCSS può influire sulla struttura dell'accessibilità in alcuni browser.
Presentazione dei dati
Gli elementi della tabella hanno significati semantici utilizzati dalle tecnologie per la disabilità per consentire la navigazione tra le righe e le colonne senza perdere le informazioni. L'elemento <table> non deve essere utilizzato per la presentazione. Se hai bisogno di un'intestazione per 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 solo una tabella per i dati. Vedila così: se i tuoi dati richiedono un foglio di lavoro per essere presentati a una riunione, usa <table>.
Se vuoi utilizzare le funzionalità disponibili in software di presentazioni come Keynote o PowerPoint, probabilmente hai bisogno di un elenco descrizioni.
Sebbene l'ordinamento delle colonne della tabella sia la competenza di JavaScript, il markup delle intestazioni per indicare agli utenti che la colonna è ordinabile è il campo dell'HTML.
Fai sapere agli utenti che le colonne della tabella possono essere ordinate e le icone sono in ordine crescente, decrescente o non ordinate. La colonna attualmente ordinata deve includere l'attributo aria-sort con il valore enumerato della direzione di ordinamento.
L'<caption> può annunciare in modo educato gli aggiornamenti per ordinare tramite aria-live e un
intervallo che viene aggiornato dinamicamente e visibile agli utenti di screen reader. Poiché la colonna può essere ordinata facendo clic sui contenuti dell'intestazione, i contenuti dell'intestazione devono essere <button>.
Se non stai presentando dati tabulari, non utilizzare un <table>. Se utilizzi una tabella per la presentazione, imposta role="none".
Molti sviluppatori usano le tabelle per disporre i moduli, ma non è necessario. Tuttavia, è necessario conoscere i moduli HTML. Ne parleremo più avanti.
Verifica le tue conoscenze
Verifica la tua conoscenza delle tabelle.
Quale elemento viene utilizzato per il markup delle celle che sono intestazioni?
<header><caption><th>Quali informazioni potrebbero essere adatte per il layout con una tabella?
<dl>.<ul>.