Intestazioni di righe e colonne nel modo giusto
Associare ogni cella alle intestazioni corrette
Intestazioni di righe e colonne nel modo giusto è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
La maggior parte delle tabelle ha due tipi di intestazione
I dati reali hanno di solito intestazioni in alto e lungo il lato. Ogni cella di dati si trova all’incrocio tra un’intestazione di colonna e un’intestazione di riga.
Ogni cella ha bisogno di entrambe
Il valore 92, da solo, significa poco. Associandolo ad Ada e a Score, diventa Ada, Score, 92. Questo abbinamento è l’associazione che sta creando.
Intestazioni di colonna in alto
La prima riga contiene le intestazioni scope=col. Quando l’utente si sposta verso il basso in una colonna, lo screen reader continua ad annunciare l’intestazione della colonna per fornire il contesto.
<tr>
<th scope="col">Student</th>
<th scope="col">Score</th>
</tr>Intestazioni di riga a lato
La prima cella di ogni riga del corpo diventa un’intestazione scope=row. Dà un nome alla riga, così i valori ricevono un chi o un quando mentre l’utente legge da sinistra a destra.
<tr>
<th scope="row">Ada</th>
<td>92</td>
</tr>La cella d’angolo
La cella in alto a sinistra si trova spesso sopra le intestazioni di riga e accanto a quelle di colonna. Lasciarla come un th vuoto va bene e mantiene corretta la griglia.
<tr><th></th><th scope="col">Score</th></tr>Lo scope predefinito è un’insidia
I browser provano a dedurre lo scope, ma il risultato non è affidabile per griglie più complesse di quelle più semplici. Imposti sempre scope autonomamente per essere certo.
Utilizzare thead e tbody
Racchiuda le righe di intestazione in thead e le righe di dati in tbody. Questo chiarisce la struttura per le tecnologie assistive e rende il markup molto più facile da leggere.
<thead>
<tr><th scope="col">Name</th></tr>
</thead>
<tbody>
<tr><th scope="row">Ada</th></tr>
</tbody>Come lo legge uno screen reader
Spostandosi su una cella di dati, l’utente sente l’intestazione di riga, quella di colonna e poi il valore. È uno scope corretto a rendere accurato questo annuncio.
Una cella di intestazione, un solo compito
Assegni a ogni th un solo ruolo: intestazione di colonna o intestazione di riga. Mescolare dati ed etichette nella stessa cella confonde l’associazione per tutti.
Verificare leggendo una cella
Scelga una cella di dati a caso e si chieda: le sue intestazioni la spiegano completamente? Se dalle intestazioni non riesce a capire che cosa significhi un numero, lo scope è errato.
Un esempio a due assi
Intestazioni di colonna in alto, intestazioni di riga a sinistra e dati al centro. Questa forma a matrice copre la grande maggioranza delle tabelle che costruirà.
<tr><th scope="row">Ada</th><td>92</td><td>88</td></tr>Controllo rapido
Un utente sposta il cursore su una cella di dati nel mezzo di una tabella strutturata correttamente.
Riepilogo: due assi, due scope
Le intestazioni di colonna usano scope=col, quelle di riga usano scope=row e ogni cella di dati si trova nel punto in cui si incrociano. Imposti Lei stesso lo scope e non si fidi mai delle deduzioni.
Domande Frequenti
La lezione «Intestazioni di righe e colonne nel modo giusto» è gratuita?
Sì — il testo completo di «Intestazioni di righe e colonne nel modo giusto» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Intestazioni di righe e colonne nel modo giusto»?
Associare ogni cella alle intestazioni corrette Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Intestazioni di righe e colonne nel modo giusto»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- th, scope e l'elemento caption
- Intestazioni di righe e colonne nel modo giusto
- Tabelle complesse: abbinare headers e id
- Le tabelle di layout sono un problema