13. Tabellen
Eenvoudige tabellen zijn handig om informatie kort en overzichtelijk weer te geven. Een ingewikkelde tabel is echter moeilijk om semantisch goed op te maken en kun je daarom beter omzetten naar een of meerdere eenvoudige tabellen.
13.1 Html-code
Voor dit onderdeel is het handig iets van html-code te begrijpen. Een uitleg vind je ook in ons e-book Webtechniek.
Hieronder de code van een eenvoudige tabel.<table>
<tr>
<th>Gewonnen</th>
<th>Verloren</th>
</tr>
<tr>
<td>12</td>
<td>4</td>
</tr>
</table>De tabel ziet er zo uit:
| Gewonnen | Verloren |
|---|---|
| 12 | 4 |
Een tabel kent de volgende code:
- <table> en </table>: start- en eindtag van de tabel
- <tr> en </tr>: start- en eindtag van een rij
- <th> en </th>: start- en eindtag van een kolomkop (table header)
- <td> en </td>: start- en eindtag van een gewone cel (table data)
Hopelijk schrik je niet van deze code. Gebruik het anders even als naslaginfo als je zo met de tabellen aan de slag gaat.
13.2 Eenvoudige 2-kolomstabel zonder rij- en kolomkoppen
Bij een eenvoudige tabel met 2 kolommen hoef je soms geen kolomkoppen te gebruiken. Hieronder een voorbeeld van het gebruik van een tabel om de openingstijden aan te geven.
| Maandag | 9.00 - 17.00 uur |
| Dinsdag | 9.00 - 13.00 uur |
| Woensdag | 9.00 - 17.00 uur |
| Donderdag | 9.00 - 21.00 uur |
| Vrijdag | 9.00 - 13.00 uur |
Mooier is het om dan ook de lijntjes in de tabel weg te laten:
| Maandag | 9.00 - 17.00 uur |
| Dinsdag | 9.00 - 13.00 uur |
| Woensdag | 9.00 - 17.00 uur |
| Donderdag | 9.00 - 17.00 uur |
| Maandag | 9.00 - 17.00 uur |
| Maandag | 9.00 - 17.00 uur |
Omdat de tabel hier gebruikt wordt voor opmaak en niet voor het presenteren van data, moet je dit voor de screenreader nog wel aangeven in de code. Dit doe je door als 'presentatie' als rol aan de tabel toe te voegen. Tja, dit is wel erg cryptisch, we laten de code zien:
<table role="presentation">13.3 Tabel met alleen kolomkoppen
Hieronder zie je een voorbeeld van een mooi opgemaakte tabel met de kosten van een paspoort:
De tabel heeft 2 kolommen. Elke kolom heeft een kolomkop. Voor de ziende mens is deze tabel duidelijk, maar hoe maak je nu aan Google en gebruikers van screenreaders duidelijk dat 'Soort paspoort' hoort bij elke 1e cel van elke regel?
Dit doe je in 2 stappen:
- Gebruik een 'table header', een <th> voor de kolomkop
- Geef met het attribuut 'scope' aan of het een kolom of een rij is.
De gewone cellen hebben de opmaak 'table data', in html een <td>. In onderstaande afbeelding zie je dat verder uitgewerkt.
De kop van een tabel kun je boven (en buiten) de tabel zetten. Geef deze een heading (bijvoorbeeld h2 of h3) mee.
Met een eenvoudige tabel met 2 kolommen is dit alles wat je hoeft te doen om deze semantisch goed op te maken. En deze dus goed vindbaar én toegankelijk te maken.
13.4 Tabel met kolomkoppen en rij-koppen
Iets complexer is een tabel waarbij je ook rij-koppen gebruikt. Het idee is hetzelfde: de koppen van de rijen krijgen ook een <th>-opmaak en elke th geef je ook een scope-attribuut mee. Als je het scope-attribuut vergeet, dan zien sommige screenreaders geen kolomkoppen!
| <td></td> | <th scope="col">Mannen</th> | <th scope="col">Vrouwen</th> |
|---|---|---|
| <th scope="row">Lengte</th> | <td>183 cm</td> | <td>176 cm</td> |
| <th scope="row">Gewicht</th> | <td>84 kg</td> | <td>72 kg</td> |
Let er op dat de cel linksboven geen <th>-opmaak heeft, dat is namelijk gewoon een lege cel.
13.5 Voorbeeld niet goed opmaakte tabel
Hieronder nog een voorbeeld van een tabel die niet goed is. Kijk anders eerst even naar de tabel. Zie je wat er niet goed is?
Het probleem zit hier in de tussenzinnen 'Voor de eerste 300 m3 afgevoerd water' en 'Voor iedere m3 boven de 300 m3 afgevoerd water'.
Deze tabel kan gesplitst worden in 2 tabellen, waarbij beide zinnen boven elke tabel staan. Misschien is afkorting en code ook niet nodig, dus overleg met de maker van de tabel kan ook handig zijn.