IJkpunt 5.1 - Webrichtlijnen 1

Referentie: De WCAG ijkpunten zijn identiek aan de Waarmerk drempelvrij ijkpunten en de Webrichtlijnen.

Beschrijving

Het gebruik van datatabellen maakt je gegevens beter toegankelijk. Het is daarom belangrijk om de juiste (HTML-)tabelopmaak te gebruiken als je gegevens wilt presenteren in tabellen. Gebruik daarom geen inspringingen of style sheets om je gegevens te presenteren.
Het wordt daarom ook aanbevolen om geen gebruik te maken van tabellen voor de layout van een pagina, maar in plaats daarvan style sheets te gebruiken. Gebruik tabellen alleen om gegevens te presenteren. Als je een tabel toch gebruikt voor de layout van je pagina moet je geen structurele tabelopmaak (als <th>, <col>, scope, headers, enz.) gebruiken die specifiek bedoeld zijn voor datatabellen.

Tabelcellen kunnen twee soorten informatie bevatten: koppen en data. Dit onderscheid maakt het voor user agents mogelijk om de kopcellen anders te renderen dan de datacellen, zelfs als style sheets ontbreken. Visuele user agents kunnen tekst in kopcellen bijvoorbeeld vetgedrukt weergeven. Spraaksoftware kan de tekst in kopcellen bijvoorbeeld op een andere toon voorlezen.

Dit ijkpunt geeft aan dat als er rij- of kolomkoppen aanwezig zijn in een datatabel, dat deze dan met de juiste tabelopmaak moeten worden opgemaakt. In de code van datatabellen gebruik je doorgaans <td>-tags voor de datacellen ("td" staat voor table data) en <th>-tags ("th" staat voor table header) voor de rij- en/of kolomkoppen.
In het geval dat een tabelcel informatie bevat die zowel data is als een header (zie voorbeeld verderop), dan geeft de HTML specificatie aan dat deze cel moet worden opgemaakt met het td element, maar met toevoeging van de scope attribuut. Het sope attribuut geeft dan aan dat de informatie in de tabelcel ook headerinformatie bevat.

