Gebruik de juiste HTML-code voor tabellen

Zet informatie die in een tabel thuishoort ook echt in een tabel, en gebruik hiervoor de juiste HTML-elementen.

Hoe pas ik dit toe?

Tabellen bestaan uit rijen (horizontaal) en kolommen (verticaal). Een kenmerk van tabellen is dat de gegevens in de tabel zowel horizontaal als verticaal een relatie met elkaar hebben. Voor wie de tabel kan zien zijn die relaties vaak snel duidelijk. Die worden zichtbaar door de visuele indeling van de tabel in rijen en kolommen.

De relaties moet ook behouden blijven als de tabel op een andere manier aan de bezoeker wordt gepresenteerd. Dit bereik je door de juiste HTML-elementen te gebruiken bij het maken van een tabel. Het gaat om het <table>-element voor de hele tabel. Rij- en kolomkoppen worden aangeduid met het <th>-element, rijen met het <tr>-element en individuele velden met het <td>-element. Soms is er een knop in de editor waarmee een tabel kan worden aangemaakt.

Voorbeelden

Het volgende voorbeeld toont een eenvoudige tabel met een weekschema. De dagen van de week staan in de eerste rij van de tabel. Omdat het kolomkoppen zijn staan ze in <th>-elementen. De rijen daaronder gaan over tijden op de dag. Omdat dit rijkoppen zijn staan ze ook in <th>-elementen. De overige velden (<td>-elementen) bevatten de afspraken. Als er geen afspraak is op een bepaalde dag en tijd is het <td>-element leeg.

Gebruikers van schermlezers moeten de tabel per rij lezen. Ze kunnen met het toetsenbord door de tabel heen bewegen. Telkens wordt de informatie in een veld voorgelezen. Doordat de juiste HTML-elementen zijn gebruikt, wordt/worden daarnaast ook de juiste kop(pen) voorgelezen. De bezoeker hoort dus niet alleen de afspraak zelf, maar ook de bijbehorende dag en tijd. Dit maakt de tabel begrijpelijk en bruikbaar.

Voorbeeldtabel afspraken
  Maandag Dinsdag Woensdag Donderdag Vrijdag
8:00 - 9:00 Vergadering        
9:00 - 10:00     Afspraak dokter   Vertrek naar Londen
<table>
  <tr>
    <td> </td>
    <th scope="col">Maandag</th>
    <th scope="col">Dinsdag</th>
    <th scope="col">Woensdag</th>
    <th scope="col">Donderdag</th>
    <th scope="col">Vrijdag</th>
  </tr>
  <tr>
    <th scope="row">8:00 - 9:00</th>
    <td>Vergadering</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">9:00 - 10:00</th>
    <td> </td>
    <td> </td>
    <td>Afspraak dokter</td>
    <td> </td>
    <td>Vertrek naar Londen</td>
  </tr>
</table>

Hoe draagt dit bij aan een betere website?

Door gegevens die op meerdere manieren aan elkaar zijn gerelateerd in een correcte HTML-tabel te plaatsen zijn de relaties niet alleen visueel aanwezig, maar ook vastgelegd in de HTML-structuur. Dit is niet alleen nuttig voor bezoekers met hulptechnologie, maar kan ook gebruikt worden om de tabel op verschillende wijzen weer te geven. Zo worden tabellen soms op kleine schermen op een alternatieve wijze getoond, bijvoorbeeld met de kolommen onder elkaar. Door de juiste HTML-elementen te gebruiken kunnen de bijbehorende koppen eenvoudig bij elke kolom worden herhaald.

Bouwer of redacteur?

De bouwer is verantwoordelijk voor de mogelijkheid om met het CMS correcte HTML-tabellen aan te maken. Helaas kan dit bij complexe tabellen nog niet altijd via de editor. Als een redacteur zelf in de HTML-code een tabel aanmaakt, is hij verantwoordelijk voor een logische structuur en correct gebruik van de verschillende HTML-elementen.

Technische details

Hoort bij