13. Tabellen
Eenvoudige tabellen zijn handig om informatie kort en overzichtelijk weer te geven. We maken onderscheid tussen 3 soorten tabellen: eenvoudige, tabellen met samengevoegde cellen en complexe tabellen. Die laatste kun je beter vermijden.
13.1 Soorten tabellen
Als het gaat over toegankelijkheid is het zinvol om onderscheid te maken tussen 4 soorten tabellen:
- Tabellen voor opmaak
- Eenvoudige tabellen
- Tabellen met samengevoegde cellen
- Complexe tabellen
We gaan ze hieronder allemaal uitleggen, maar beginnen met een korte uitleg van de html.
Tip: de HTML Table Generator is een hele handige tool waarmee je de html-code van een tabel genereert. Die code kun je dan plakken in je cms.
13.2 Html-code
Voor dit onderdeel is het handig iets van html-code te begrijpen. Een uitleg vind je ook in het hoofdstuk HTML in ons e-book Webtechniek.
Hieronder de code van een eenvoudige tabel.<table>
<caption>Huidige stand</caption>
<tr>
<th scope="col">Gewonnen</th>
<th scope="col">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
- <caption> en </caption>: start- en eindtag van de caption, de titel van de tabel
- <tr> en </tr>: start- en eindtag van een rij (table row)
- <th> en </th>: start- en eindtag van een kolomkop (table header)
- scope: om aan te geven of een th hoort bij een kolom of een rij
- <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.3 Tabel voor opmaak: geen 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 - 21.00 uur |
Maandag | 9.00 - 17.00 uur |
Maandag | 9.00 - 13.00 uur |
Omdat de tabel hier gebruikt wordt voor opmaak en niet voor het presenteren van data, gebruik je geen <caption> én moet je aangeven dat de tabel bedoeld is voor lay-out. Dit doe je door 'presentation' als rol aan de tabel toe te voegen. Tja, dit is wel erg cryptisch, we laten de code zien:
<table role="presentation">
13.4 Eenvoudige tabellen met rij en/of kolomkoppen
Een eenvoudige tabel heeft:
- 1 rij met kolomkoppen OF
- 1 kolom met rijkoppen OF
- 1 rij met kolomkoppen EN 1 kolom met rijkoppen
Hieronder zie je een voorbeeld van een mooi opgemaakte tabel met kolomkoppen:
De tabel heeft 2 kolommen: Soort paspoort en Prijs. De juiste HMTL-code is:
<th scope="col">Soort paspoort</th>
<th scope="col">Prijs</th>
De gewone cellen hebben de code <td> voor 'table data'.
De kop van een tabel kun je maken met een caption (in de tabel) of met een heading net boven de tabel.
Gebruik je kolom- én rijkoppen? Geen probleem, het idee is hetzelfde: de koppen van de rijen en de kolommen geef je een <th>-opmaak en elke th geef je ook een scope-attribuut mee: 'row' voor de rijkoppen en 'col' voor de kolomkoppen. Vergeet niet het scope-attribuut, anders zien sommige screenreaders geen kolomkoppen!
Hieronder een voorbeeld van een tabel met rij- én kolomkoppen:
Mannen | Vrouwen | |
---|---|---|
Lengte | 183 cm | 176 cm |
Gewicht | 84 kg | 72 kg |
De code ziet er dan als volgt uit:
<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 Tabellen met samengevoegde cellen
De tabel hierboven kunnen we ook iets anders opmaken door cellen samen te voegen:
Mannen | Vrouwen | ||
---|---|---|---|
Lengte | Gewicht | Lengte | Gewicht |
183 cm | 176 cm | 84 kg | 72 kg |
Je hebt daar een nieuw HTML-attribuut voor nodig: colspan. Met colspan="2" geef je aan de de kolomkop geldt voor 2 kolommen:
<th scope="col" colspan="2">Mannen</th>
13.6 Complexe tabellen
Soms zijn tabellen complexer dan die we hierboven beschreven. Er is hier wel een HTML-techniek voor - koppeling met header-id - maar die werkt niet goed in alle schermlezers. Probeer daarom complexe tabellen te voorkomen. Vaak kun je het beste de complexe tabel splitsen in meerdere kleine tabellen.