Tabellen

Een busdienstregeling is een tabel: elke cel is alleen begrijpelijk samen met de rij- en kolomkop.

Tabellen zijn voor gegevens

Gebruik een tabel als informatie rijen en kolommen heeft: een dienstregeling, een prijslijst, de uitkomsten van een enquête. Eind jaren 1990 gebruikten veel sites tabellen om hele pagina-indelingen te bouwen, met menu's in de ene cel en inhoud in de andere. Dat geeft echte problemen. Schermlezers melden elke cel met zijn rij en kolom, dus een indelingstabel klinkt als een verwarrend rekenblad, en tabelindelingen passen zich slecht aan op kleine schermen. Tegenwoordig doet CSS de indeling, en tabellen zijn voor gegevens.

Rijen, cellen en koppen

Een tabel wordt rij voor rij opgebouwd. <table> omsluit alles, elke <tr> (table row) is een rij, en binnen een rij is elke <td> (table data) een cel. Cellen die een rij of kolom een naam geven, gebruiken in plaats daarvan <th> (table header), dat browsers standaard vet en gecentreerd tonen. Het aantal cellen in elke rij moet kloppen, zodat de kolommen op één lijn staan.

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

Laat de tabel zichzelf uitleggen

Drie toevoegingen maken van een raster van cellen een tabel die iedereen kan lezen. Ten eerste geeft <caption>, direct na de openende tag <table>, de tabel een titel; schermlezers melden hem vóór de inhoud, zodat de luisteraar weet waar de tabel over gaat. Ten tweede zegt het attribuut scope op elke <th> of hij een kolom (scope="col") of een rij (scope="row") benoemt. Daarmee kan een schermlezer Rye, Price, 5.00 voorlezen in plaats van een kale 5.00. Ten derde groeperen <thead>, <tbody> en <tfoot> de kopregels, de inhoudsrijen en eventuele totaalrijen. Ze maken de structuur duidelijk, helpen CSS om elk deel op te maken en laten browsers de kop op elke afgedrukte pagina van een lange tabel herhalen.

Cellen die meerdere plaatsen beslaan

Een cel kan zich met colspan over meerdere kolommen uitstrekken of met rowspan over meerdere rijen. In een weekrooster kan een lunchpauze die alle vijf werkdagen beslaat één cel zijn met colspan="5". Beslaat een cel meerdere plaatsen, dan heeft de rij waarin hij zit minder cellen nodig: heeft een rij normaal 6 cellen en heeft een daarvan colspan="5", dan bevat die rij in de HTML maar 2 cellen. Gebruik samenvoegen als het de gegevens weerspiegelt; heel complexe tabellen zijn voor iedereen moeilijk te lezen, dus één grote tabel splitsen in twee eenvoudiger tabellen is vaak beter.

Brede tabellen kunnen op telefoons een probleem zijn. Een tabel kan niet afbreken zoals tekst, dus een tabel met veel kolommen kan breder zijn dan het scherm. Een gebruikelijke oplossing is de tabel in een element te zetten dat met CSS zelf zijwaarts scrolt, zodat de rest van de pagina niet ook breder wordt.

Houd de gegevens in elke cel zo gewoon mogelijk: één waarde per cel, eenheden in de kop (Prijs in euro's) in plaats van in elke cel herhaald, en geen lege cellen als vulling. Een tabel op die manier is makkelijker voor te lezen, makkelijker te sorteren en plakt netjes in een rekenblad.