Om datacellen te associeren met hun bijbehorende koppen geeft de HTML specificatie aan dat dit het beste kan door gebruik te maken van de scope en/of headers attributen. Door middel van deze attributen wordt de associatie expliciet vastgelegd, zodat niet-visuele user agents (zoals hulpapparatuur en schermlees programma's) de juiste kopinformatie bij de datacel kunnen presenteren. Aangeraden wordt dus om altijd of het scope of het headers attribuut te gebruiken, ook bij eenvoudige datatabellen.
De HTML specificatie geeft echter ook aan dat user agents ook zonder deze attributen de juiste koppen bij datacellen kunnen achterhalen, zolang deze koppen maar op de juiste manier (met het th element, of td in combinatie met het scope attribuut) worden opgemaakt. Door gebruik te maken van th elementen voor koppen wordt de associatie impliciet vastgelegd met de data. Voor dit ijkpunt is deze impliciete associatie voldoende. Het toepassen van scope en headers attributen is voor dit ijkpunt dus een best practice en wordt dus wel aanbevolen.
Het volgende algoritme wordt door user agents gebruikt als het scope en/of headers attribuut ontbreekt. Het doel van het algoritme is om een geordende lijst van koppen te vinden.

• Allereerst wordt links van de positie van de datacel gezocht naar rijkoppen. Dan wordt naar boven gezocht naar kolomkoppen. Het zoeken in een richting stopt bij de buitenrand van de tabel, of wanneer een datacel na de kopcel volgt.
• Rijkoppen worden in de volgorde waarin ze in de tabel voorkomen toegevoegd aan de lijst. Voor tabellen die van links-naar-rechts gelezen moeten worden, worden de rijkoppen dus van links naar rechts in de lijst geplaatst (dus de meest linker rijkop als eerst, enz.)
• Kolomkoppen worden na de rijkoppen toegevoegd aan de lijst en ook in de volgorde waarin ze voorkomen in de tabel, dus van boven naar beneden.
• Als een kopcel een headers attribuut heeft, dan worden ook de koppen waarin in dit attribuut naar verwezen wordt opgenomen in de lijst, waarna het zoeken in die richting stopt.

Relevante Webrichtlijnen: R-pd.11.1, R-pd.11.2, R-pd.11.3, R-pd.11.4, R-pd.11.5, R-pd.11.6, R-pd.11.7, R-pd.11.8, R-pd.11.9, R-pd.11.10,

Voordelen

• Blinden, slechtzienden en mensen met een verstandelijke handicap hebben het meest voordeel van deze richtlijn. Door de juiste broncode te gebruiken in datatabellen worden de informatie en de structuur gescheiden van de presentatie. Het scheiden van informatie en structuur van presentatie maakt het mogelijk om informatie op alternatieve manieren te presenteren zonder verlies van informatie of structuur. Zodoende kan met de behoeften en beperkingen van verschillende gebruikers rekening gehouden worden. Zo kan bijvoorbeeld informatie die visueel in een datatabel gepresenteerd wordt, bijvoorbeeld de relatie van een datacel met een kolom- of rijkop, ook in spraak of in braille (tekst) gepresenteerd worden.

Criteria voor toetsing

• In een datatabel zijn kolom- en/of rijheaders met de juiste (HTML-)tabelopmaak aangegeven.

Voorbeeld

Eenvoudige datatabel voor treinreis

In de onderstaande tabel is te zien dat door het gebruik van de juiste (HTML-)tabelopmaak de koppen duidelijk visueel weergegeven worden.

Daarnaast zorgt de gebruikte tabelopmaak ervoor dat het voor hulpapparatuur mogelijk is om de informatiestructuur weer te geven, doordat door het toepassen van het th element de associaties tussen de datacellen en de koppen impliciet is vastgelegd. Het zou beter zijn om ook in dit voorbeeld gebruik te maken van scope of headers attributen om de associaties tussen de datacellen en de koppen expliciet vast te leggen. Dit maakt het voor hulpapparatuur eenvoudiger om de associaties te vinden, omdat ze expliciet vastgelegd zijn.

Als een bezoeker nu van boven naar beneden en van links naar rechts door de tabel loopt zal het volgende voorgelezen worden:

caption: Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in euro)
summary: Overzicht tarieven treinreis Utrecht naar Haarlem, gebruik de linkerkolom om de soort reis uit te kiezen; een enkele reis, een retour of een weekendretour. Vervolgens is de eerst genoemde prijs, de prijs van een 2de klas kaartje en de prijs genoemd in de cel daarnaast een 1ste klas kaartje.
Enkele reis, 2e klas: 8,00, 1e klas: 12,40
Retour, 2e klas: 14,10, 1e klas: 21,90
Weekendretour, 2e klas: 14,10, 1e klas: 21,90

Voor de bezoeker is het nu veel duidelijker waar de bedragen in de tabel voor staan. Nu is het bijvoorbeeld duidelijk dat 12,40 euro de prijs is voor een 1e klas enkele reis en niet voor een tweede klas enkele reis.

De code die in dit voorbeeld gebruikt is:

1. <table width="50%" cellspacing="0" cellpadding="0" border="1" summary="Overzicht tarieven treinreis Utrecht naar Haarlem, gebruik de linkerkolom om de soort reis uit te kiezen; een enkele reis, een retour of een weekendretour. Vervolgens is de eerst genoemde prijs, de prijs van een 2de klas kaartje en de prijs genoemd in de cel daarnaast een 1ste klas kaartje.">
2. <caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in euro)</caption>
3. <tr>
4. <td></td>
5. <th>2e klas</th>
6. <th>1e klas</th>
7. </tr>
8. <tr>
9. <th>Enkele reis</th>
10. <td align="right">8,00</td>
11. <td align="right">12,40</td>
12. </tr>
13. <tr>
14. <th>Retour</th>
15. <td align="right">14,10</td>
16. <td align="right">21,90</td>
17. </tr>
18. <tr>
19. <th>Weekendretour</th>
20. <td align="right">14,10</td>
21. <td align="right">21,90</td>
22. </tr>
23. </table>

