Utilizzare le tabelle per i dati, non per il layout

Perché le tabelle HTML dovrebbero essere utilizzate solo per i dati tabellari e non per il layout?

Una tabella è appropriata solo se i valori sono correlati tra loro lungo righe o colonne e le intestazioni spiegano questa relazione. L'organizzazione visiva è compito del CSS, mentre le vere tabelle di dati devono mantenere i riferimenti alle intestazioni e l'ordine di lettura logico, anche sui dispositivi mobili.

Caso di studio: "Tabella di layout"

Una panoramica dei prezzi inizialmente utilizza elementi div su desktop, ma perde il collegamento tra tariffa e servizio sui dispositivi mobili. Viene implementata come una tabella di dati con intestazioni di colonna ed etichette ed è scorrevole orizzontalmente su schermi stretti; un layout di contatto a due colonne, d'altra parte, rimane un layout puramente CSS.

Relazione dati reale

• Relazione dati reale Righe e colonne contengono valori il cui significato diventa chiaro solo attraverso intestazioni o gruppi assegnati.

• Mappatura esplicita dell'intestazione Le relazioni `th`, `scope` e qualsiasi altra relazione riflettono accuratamente la struttura effettiva, soprattutto nelle aree di intestazione multilivello.

• Visualizzazione ristretta robusta Su schermi di piccole dimensioni, l'intestazione, la cella e l'ordine di lettura rimangono riconoscibili senza compromettere semanticamente i dati.

Visualizzazione ristretta robusta

• Percentuale di tabelle di dati produttive con didascalie o contesto comprensibile e intestazioni di riga e colonna assegnate correttamente.

• Numero di tabelle testate il cui contenuto delle celle rimane leggibile insieme all'etichetta corretta nelle visualizzazioni ristrette.

Mappatura esplicita dell'intestazione

1. Verificare se i valori visualizzati sono effettivamente confrontabili per riga o per colonna; in caso contrario, utilizzare il layout CSS.

2. Modellare intestazioni di tabella, etichette e gruppi complessi con elementi nativi e verificarne la mappatura utilizzando un lettore di schermo.

3. Testare tabelle di grandi dimensioni su visualizzazioni di piccole dimensioni con scorrimento o trasformazioni complete senza rimuovere colonne importanti.

Layout di tabella.

• Layout di tabella. Griglie e spaziatura vengono create utilizzando celle di tabella, consentendo alle tecnologie assistive di segnalare relazioni di dati inesistenti.

• Solo un'intestazione visiva – Le celle formattate in grassetto sembrano intestazioni ma non hanno alcuna connessione semantica con i dati.

• Perdita di significato su dispositivi mobili – Le colonne vengono nascoste o convertite in schede senza preservare programmaticamente le etichette associate.

Cosa significa "Utilizzare le tabelle HTML solo per i dati" per le attività correlate

Cosa distingue "Utilizzare le tabelle HTML solo per i dati" Ridurre movimenti e animazioni per utenti sensibili Un'importante domanda di approfondimento: Come si riducono in modo sicuro movimenti e animazioni per gli utenti con sensibilità particolari?

Per chi desidera approfondire l'argomento "Utilizzo delle tabelle HTML solo per i dati" dal punto di vista del cluster "Architettura Frontend e CSS", si veda Selezionare Grid e Flexbox in base alla logica del contenuto anziché all'abitudine. la classificazione appropriata.

Se si desidera implementare concretamente "Utilizzo delle tabelle HTML solo per i dati", si può fare riferimento a Sistemi web robusti Questo corso si concentra su "Semantica nativa e struttura della pagina" e "Relazioni dati reali".

Conclusione: Utilizzo delle tabelle HTML solo per i dati

Le tabelle sono progettate per le relazioni tra i dati, non per l'allineamento visivo. Una corretta mappatura dell'intestazione rende queste relazioni stabili tra presentazioni e strumenti.

Fonti e ulteriori informazioni

Queste fonti primarie sono fondamentali per il comportamento della piattaforma, la terminologia e i limiti di validazione quando si utilizza "Utilizzo delle tabelle HTML solo per i dati".

• Standard HTML Living: Dati tabellari — WHATWGLo standard HTML definisce le tabelle per i dati multidimensionali e classifica esplicitamente il loro utilizzo come elemento di layout come non conforme.

• Tutorial sulle tabelle — W3C Web Accessibility InitiativeIl tutorial WAI distingue esplicitamente le tabelle di dati dalle tabelle di layout e spiega intestazioni, relazioni tra celle, etichette e mappature complesse.

• Tecnica H51: Markup delle tabelle per informazioni tabellari — W3C WAILa tecnica WCAG definisce le informazioni tabellari come una relazione di dati bidimensionale e mostra come HTML preserva programmaticamente queste relazioni.