Tabelle

Le tabelle HTML vengono utilizzate per visualizzare dati tabulari con righe e colonne. La decisione di utilizzare <table> dovrebbe basarsi su i contenuti che stai presentando e le caratteristiche in relazione a tali contenuti. Se i dati vengono presentati, confrontati, ordinati calcolati o incrociati, <table> è probabilmente la scelta giusta. Se vuoi semplicemente disporre in modo ordinato i contenuti non tabulari, come un ampio gruppo di immagini in miniatura, le tabelle non sono appropriate: crea un elenco di immagini e applicare uno stile alla griglia con CSS.

In questa sezione, illustreremo tutti gli elementi che compongono la tabella, oltre ad alcune funzioni di accessibilità e usabilità. da tenere in considerazione quando presenti i dati tabulari. Impara HTML non riguarda fondamentalmente CSS ed è disponibile un intero corso dedicato all'apprendimento CSS, tratteremo alcune proprietà CSS specifiche della tabella.

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 <table> è table; tecnologie per la disabilità sanno che questo elemento è una struttura a tabella contenente dati organizzati 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 dell'elemento grid possono essere espanse e compresse, utilizza invece role="treegrid".

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

Gli elementi secondari della tabella sono, in ordine:

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

Tratteremo gli elementi di <table> secondari, che sono tutti facoltativi ma consigliati, poi esamina le righe, le celle di intestazione della tabella e celle di dati delle tabelle. L'argomento <colgroup> sarà coperto per ultimo.

Didascalia della tabella

Essendo un elemento semantico nativo, <caption> è l'opzione preferita metodo per assegnare un nome a una tabella. L'<caption> fornisce un titolo descrittivo e associato in modo programmatico alla tabella. È visibili e disponibili 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 lo scopo della tabella senza dover leggere il testo circostante. In alternativa, puoi utilizzare aria-label o aria-labelledby in <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 del sottotitolo può essere impostata con la proprietà CSS caption-side, una è più pratica rispetto all'utilizzo dell'attributo align obsoleto. In questo modo la didascalia può essere impostata in alto e in basso. Sinistra e destra il posizionamento laterale, con inline-start e inline-end, non sono ancora completamente supportati. In alto è la presentazione predefinita del browser.

Preferibilmente, le tabelle di dati devono avere intestazioni chiare e una didascalia ed essere abbastanza semplici da essere quasi autoesplicative. Ricorda che non tutti gli utenti hanno le stesse capacità cognitive. Quando la tabella indica "un punto di vista" o necessita di un'interpretazione, fornisci una un breve riassunto del punto o della funzione principale della tabella. La posizione del riepilogo dipende dalla lunghezza e dalla complessità del riepilogo. Se la risposta è breve, usala come testo interno della didascalia. Se è più lungo, riassumilo nella didascalia e fornisci il riepilogo nel precedente la tabella, associando i due al aria-describedby . Un'altra opzione è inserire la tabella in un <figure> e inserire il riepilogo nel <figcaption>.

Sezionamento dei dati

I contenuti delle tabelle sono composti da massimo tre sezioni: zero o più intestazioni di tabella (<thead>) , corpi delle tabelle (<tbody>), e piè di pagina delle tabelle (<tfoot>). Tutti sono facoltativi e zero o più di ciascuno sono supportati.

Questi elementi non aiutano o 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 resi fissi, mentre i contenuti <tbody> possono essere messi a scorrere. Le righe non nidificate in uno di questi tre elementi contenenti sono implicitamente aggregato in un <tbody>. Tutti e tre condividono lo stesso ruolo implicito rowgroup. Nessuno di questi tre elementi ha attributi specifici dell'elemento.

Dati registrati finora:

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

Inizialmente, l'elemento <tfoot> doveva essere inserito subito dopo <thead> e prima di <tbody> per motivi di accessibilità, ed è per questo che nei codebase legacy potresti trovare questo ordine delle origini non intuitivo.

Contenuti tabella

Le tabelle possono essere divise in intestazioni, corpo e piè di pagina, ma nessuna di queste azioni funziona se le tabelle non lo fanno. contenere righe, celle e contenuti di una tabella. Ogni riga della tabella, <tr>, contiene una o più celle. Se una cella è di intestazione, utilizza <th>. Altrimenti, usa <td>.

I fogli di stile dello user agent generalmente visualizzano i contenuti in una cella di intestazione della tabella <th> centrati e in grassetto. Questi stili predefiniti, e tutti gli stili, vengono controllati al meglio con CSS anziché con gli attributi ritirati che erano disponibili sulle singole celle. e anche <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. Spaziatura interna e spaziatura interna delle celle, che definiscono lo spazio tra il contenuto di una cella e il suo bordo e tra i bordi delle celle adiacenti, con gli elementi CSS bound-colla e border-spacing rispettivamente. Border-spacing non avrà alcun effetto se viene impostato border-collapse: collapse. Se border-collapse: separate; è impostata, puoi nascondere completamente le celle vuote utilizzando empty-cells: hide;. Per scoprire di più sull'applicazione di stili alle tabelle, ecco un presentazione interattiva degli 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 caratteristiche:

In questo esempio sono presenti una didascalia, l'intestazione di una tabella e il 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> invece di <td>.