Als voor deze tabel gebruik gemaakt wordt van expliciete associatie kan dit door middel van het scope attribuut of het headers attribuut. Hieronder staat een voorbeeld waarbij gebruik gemaakt wordt van het scope attribuut en een voorbeeld waarbij gebruik gemaakt wordt van het headers attribuut. Dit is dus niet perse nodig om te voldoen aan dit ijkpunt, maar wordt wel aanbevolen. Voor hulpapparatuur maakt het overigens niet uit welke van de twee gebruikt worden, de output is hetzelfde. Over het algemeen is het gebruik van scope makkelijker voor eenvoudige tabellen en headers voor complexere tabbellen.

Hetzelfde voorbeeld maar dan met scope voor expliciete associatie. Het scope attribuut wordt toegepast op een kopcel en geeft aan voor welke datacellen hij een kop is. De waarden voor het scope attribuut kunnen zijn: col, row, colgroup en rowgroup. Deze laatste twee zijn nodig wanneer een kopcel meerdere kolommen of rijen omvat doordat een colspan of rowspan attribuut gebruikt is.

1. <table width="50%" cellspacing="0" cellpadding="0" border="1" summary="Overzicht tarieven treinreis Utrecht naar Haarlem, gebruik de linkerkolom om de soort reis uit te kiezen; een enkele reis, een retour of een weekendretour. Vervolgens is de eerst genoemde prijs, de prijs van een 2de klas kaartje en de prijs genoemd in de cel daarnaast een 1ste klas kaartje.">
2. <caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in euro)</caption>
3. <tr>
4. <td></td>
5. <th scope="col">2e klas</th>
6. <th scope="col">1e klas</th>
7. </tr>
8. <tr>
9. <th scope="row">Enkele reis</th>
10. <td align="right">8,00</td>
11. <td align="right">12,40</td>
12. </tr>
13. <tr>
14. <th scope="row">Retour</th>
15. <td align="right">14,10</td>
16. <td align="right">21,90</td>
17. </tr>
18. <tr>
19. <th scope="row">Weekendretour</th>
20. <td align="right">14,10</td>
21. <td align="right">21,90</td>
22. </tr>
23. </table>

Hetzelfde voorbeeld maar dan met headers voor expliciete associatie. Het headers attribuut wordt toegepast op een datacel en de waarde van het attribuut heeft een door spaties gescheiden lijst van verwijzingen naar alle koppen die van toepassing zijn op deze datacel. Deze verwijzingen komen overeen met de waardes die in een id attribuut staan bij de koppen. Alle koppen worden dus eerst voorzien van een id attribuut met een unieke waarde.

1. <table width="50%" cellspacing="0" cellpadding="0" border="1" summary="Overzicht tarieven treinreis Utrecht naar Haarlem, gebruik de linkerkolom om de soort reis uit te kiezen; een enkele reis, een retour of een weekendretour. Vervolgens is de eerst genoemde prijs, de prijs van een 2de klas kaartje en de prijs genoemd in de cel daarnaast een 1ste klas kaartje.">
2. <caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in euro)</caption>
3. <tr>
4. <td></td>
5. <th id="k2">2e klas</th>
6. <th id="k1">1e klas</th>
7. </tr>
8. <tr>
9. <th id="r1">Enkele reis</th>
10. <td headers="r1 k2" align="right">8,00</td>
11. <td headers="r1 k1" align="right">12,40</td>
12. </tr>
13. <tr>
14. <th id="r2">Retour</th>
15. <td headers="r2 k2" align="right">14,10</td>
16. <td headers="r2 k1" align="right">21,90</td>
17. </tr>
18. <tr>
19. <th id="r3">Weekendretour</th>
20. <td headers="r3 k2" align="right">14,10</td>
21. <td headers="r3 k1" align="right">21,90</td>
22. </tr>
23. </table>

Hieronder staat hetzelfde voorbeeld van de treinreis nog een keer, maar met een kleine aanpassing. De kolomkop in de eerste kolom zorgt ervoor dat de informatie die er onder staat ('Enkele reis', 'Retour' en 'Weekendretour') zowel data is als rijkoppen. De HTML specificatie geeft aan dat als een tabelcel informatie bevat die zowel als data als kop gezien kan worden dat deze met het td element moet worden opgemaakt in combinatie met een scope attribuut (met de juiste waarde).

De code van bovenstaande tabel ziet er dan als volgt uit.

