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.

Omslag van ''

13.1 Soorten tabellen

Als het gaat over toegankelijkheid is het zinvol om onderscheid te maken tussen 4 soorten tabellen:

  1. Tabellen voor opmaak
  2. Eenvoudige tabellen
  3. Tabellen met samengevoegde cellen
  4. 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.

Maandag9.00 - 17.00 uur
Dinsdag9.00 - 13.00 uur
Woensdag9.00 - 17.00 uur
Donderdag9.00 - 21.00 uur
Vrijdag9.00 - 13.00 uur

Mooier is het om dan ook de lijntjes in de tabel weg te laten:

Maandag9.00 - 17.00 uur
Dinsdag9.00 - 13.00 uur
Woensdag9.00 - 17.00 uur
Donderdag9.00 - 21.00 uur
Maandag9.00 - 17.00 uur
Maandag9.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:

Goed opgemaakte tabel met kolomkoppen (gemeente Vught)

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.

Wat vind je van dit hoofdstuk?

Naar boven