La cella <th> ha un significato semantico, con ruoli ARIA impliciti di columnheader o rowheader. definisce la cella come intestazione per la colonna o la riga di celle della tabella, a seconda del valore dell'attributo scope enumerato. Il browser utilizzerà col o row per impostazione predefinita se scope non è impostato esplicitamente. Poiché abbiamo utilizzato il markup semantico, la cella 1956 ha due intestazioni: Year e Lou Minious. Questa associazione indica che "1956" è la "anno" di laurea per "Lou Minious". In questo esempio, come possiamo vedere l'intera tabella, l'associazione è visivamente evidente. L'utilizzo di <th> fornisce l'associazione anche quando la colonna o la riga di intestazione scorre fuori dalla visualizzazione. Potremmo 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 di scope includono rowgroup e colgroup, che sono utili con tabelle complesse.

Unione di celle

Analogamente a MS Excel, Fogli Google e Numeri, è possibile unire più celle in un'unica cella. Per farlo, devi usare l'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 nelle righe, da posizionare nella cella nella 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 ha colspan="2". Le due celle adiacenti vengono unite. La prima e l'ultima cella includono rowspan="2". Questa operazione unisce la cella con la cella nella riga adiacente, immediatamente sotto.

La seconda riga nell'intestazione della tabella contiene due celle; queste sono le celle per la seconda e la terza colonna nella seconda riga. Non viene dichiarata nessuna cella per la prima o l'ultima colonna, poiché la cella della prima e dell'ultima colonna della prima riga comprende due righe.

Se una cella è definita da più celle di intestazione con associazioni che non possono essere impostate dai soli attributi scope, includi l'attributo headers con un elenco delle intestazioni associate separate da spazi. 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 probabilmente non erano necessari in un caso d'uso così semplice, ma sono importanti nella barra degli strumenti le tabelle diventano più complesse. Tabelle con strutture complesse, ad esempio tabelle in cui intestazioni o celle vengono unite o con più due livelli di intestazioni di colonna o riga, richiedono l'identificazione esplicita delle celle di intestazione associate. In queste tabelle complesse, associa 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, la comprensione di strutture di tabelle complesse può essere difficile 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 poche o nessuna cella con spanditi, anche senza aggiungere ambito e intestazioni, sono più facilmente capito. Sono anche più facili da gestire.

Definizione dello stile delle tabelle

Due elementi relativamente incomprensibili sono stati brevemente menzionati: il gruppo di colonne, <colgroup>, l'elemento e il suo unico discendente, l'elemento della colonna <col> vuoto. La 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>, subito dopo <caption> e prima di qualsiasi dato della tabella. Se coprono più di una colonna, utilizza l'attributo span.

L'ordine di struttura dei contenuti di una tabella è generalmente 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 contribuire a rendere la tabella più accessibile, ma consentono per limitare gli stili delle colonne, inclusa l'impostazione della larghezza della colonna con CSS.

Gli stili <col> daranno uno stile a una colonna purché non ci siano stili <td> o <th> da sostituire. Ad esempio, quando <colspan> viene utilizzato per unire le celle in alcune righe di una tabella, ma non in tutte. Non è certo che un selettore, come tr > *:nth-child(8), che seleziona l'ottava colonna secondaria di ogni riga, evidenzierà completamente l'ottava colonna o l'ottava colonna per più righe. ma con una macchia di celle alla nona e alla decima colonna, a seconda di quali celle di riga o colonna sono state unite.

Sfortunatamente, sono supportate solo poche 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 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, righe, righe, con le celle per ultime e superiori, come mostrato nello schema della tabella strati. Gli elementi <td> e <th> non sono discendenti di elementi <colgroup> o <col> e non ne ereditano lo stile.

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

Le tabelle non sono adattabili per impostazione predefinita. Piuttosto, le dimensioni avviene in base ai contenuti per impostazione predefinita. Sono necessarie misure aggiuntive per ottenere di layout per lavorare in modo efficace su una varietà di dispositivi. Se stai modificando la proprietà di visualizzazione CSS per gli elementi della tabella: includono gli attributi ARIA role. Può sembrare ridondante, ma la proprietà CSS displaypuò influire sull'albero 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 righe e colonne senza farti "perdere". L'elemento <table> non deve essere utilizzato per la presentazione. Se hai bisogno di un'intestazione su un elenco, usa 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. Vedila in questo modo: se i tuoi dati richiedono un foglio di lavoro per essere presentati a una riunione, utilizza <table>. Se desideri utilizzare le funzionalità disponibili nei software di presentazione come Keynote o PowerPoint, probabilmente avrai bisogno di un elenco di descrizioni.

Sebbene l'ordinamento delle colonne delle tabelle sia competenza di JavaScript, eseguire il markup delle intestazioni per informare gli utenti che la colonna può essere ordinata rientra nella portata del codice HTML. Fai sapere agli utenti che le colonne della tabella possono essere ordinate con un'icona raffigurante un ordine crescente, decrescente o non ordinato. La colonna attualmente ordinata deve includi l'attributo aria-sort con il valore enumerato della direzione di ordinamento. <caption> può annunciare educatamente gli aggiornamenti relativi all'ordinamento tramite aria-live e un un intervallo aggiornato in modo dinamico 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 presenti dati tabulari, non utilizzare un <table>. Se utilizzi una tabella per la presentazione, imposta role="none".

Molti sviluppatori utilizzano le tabelle per impaginare i moduli, ma non è necessario. È necessario tuttavia conoscere i moduli HTML, pertanto ne parleremo più avanti.

Verifica le tue conoscenze

Verifica le tue conoscenze delle tabelle.