Semantische tabellen

Probleem

Deze elementen helpen mensen die schermlezers gebruik en ze stellen je ook in staat om deze gedeelten met CSS anders vorm te geven dan de rest van de tabel.

Design

<thead>

De koppen van de tabel moet je in het element <thead> zetten. We hebben tot nu toe iets over het hoofd gezien, namelijk semantisch aangeven dat de eerste rij de koptekst van de tabel is. Die hele eerste rij bevat geen gegevens, het zijn de titels van kolommen. We kunnen dat doen met het <thead> element, waarin de eerste <tr> is opgenomen. Het kunnen er zoveel rijen zijn als je maar wilt.

<tbody>

De body, de eigenlijke gegevens, staat in het element <tbody>.

<tfoot>

Naast het <thead> en <tbody> is er ook het <tfoot> element om de rijen in te stoppen, die tot de voettekst van de tabel behoren.

Gebruik <tfoot> om semantisch aan te duiden deze rijen geen gegevens bevatten maar informatie over de gegevens.

Let op de plaats waar <tfoot> staat, namelijk na <thead> en vóór <tbody>!

Je zou verwachten dat <tfoot> na <tbody> komt. Door <tfoot> voor <tbody> te zetten wordt de toegankelijkheid vergroot, aangezien de voettekst informatie kan bevatten om het geheel van de tabel te begrijpen.

Je kan <tfoot> gebruiken om bijvoorbeeld de header te herhalen onderaan de tabel in het geval van een visueel zeer hoge/lange tabel.