Gebruik de juiste code om bij (complexe) datatabellen de tabelkoppen te associëren met de data

Tabellen die niet de standaard opbouw hebben (koppen in eerste rij of kolom, data in de overige cellen) moeten voorzien worden van extra code om de verbanden duidelijk te maken.

Hoe pas ik dit toe?

Aangeven of de kop hoort bij de rij of kolom

Met het scope-attribuut geef je aan of een kopcel een kop is voor een rij, een kolom of een rij- of kolomgroep. Dit is nodig in 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.

Complexe tabellen

Bij complexe tabellen moet je gebruikmaken van het id- en headers-attribuut. Een tabel wordt gezien als complex in de volgende gevallen:

  • Als kolomkoppen halverwege de tabel nogmaals voorkomen of veranderen.
  • Als er drie of meer kopcellen geassocieerd zijn met elke datacel.

 Het id-attribuut gebruik je voor de kopcellen (<th>-element). Zo kun je er naar verwijzen in het headers-attribuut van <td>- en <th>-cellen die bij de kopcel horen.

Voorbeelden

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
Willem Alkmaar 20-11-2002
Mark Breda 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">Willem</th>
<td>Alkmaar</td>
<td>20-11-2002</td>
</tr>
<tr>
<th scope="row">Mark</th>
<td>Breda</td>
<td>10-02-1984</td>
</tr>
</table>

Id- en headers-attributen

De volgende tabel bestaat uit meerdere niveaus, en kolomkoppen veranderen halverwege 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" scope="col">
            Chalet
        </th>
        <th id="villa" scope="col">
            Villa
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <th id="parijs" colspan="3" scope="colgroup">
            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 de handleiding voor tabellen van het W3C voor meer codevoorbeelden van tabellen.

Hoe draagt dit bij aan een betere website?

Bezoekers die hulptechnologie gebruiken hebben er baat bij als de relaties in complexe tabellen expliciet zijn aangegeven. Doordat de relaties in de code staan kan de hulptechnologie de informatie uit de tabel op een overzichtelijke en logische manier presenteren.

Bouwer of redacteur?

De bouwer moet zorgen dat het CMS redacteuren de mogelijkheid biedt om tabellen op een correcte wijze toe te voegen. Niet alle editors ondersteunen het invoegen van complexe tabellen. In dat geval zou de redacteur de tabel in de HTML-code moeten kunnen invoegen. Redacteuren 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.

Technische details

  • Hoort bij toegankelijkheidseis 1.3.1
  • Niveau A

Hoort bij