1. <table width="50%" cellspacing="0" cellpadding="0" border="1" summary="Overzicht tarieven treinreis Utrecht naar Haarlem, gebruik de linkerkolom om de soort reis uit te kiezen; een enkele reis, een retour of een weekendretour. Vervolgens is de eerst genoemde prijs, de prijs van een 2de klas kaartje en de prijs genoemd in de cel daarnaast een 1ste klas kaartje.">
2. <caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in euro)</caption>
3. <tr>
4. <th>Soort kaart</th>
5. <th>2e klas</th>
6. <th>1e klas</th>
7. </tr>
8. <tr>
9. <td scope="row">Enkele reis</td>
10. <td align="right">8,00</td>
11. <td align="right">12,40</td>
12. </tr>
13. <tr>
14. <td scope="row">Retour</td>
15. <td align="right">14,10</td>
16. <td align="right">21,90</td>
17. </tr>
18. <tr>
19. <td scope="row">Weekendretour</td>
20. <td align="right">14,10</td>
21. <td align="right">21,90</td>
22. </tr>
23. </table>

Voor de kolomkoppen zijn <th>-tags gebruikt. Voor de rijkoppen ('Enkele reis', 'retour'...) geldt dat het ook datacellen zijn. Deze dienen dus ook als datacellen opgemaakt te worden. Om toch aan te geven dat het rijkoppen zijn wordt het scope attribuut toegevoegd: <td scope="row">.

Om expliciete associaties toe te voegen in bovenstaand voorbeeld zou het scope attribuut moeten worden toegevoegd aan de <th>-tags van de kolomkoppen: <th scope="col">. Het headers attribuut zou ook gebruikt kunnen worden, maar zou de HTML code onnodig ingewikkeld maken. Het toepassen van het scope attribuut is hier veruit de eenvoudigste oplossing.

Complexere datatabel voor treinreis

Hieronder volgt nog een keer een datatabel met treinreis gegevens, maar dan met meer header informatie, zodat meerdere rijen en kolommen aanwezig zijn met koppen. Deze tabel bevat overigens géén "meerdere logische niveau's" met rij- of kolomheaders (zie uitleg hierover bij ijkpunt 5.2). Alhoewel er meerdere rijen en kolommen zijn met koppen is hier toch sprake van slechts één logisch niveau. Alleen het aangeven van de rij- en kolomkoppen volstaat dan voor dit ijkpunt en voor ijkpunt 5.2.

De code van bovenstaande tabel ziet er dan als volgt uit.

1. <table cellspacing="0" cellpadding="5" border="1" summary="Overzicht tarieven treinreis Utrecht naar Haarlem, gebruik de tweede kolom van links om de soort reis uit te kiezen; een enkele reis, een retour of een weekendretour. Vervolgens is de eerst genoemde prijs, de prijs van een 2de klas kaartje zonder reductie en de prijs genoemd in de cel daarnaast een 2de klas kaartje met reductie. De twee cellen hierna geven hetzelfde aan voor 1ste klas kaartjes.">
2. <caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in €)</caption>
3. <tr>
4. <td colspan="2" rowspan="2"> </td>
5. <th colspan="2">2e klas</th>
6. <th colspan="2">1e klas</th>
7. </tr>
8. <tr>
9. <th>vol tarief</th>
10. <th>reductie</th>
11. <th>vol tarief</th>
12. <th>reductie</th>
13. </tr>
14. <tr>
15. <th rowspan="3">Soort kaart</th>
16. <td scope="row">Enkele reis</th>
17. <td align="right">8,00</td>
18. <td align="right">4,80</td>
19. <td align="right">12,40</td>
20. <td align="right">7,40</td>
21. </tr>
22. <tr>
23. <td scope="row">Retour</th>
24. <td align="right">14,10</td>
25. <td align="right">8,40</td>
26. <td align="right">21,90</td>
27. <td align="right">13,10</td>
28. </tr>
29. <tr>
30. <td scope="row">Weekendretour</th>
31. <td align="right">14,10</td>
32. <td align="right">8,40</td>
33. <td align="right">21,90</td>
34. <td align="right">13,10</td>
35. </tr>
36. </table>

Wat opvalt in deze tabel is dat alle kolomkoppen met het th element zijn opgemaakt, maar dat een deel van de rijkoppen ('Enkele reis', 'Retour' en 'Weekendretour') met een td element is opgemaakt in combinatie met het scope attribuut. Dit komt omdat de informatie in deze tabelcellen zowel als data gezien kunnen worden (van de kop 'Soort kaart') en als rijkoppen gezien kunnen worden voor de bedragen in de rest van de rij.

