th, scope og caption-elementet
Giv en tabel en titel og korrekte overskriftsceller.
th, scope og caption-elementet er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Web Accessibility Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Datatabeller formidler betydning
En ægte datatabel viser relationer mellem rækker og kolonner. Hvis du markerer den korrekt, kan skærmlæsere annoncere, hvilken overskrift hver værdi hører til.
En almindelig tabel er forvirrende
Hvis hver celle kun er en td, læser en skærmlæser tal op uden kontekst. Brugeren hører værdierne, men lærer aldrig, hvad de betyder.
<table>
<tr><td>Name</td><td>Score</td></tr>
<tr><td>Ada</td><td>92</td></tr>
</table>Overskriftsceller bruger th
Skift overskriftsceller fra td til th. Nu ved browseren, at cellerne navngiver dataene i stedet for at indeholde dem, og eksponerer dem som overskrifter.
<tr><th>Name</th><th>Score</th></tr>Hvorfor th ændrer alt
Et th-element annonceres som en overskrift og kan knyttes til de celler, det beskriver. Det er denne forbindelse, der giver isolerede tal deres betydning.
Attributten scope
Føj scope til hvert th for at angive, hvilke celler det dækker. Værdien er col for en kolonneoverskrift eller row for en rækkeoverskrift.
<th scope="col">Score</th>scope=col til overskrifter øverst
Brug scope=col på overskriften øverst i en kolonne. Hver celle under den arver denne etiket, når brugeren bevæger sig ned gennem kolonnen.
<th scope="col">City</th>scope=row til overskrifter i siden
Brug scope=row på den første celle i en række, når den navngiver rækken, f.eks. en person eller en dato langs venstre kant.
<th scope="row">Ada</th>caption navngiver tabellen
Elementet caption giver hele tabellen en titel. Skærmlæserbrugere hører den først og ved derfor, hvad de skal til at udforske.
<table>
<caption>Quiz scores by student</caption>
</table>caption skal stå først
Placér caption som det allerførste underordnede element i tabellen, lige efter åbningstagget. Enhver anden placering er ugyldig og kan blive ignoreret.
caption er bedre end en overskrift
En nærliggende h2 er ikke nok. Caption er programmatisk knyttet til tabellen, så brugerne finder titlen, også når de springer fra tabel til tabel.
En komplet enkel tabel
Caption, en overskriftsrække med th og scope, derefter datarækker. Dette grundlag gør de fleste enkle tabeller fuldt tilgængelige uden ARIA.
<table>
<caption>Scores</caption>
<tr><th scope="col">Name</th><th scope="col">Score</th></tr>
<tr><th scope="row">Ada</th><td>92</td></tr>
</table>Hurtigt tjek
Du navngiver kolonneoverskriften øverst i en tabel.
Opsummering: De tre byggesten
Du har lært de tre elementer i tilgængelige tabeller: th til overskrifter, scope til at målrette dem og caption til at navngive tabellen. Så er det meste af arbejdet gjort.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “th, scope og caption-elementet” gratis?
Ja — hele teksten til “th, scope og caption-elementet” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Web Accessibility Academy-kurset, skal du opgradere til CoddyKit PRO. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “th, scope og caption-elementet”?
Giv en tabel en titel og korrekte overskriftsceller. Du øver dig i Web Accessibility Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Web Accessibility Academy?
Der kræves ingen tidligere erfaring. Web Accessibility Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “th, scope og caption-elementet”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Web Accessibility Academy-lektion?
Ja. Alle Web Accessibility Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- th, scope og caption-elementet
- Række- og kolonneoverskrifter gjort rigtigt
- Komplekse tabeller: sammenkobling af headers og id
- Layouttabeller er en fælde