Tabellen zijn een goede manier om complexe gegevens overzichtelijk weer te geven. Als ze goed zijn opgemaakt dan zijn tabellen door iedereen goed te gebruiken. Zorg daarom dat de tabellen gebruik maken van de juiste elementen in de code. Als de relaties tussen de gegevens ook in de code staan dan kan een schermlezer, zoals voorleessoftware of een brailleleesregel, de informatie uit de tabel op een logische manier presenteren.
In dit artikel staan handvatten voor het maken van een toegankelijke tabel.
Tabellen gebruiken
Een tabel kan in een CMS meestal makkelijk worden toegevoegd in de editor op de pagina. Geef aan welke cellen tabelkoppen zijn en in welke cellen gegevens staan.
Gebruik tabellen alleen als het de informatie duidelijker maakt. Zorg voor simpele en overzichtelijke tabellen.
Code voor tabellen
Tabellen worden in de code opgemaakt met het <table>-element. Dit element heeft onderliggende <tr>-, <th>-, en <td>-elementen:
- Het
<tr>-element wordt gebruikt voor een tabelrij. - Het
<th>-element wordt gebruikt voor een tabelkop. - Gegevenscellen worden opgemaakt met
<td>-elementen.
Het <caption>-element geeft de inhoud van de tabel in het kort weer. Het <caption>-element is optioneel.
Eenvoudige tabellen
In eenvoudige tabellen, zoals een tabel met 1 kolom of 1 rij met koppen, kan hulptechnologie de onderlinge relaties zelf bepalen. Gebruik de juiste HTML-elementen voor de tabelkoppen en de gegevenscellen.
Voorbeeld van een tabel met 1 kolom met koppen:
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<tr>
<th>Tabelkop van rij 1</th>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
</tr>
<tr>
<th>Tabelkop van rij 2</th>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
</table>Voorbeeld van een tabel met 1 rij met koppen:
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<tr>
<th>Tabelkop van kolom 1</th>
<th>Tabelkop van kolom 2</th>
</tr>
<tr>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
</tr>
<tr>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
</table>Complexe tabellen
Sommige tabellen zijn wat moeilijker. Bijvoorbeeld doordat er koppen in 2 richtingen staan. In deze tabellen moet in de code expliciet worden aangegeven welke kop bij welke cellen hoort. Dit kan met het scope-attribuut of het headers-attribuut.
scope-attribuut
Gebruik het scope-attribuut om aan te geven welke cellen bij de kop horen. Voeg het scope-attribuut toe aan de tabelkop van een rij of kolom. Het attribuut kan de waarde row of col hebben:
scope="col": Geeft aan dat de cel een kop is voor de kolom.scope="row": Geeft aan dat de cel een kop is voor de rij.
Voorbeeld van een tabel met 1 kolom en 1 rij koppen met het scope-attribuut:
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<tr>
<td></td>
<th scope="col">Tabelkop van kolom 1</th>
<th scope="col">Tabelkop van kolom 2</th>
</tr>
<tr>
<th scope="row">Tabelkop van rij 1</th>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
</tr>
<tr>
<th scope="row">Tabelkop van rij 2</th>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
</table>headers-attribuut
Gebruik het headers-attribuut om aan te geven welke kop bij de cel hoort. Dit kunnen meerdere koppen zijn. Het headers-attribuut koppelt de cel met het id-attribuut aan de cel.
Let op: Het headers-attribuut wordt niet breed ondersteund door schermlezers.
Voorbeeld van een tabel met 1 kolom en 1 rij koppen met het headers-attribuut:
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<tr>
<td></td>
<th id="kolom1">Tabelkop van kolom 1</th>
<th id="kolom2">Tabelkop van kolom 2</th>
</tr>
<tr>
<th id="rij1">Tabelkop van rij 1</th>
<td headers="rij1 kolom1">Gegevenscel 1</td>
<td headers="rij2 kolom1">Gegevenscel 2</td>
</tr>
<tr>
<th id="rij2">Tabelkop van rij 2</th>
<td headers="rij2 kolom1">Gegevenscel 3</td>
<td headers="rij2 kolom2">Gegevenscel 4</td>
</tr>
</table>Nog complexere tabellen
Het is mogelijk om complexere tabellen te gebruiken. Bijvoorbeeld met koppen voor meerdere rijen en kolommen. Pas hier wel wel op; met te veel informatie in een tabel kan het onoverzichtelijk worden. Kies dan liever voor 2 of meerdere eenvoudige tabellen.
<thead>-, <tbody>- en <tfoot>-elementen
Voor het opbouwen van een tabel met meerdere rijen met koppen kunnen <thead>-, <tbody>-, en <tfoot>-elementen worden gebruikt.
- Het
<thead>-element wordt gebruikt voor de rijen met koppen. - Het
<tbody>-element wordt gebruikt voor de rijen met gegevenscellen. - Gebruik het
<tfoot>-element voor het resultaat van de bovenliggende gegevenscellen.
De <thead><tbody><tfoot>
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<thead>
<tr>
<td rowspan="2"></td>
<th colspan="2">Tabelkop van kolom 1 en 2</th>
<th colspan="2">Tabelkop van kolom 3 en 4</th>
</tr>
<tr>
<th scope="col">Tabelkop van kolom 1</th>
<th scope="col">Tabelkop van kolom 2</th>
<th scope="col">Tabelkop van kolom 3</th>
<th scope="col">Tabelkop van kolom 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tabelkop van rij 1</th>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
<tr>
<th scope="row">Tabelkop van rij 2</th>
<td>Gegevenscel 5</td>
<td>Gegevenscel 6</td>
<td>Gegevenscel 7</td>
<td>Gegevenscel 8</td>
</tr>
</tbody>
<tfoot>
<th scope="row">Tabelkop van rij 3</th>
<td>Som gegevens 1 en 5</td>
<td>Som gegevens 2 en 6</td>
<td>Som gegevens 3 en 7</td>
<td>Som gegevens 4 en 8</td>
</tfoot>
</table>De <thead>-, <tbody>-, en <tfoot>-elementen kunnen ook worden gebruikt in eenvoudige tabellen.
colgroup-attribuut en rowgroup-attribuut
Als een kop geldt voor meerdere kolommen of rijen, gebruik dan de waarden:
scope="colgroup": Geeft aan dat de cel een kop is voor meerdere kolommen.scope="rowgroup": Geeft aan dat de cel een kop is voor meerdere rijen.
Om deze opzet goed te gebruiken moet eerst de kolomstructuur worden vastgelegd. Deze wordt aan het begin van de tabel gedefinieerd met het <colgroup>-element. Hierin wordt een kolom gedefinieert met het <col>-element. Zorg dat de som van het totaal aantal vastgelegde kolommen gelijk is aan het aantal kolommen in de tabel.
Het <col>-element kan ook goed gebruikt worden om stijlkenmerken toe te voegen aan een kolom.
<table>
<caption>Beschrijving van de tabelgegevens</caption>
<colgroup>
<col span="2">
<col span="2" style="background-color:tomato;">
<col span="2">
</colgroup>
<tr>
<td rowspan="2" colspan="2"></td>
<th colspan="2" scope="colgroup">Tabelkop van kolom 1 en 2</th>
<th colspan="2" scope="colgroup">Tabelkop van kolom 3 en 4</th>
</tr>
<tr>
<th scope="col">Tabelkop van kolom 1</th>
<th scope="col">Tabelkop van kolom 2</th>
<th scope="col">Tabelkop van kolom 3</th>
<th scope="col">Tabelkop van kolom 4</th>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">Tabelkop van rij 1 en 2</th>
<th scope="row">Tabelkop van rij 1</th>
<td>Gegevenscel 1</td>
<td>Gegevenscel 2</td>
<td>Gegevenscel 3</td>
<td>Gegevenscel 4</td>
</tr>
<tr>
<th scope="row">Tabelkop van rij 2</th>
<td>Gegevenscel 5</td>
<td>Gegevenscel 6</td>
<td>Gegevenscel 7</td>
<td>Gegevenscel 8</td>
</tr>
</table>Deze tabel ziet er zo uit:
| Tabelkop van kolom 1 en 2 | Tabelkop van kolom 3 en 4 | ||||
|---|---|---|---|---|---|
| Tabelkop van kolom 1 | Tabelkop van kolom 2 | Tabelkop van kolom 3 | Tabelkop van kolom 4 | ||
| Tabelkop van rij 1 en 2 | Tabelkop van rij 1 | Gegevenscel 1 | Gegevenscel 2 | Gegevenscel 3 | Gegevenscel 4 |
| Tabelkop van rij 2 | Gegevenscel 5 | Gegevenscel 6 | Gegevenscel 7 | Gegevenscel 8 | |
Grote tabellen
Voeg een horizontale scroll toe als een webpagina niet breed genoeg is om de inhoud van een tabel volledig weer te geven. Deze wordt toegevoegd in de code. Voeg hiervoor overflow-x:auto toe aan de stijlkenmerken van de container rondom de tabel.
Zorg dan ook dat de horizontale scroll van de tabel met het toetsenbord te bereiken en bedienen is. Dit wordt gedaan met het tabindex-attribuut.
<div style="overflow-x:auto;" tabindex="0">
<table>
...
</table>
</div>