Omdat door middel van het algoritme om headerinformatie te vinden voor datacellen (zie bovenaan deze pagina bij de beschrijving) het mogelijk is om bij alle datacellen alle headerinformatie te vinden is het niet nodig om nog extra markup (scope of headers attributen) toe te voegen om relaties expliciet te maken. Deze tabel voldoet op deze manier dus aan dit ijkpunt en ook aan ijkpunt 5.2.

Zoals eerder aangegeven wordt het wel aanbevolen om de associaties expliciet te maken. Dit kan op de volgende manier:

1. <table cellspacing="0" cellpadding="5" border="1" summary="Overzicht tarieven treinreis Utrecht naar Haarlem, gebruik de tweede kolom van links om de soort reis uit te kiezen; een enkele reis, een retour of een weekendretour. Vervolgens is de eerst genoemde prijs, de prijs van een 2de klas kaartje zonder reductie en de prijs genoemd in de cel daarnaast een 2de klas kaartje met reductie. De twee cellen hierna geven hetzelfde aan voor 1ste klas kaartjes.">
2. <caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in €)</caption>
3. <tr>
4. <td colspan="2" rowspan="2"> </td>
5. <th colspan="2" scope="colgroup">2e klas</th>
6. <th colspan="2" scope="colgroup">1e klas</th>
7. </tr>
8. <tr>
9. <th scope="col">vol tarief</th>
10. <th scope="col">reductie</th>
11. <th scope="col">vol tarief</th>
12. <th scope="col">reductie</th>
13. </tr>
14. <tr>
15. <th rowspan="3" scope="rowgroup">Soort kaart</th>
16. <td scope="row">Enkele reis</th>
17. <td align="right">8,00</td>
18. <td align="right">4,80</td>
19. <td align="right">12,40</td>
20. <td align="right">7,40</td>
21. </tr>
22. <tr>
23. <td scope="row">Retour</th>
24. <td align="right">14,10</td>
25. <td align="right">8,40</td>
26. <td align="right">21,90</td>
27. <td align="right">13,10</td>
28. </tr>
29. <tr>
30. <td scope="row">Weekendretour</th>
31. <td align="right">14,10</td>
32. <td align="right">8,40</td>
33. <td align="right">21,90</td>
34. <td align="right">13,10</td>
35. </tr>
36. </table>

Omdat in bovenstaande tabel een colspan attribuut gebruikt is voor de koppen "2e klas" en "1e klas" is de waarde voor het scope attribuut "colgroup" in plaats van "col". Hetzelfde geldt voor de rijkop "Soort kaart": omdat hier een rowspan gebruikt is, is de waarde voor het scope attribuut "rowgroup" in plaats van "row".

Telefoonlijst

Soms worden tabellen gebruikt terwijl eigenlijk layout wordt bedoeld zoals vaak in het geval van een lijst van namen van medewerkers met telefoonnummer. Het is dan voldoende om alleen de kolomkoppen van <th> te voorzien:

Hieronder staat de code van de telefoonlijst. Alleen de kolomkoppen zijn voorzien van table headers.

1. <table width="50%" cellspacing="0" cellpadding="0" border="1" summary="Telefoonlijst medewerkers, links staat de naam van de medewerker, rechts het nummer van zijn of haar vaste telefoon.">
2. <caption>Telefoonlijst geheime afdeling</caption>
3. <tr>
4. <th>Naam</th>
5. <th>Telefoon</th>
6. </tr>
7. <tr>
8. <td>Koschinski</td>
9. <td>0345-672378</td>
10. </tr>
11. <tr>
12. <td>Manchusario</td>
13. <td>0345-672379</td>
14. </tr>
15. <tr>
16. <td>Panchomanza</td>
17. <td>0345-672354</td>
18. </tr>
19. <tr>
20. <td>Zarathusch</td>
21. <td>0345-672359</td>
22. </tr>
23. </table>

Bovenstaande wordt als volgt door een schermleesprogramma voorgelezen:

