Tabellen met een standaardstructuur (rubrieken in de eerste kolom of rij, gegevens in de andere cellen) zijn gemakkelijk leesbaar voor bezoekers die hulptechnologie nodig hebben.

Aan de andere kant moeten koppelingen in tabellen met een complexe structuur expliciet worden aangegeven en in de broncode worden vastgelegd, zodat de ondersteunende technologie de informatie op een duidelijke en logische manier kan presenteren.

Hoe pas je dit toe?

Definieer een cel als koptekst voor een rij of kolom

Om de status van een cel (d.w.z. een koptekst voor een rij of voor een kolom of groep van rijen of kolommen) te definiëren, gebruik je het scope-attribuut voor de volgende gevallen:

  • Als datacellen (<td> elementen) ook fungeren als kop voor een rij of kolom.
  • Bij tabellen met zowel koppen in de eerste rij als in de eerste kolom (horizontaal en verticaal).
  • Als de koppen niet in de eerste rij of kolom staan, maar in de tweede, derde of volgende.

Voorbeeld: het scope-attribuut

De volgende tabel heeft zowel in de eerste rij als in de eerste kolom koppen. Daarom wordt het scope-attribuut gebruikt voor de kopcellen.

Geboorteplaats en -datum van deelnemers
  Woonplaats Geboortedatum
Jan Gent 20-11-2002
Piet Antwerpen 10-02-1984 
<table>
<caption>Geboorteplaats en -datum van deelnemers</caption>
<tr>
<th></th>
<th scope="col">Woonplaats</th>
<th scope="col">Geboortedatum</th>
</tr>
<tr>
<th scope="row">Jan</th>
<td>Gent</td>
<td>20-11-2002</td>
</tr>
<tr>
<th scope="row">Piet</th>
<td>Antwerpen</td>
<td>10-02-1984</td>
</tr>
</table>

Complexe tabellen

Een tabel wordt in de volgende gevallen als complex beschouwd:

  • Wanneer kolomkoppen veranderen of opnieuw verschijnen in het midden van de tabel
  • Wanneer een cel met gegevens wordt gedefinieerd door 3 of meer stukjes informatie
    • Bv. in de onderstaande tabel: Parijs, 1 slaapkamer, chalet of villa

In deze gevallen moeten de id- en headersattributen worden gebruikt:

  • Identificatie voor kopcellen (element <th>)
  • Kopteksten voor cellen die behoren tot de kopteksten

Voorbeeld: Id- en headers-attributen

De volgende tabel bestaat uit meerdere niveaus en kolomkoppen veranderen halfweg de tabel. Daarom moeten id- en headers-attributen gebruikt worden om de structuur te verduidelijken.

Prijzen van vakantiewoningen, per persoon per nacht
  Chalet Villa
Parijs
1 slaapkamer € 50 € 90
2 slaapkamers € 75 € 120
Rome
1 slaapkamer € 50 € 90
2 slaapkamers € 75 € 120 
<table>
<caption>Prijzen van vakantiewoningen, per persoon per nacht</caption>
<thead>
<tr>
<td></td>
<th id="chalet">
Chalet
</th>
<th id="villa">
Villa
</th>
</tr>
</thead>
<tbody>
<tr>
<th id="parijs" colspan="3">
Parijs
</th>
</tr>
<tr>
<th headers="parijs" id="parijs1kamer">
1 slaapkamer
</th>
<td headers="parijs parijs1kamer chalet">
€ 50
</td>
<td headers="parijs parijs1kamer villa">
€ 90
</td>
</tr>
...
</tbody>
</table>

Zie ook de handleiding voor tabellen van het W3C voor meer codevoorbeelden van tabellen.

Voor redacteurs

Redacteurs moeten per complexe tabel beslissen of deze eventueel opgesplitst of vereenvoudigd kan worden. Zo niet, dan moeten zij de tabel op de correcte wijze plaatsen op de pagina. Als de gebruikte editor het invoeren van complexe tabellen niet ondersteunt, moet de redacteur de tabel in de HTML-code kunnen ingeven.

Voor ontwikkelaars

De bouwer moet ervoor zorgen dat redacteurs tabellen op een correcte wijze manieren kunnen toevoegen.