Het gebruik van een tabel is soms essentieel voor de presentatie van informatie die onderling verband houdt. Ze zijn zichtbaar op websites en worden opgeslagen in de HTML-structuur. Zorg ervoor dat je de juiste HTML-elementen gebruikt.

Dit heeft een dubbel doel:

  1. het is essentieel voor bezoekers die behoefte hebben aan ondersteunende technologie.
  2. de informatie in de tabel, evenals de vorm, kan worden aangepast aan elk type ondersteuning (computer, tablet, smartphone).

Afbeelding van de correcte HTML-code voor tabellen

Hoe pas je dit toe?

De tabellen bestaan uit rijen (horizontaal) en kolommen (verticaal). Een van hun kenmerken is dat de gegevens daarin zowel horizontaal als verticaal aan elkaar gekoppeld zijn. Deze links zijn vaak duidelijk voor degenen die de tabel kunnen zien, dankzij de rij- en kolomstructuur.

De links moeten ook aanwezig zijn wanneer de tabel op een andere manier aan de bezoeker wordt gepresenteerd. Gebruik hiervoor de juiste HTML-elementen bij het maken van jouw tabel.

Deze zijn:

  • het <table> element voor de hele tabel
  • rij- en kolomkoppen worden aangeduid met het <th> element
  • rijen met het <tr> element
  • individuele velden met het <td> element.

Soms is er een knop in de editor waarmee een tabel kan worden aangemaakt.

Voorbeeld

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.

  Maandag Dinsdag Woensdag Donderdag Vrijdag
8:00 - 9:00 Vergadering        
9:00 - 10:00     Afspraak dokter   Vertrek naar Londen

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.

<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>

Voor redacteurs

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.

Voor ontwikkelaars

De bouwer is verantwoordelijk voor de mogelijkheid om met het CMS correcte HTML-tabellen aan te maken.