HTMLhulp.nl logo
Toegankelijke tabellen maken met HTML

Toegankelijke tabellen maken met HTML

Toegankelijke tabellen maken met HTML

Tabellen zijn een krachtig hulpmiddel om gestructureerde gegevens weer te geven. Denk aan prijstabellen, roosters of statistieken. Maar tabellen worden ook vaak verkeerd gebruikt, bijvoorbeeld om layout te bouwen in plaats van data te tonen. Dat maakt een site minder toegankelijk en moeilijker te onderhouden. In dit artikel leer je hoe je correcte en toegankelijke tabellen maakt met HTML, zodat ze bruikbaar zijn voor iedereen, inclusief schermlezers.

Wanneer gebruik je een tabel?

Gebruik een tabel alleen wanneer je gegevens in een grid of matrix wilt weergeven, dus met rijen en kolommen die samen een betekenis hebben. Voorbeelden:

  • Cijfers en statistieken

  • Vergelijkingen van producten

  • Agenda’s en roosters

  • Financiële data

Gebruik een tabel niet voor layout. Daarvoor heb je CSS.

De basis van een tabel in HTML

Een eenvoudige tabel ziet er zo uit:

<table>
<tr>
<th>Product</th>
<th>Prijs</th>
<th>Voorraad</th>
</tr>
<tr>
<td>Laptop</td>
<td>€999</td>
<td>Op voorraad</td>
</tr>
<tr>
<td>Muis</td>
<td>€25</td>
<td>Niet beschikbaar</td>
</tr>
</table>

  • <table>: start van de tabel.

  • <tr> (table row): een rij.

  • <th> (table header): een kolomtitel.

  • <td> (table data): een cel met inhoud.

Tabellen structureren met <thead>, <tbody> en <tfoot>

Voor grotere tabellen is het handig om de structuur te verduidelijken.

<table>
<thead>
<tr>
<th>Product</th>
<th>Prijs</th>
<th>Voorraad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>€999</td>
<td>Op voorraad</td>
</tr>
<tr>
<td>Muis</td>
<td>€25</td>
<td>Niet beschikbaar</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Prijzen zijn inclusief btw</td>
</tr>
</tfoot>
</table>

Hiermee kun je koppen, inhoud en voetnoten van elkaar scheiden.

Beschrijvende titel met <caption>

Elke tabel moet een korte titel hebben die uitlegt waar de tabel over gaat. Dit doe je met <caption>.

<table>
<caption>Overzicht van producten en voorraadstatus</caption>
...
</table>

Een screenreader leest deze caption voor als introductie van de tabel.

Toegankelijkheid: gebruik scope in headers

Bij grote tabellen is het soms onduidelijk welke kop bij welke cel hoort. Met het attribuut scope maak je dit duidelijk.

<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Prijs</th>
<th scope="col">Voorraad</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Laptop</th>
<td>€999</td>
<td>Op voorraad</td>
</tr>
<tr>
<th scope="row">Muis</th>
<td>€25</td>
<td>Niet beschikbaar</td>
</tr>
</tbody>
</table>

  • scope="col": deze header geldt voor een kolom.

  • scope="row": deze header geldt voor een rij.

Screenreaders lezen nu duidelijker de relatie tussen de cellen.

Complexe tabellen met headers en id

Bij tabellen met meerdere lagen van koppen is scope niet altijd genoeg. Dan gebruik je id en headers.

<table>
<caption>Verkoopcijfers 2025 per regio</caption>
<thead>
<tr>
<th id="kwartaal">Kwartaal</th>
<th id="noord">Noord</th>
<th id="zuid">Zuid</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="kwartaal">Q1</td>
<td headers="noord">€10.000</td>
<td headers="zuid">€8.000</td>
</tr>
<tr>
<td headers="kwartaal">Q2</td>
<td headers="noord">€12.000</td>
<td headers="zuid">€9.500</td>
</tr>
</tbody>
</table>

Zo weet een screenreader exact welke koppen bij elke cel horen.

Styling van tabellen

Een tabel moet niet alleen functioneel zijn, maar ook overzichtelijk. Met CSS kun je veel verbeteren.

table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}

th, td {
border: 1px solid #ddd;
padding: 0.75rem;
text-align: left;
}

th {
background: #f4f4f4;
}

tr:nth-child(even) {
background: #fafafa;
}

Met zebra-styling (wisselende rijen) maak je tabellen makkelijker leesbaar.

Responsieve tabellen

Een tabel kan op mobiel al snel te breed worden. Er zijn verschillende oplossingen:

Scrollbare tabel

.table-container {
overflow-x: auto;
}
<div class="table-container">
<table>...</table>
</div>

Stacken op mobiel

Een alternatieve oplossing is om tabellen op mobiel te “stapelen”. Dat vraagt meer CSS en soms JavaScript.

Veelgemaakte fouten met tabellen

  1. Tabellen gebruiken voor layout in plaats van data.

  2. Geen <th> gebruiken, alleen <td>.

  3. Geen titel of beschrijving toevoegen.

  4. Koppen niet koppelen aan cellen bij complexe tabellen.

  5. Te kleine tekst en weinig witruimte.

Tips voor toegankelijke tabellen

  • Gebruik altijd <caption> om context te geven.

  • Pas scope, headers en id toe bij complexe structuren.

  • Zorg dat tabellen ook zonder CSS logisch blijven.

  • Maak tabellen niet te breed en overweeg scrollbare containers.

  • Test tabellen met een schermlezer om de toegankelijkheid te checken.

Met de juiste HTML en een beetje CSS kun je tabellen maken die niet alleen overzichtelijk zijn, maar ook volledig toegankelijk en bruikbaar voor iedereen.