caption: Telefoonlijst geheime afdeling
summary: Telefoonlijst medewerkers, links staat de naam van de medewerker, rechts het nummer van zijn of haar vaste telefoon.
Naam: Koschinski, Telefoon: 0345-672378
Naam: Manchusario, Telefoon: 0345-672379
Naam: Panchomanza, Telefoon: 0345-672354
Naam: Zarathusch, Telefoon: 0345-672359

Met expliciete associatie (aanbevolen) ziet de code er als volgt uit (scope attribuut toegevoegd bij de kolomkoppen):

1. <table width="50%" cellspacing="0" cellpadding="0" border="1" summary="Telefoonlijst medewerkers, links staat de naam van de medewerker, rechts het nummer van zijn of haar vaste telefoon.">
2. <caption>Telefoonlijst geheime afdeling</caption>
3. <tr>
4. <th scope="col">Naam</th>
5. <th scope="col">Telefoon</th>
6. </tr>
7. <tr>
8. <td>Koschinski</td>
9. <td>0345-672378</td>
10. </tr>
11. <tr>
12. <td>Manchusario</td>
13. <td>0345-672379</td>
14. </tr>
15. <tr>
16. <td>Panchomanza</td>
17. <td>0345-672354</td>
18. </tr>
19. <tr>
20. <td>Zarathusch</td>
21. <td>0345-672359</td>
22. </tr>
23. </table>

Summary, caption en abbreviation

Een caption is noodzakelijk, de samenvattting en de afkorting voor lange koppen is prioriteit 3. Ze zijn echter wel erg gewenst. Hieronder staat een tabel met alledrie. De code staat verderop.

Om te voorkomen dat bij iedere cel de lange versie van een kop door een schermlees programma wordt voorgelezen is het belangrijk om een kolom of rijkop te voorzien van een afkorting. Die wordt dan door de schermlezer software gebruikt om te worden voorgelezen of omgezet naar braille. De output ziet er dan als volgt uit:

caption: Koffierooster
summary: Koffie en thee medewerkers, binnen deze tabel worden de koffie voorkeuren van mederwerkers weergegeven. De eerste kolom geeft de naam van de persoon weer, de tweede kolom geeft aan wat voor soort koffie die persoon wilt, de derde kolom of hij of zei suiker in de koffie wilt, de vierde kolom melk en de laatste kolom de sterkte van de koffie.
Naam: Ron,  Ron, soort: Expresso, suiker: Niet, melk: Geen, sterkte: Sterk
enz.

1. <table width="50%" cellspacing="0" cellpadding="0" border="1" summary="Koffie en thee medewerkers, binnen deze tabel worden de koffie voorkeuren van mederwerkers weergegeven. De eerste kolom geeft de naam van de persoon weer, de tweede kolom geeft aan wat voor soort koffie die persoon wilt, de derde kolom of hij of zei suiker in de koffie wilt, de vierde kolom melk en de laatste kolom de sterkte van de koffie.">
2. <caption>Koffierooster</caption>
3. <tr>
4. <th abbr="Naam">Naam van medewerker</th>
5. <th abbr="soort">Soort koffie</th>
6. <th abbr="suiker">Wel of niet suiker</th>
7. <th abbr="melk">Gewone melk, koffiemelk of geen melk</th>
8. <th abbr="sterkte">Sterk of normaal</th>
9. </tr>
10. <tr>
11. <td scope="row">Ron</td>
12. <td>Expresso</td>
13. <td>Niet</td>
14. <td>Geen</td>
15. <td>Sterk</td>
16. </tr>
17. <tr>
18. <td scope="row">Eric</td>
19. <td>Cappucino</td>
20. <td>Wel</td>
21. <td>Melk</td>
22. <td>Normaal</td>
23. </tr>
24. <tr>
25. <td scope="row">Henk</td>
26. <td>Gewoon</td>
27. <td>Niet</td>
28. <td>Geen</td>
29. <td>Normaal</td>
30. </tr>
31. </table>

Definities

Datatabel (gegevenstabel)
Een tabel waarin gegevensinformatie wordt gestructureerd. De horizontale en/of verticale positie van de informatie geeft betekenis aan de gegevens die in de datatabel wordt weergegeven.

Verwijzingen

• R-pd.11.2 Gebruik het th (table header) element voor het beschrijven van een kolom of rij in een tabel met relationele informatie.
• R-pd.2.9 Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.