Home > Aan de slag > Tabellen

Een tabel is een verzameling informatie die is opgedeeld in cellen. Deze cellen zijn verdeeld over rijen en kolommen waarin de relatie tussen de individuele cellen duidelijk wordt. Op het web worden tabellen gebruikt voor dezelfde doeleinden als in andere media, het relationeel weergeven van informatie.

Vanwege de karakteristieken van tabellen, het weergeven van informatie in rijen en kolommen, lenen ze zich bovendien uitstekend voor het creëren van lay-outs. Sommige webontwikkelaars weten niet beter dan dat tabellen hiervoor bedoeld zijn.

Inhoudsopgave

Tabellen voor relationele informatie

Een toepassing van tabellen op het web is het relationeel weergeven van informatie via rijen en kolommen. Dit worden wel datatabellen genoemd. Voorbeelden van informatie die relationeel kan worden weergegeven zijn vertrek- en aankomsttijden, planningsschema’s of overzichten van onderzoeksgegevens. Het gebruik van tabellen voor relationele informatie, en niet voor lay-out, wordt voorgeschreven door webrichtlijn R-pd.11.1: Gebruik tabellen voor het weergeven van relationele informatie en niet voor lay-out.

Anatomie van een tabel voor relationele informatie

De basis voor tabel markup is het table element. Hierbinnen wordt een markup aangebracht voor rijen – het tr (table row) element – en in elke rij vervolgens afzonderlijke cellen, via het td (table data) element. In deze cellen wordt de informatie geplaatst.

Voorbeeld van een eenvoudige tabel (HTML)

  1. <table>
  2.   <tr>
  3.     <td>Cel 1 in rij 1</td>
  4.     <td>Cel 2 in rij 1</td>
  5.   </tr>
  6.   <tr>
  7.     <td>Cel 1 in rij 2</td>
  8.     <td>Cel 2 in rij 2</td>
  9.   </tr>
  10. </table>

In dit voorbeeld van een tabel met vier cellen – twee rijen met elk twee cellen – zijn twee kolommen aanwezig. Deze kolommen worden impliciet aangegeven door de hoeveelheid cellen die in een rij staan.

Cel 1 in rij 1 heeft een niet nader beschreven verhouding met cel 2 in rij 1, omdat deze zich in dezelfde rij bevinden. Ook heeft cel 1 in rij 1 een verhouding met cel 1 in rij 2, omdat beide in de eerste kolom voorkomen.

Labels voor kolommen en rijen

Voor het beschrijven van de inhoud van een kolom of rij is er een variant op het td element: het th (table header) element. Een th element labelt de kolom of rij waarin hij voorkomt. In het voorbeeld hierboven kan voor alle andere rijen een rij worden toegevoegd, die alleen th elementen bevat.

Gerelateerde richtlijnen
  • R-pd.11.2: Gebruik het th (table header) element voor het beschrijven van een kolom of rij in een tabel met relationele informatie.

Kolom- en rijlabels groeperen

Als een rij enkel th cellen bevat, kan men deze rij omsluiten door <thead></thead> markup. Het thead (table head) element maakt browsers duidelijk dat dit een selectie met kolomlabels is.

Gerelateerde richtlijnen
  • R-pd.11.3: Groepeer rijen met alleen th (table header) cellen met het thead (table head) element. Groepeer de rest van de tabel met het tbody (table body) element.

Toegankelijkheid en tabellen

Een tabel is een handige, maar vaak ook complexe vorm van informatie. Het kost een bezoeker inspanning alle individuele informatie in de tabel in het juiste verband te zien. Voor bezoekers die blind zijn, is het een nog grotere opgave. Zij moeten zich immers een mentaal beeld van de tabel vormen, omdat ze zich deze niet kunnen visualiseren. Webontwikkelaars en contentbeheerders kunnen de toegankelijkheid van tabellen voor deze groep bezoekers vergroten.

Schermleesprogramma’s en brailleleesregels lopen stapsgewijs, van begin tot einde, door een tabel heen. Zonder interventie van de gebruiker draagt een dergelijk programma cel voor cel de inhoud voor. Als het programma kan vaststellen wat de labels zijn voor een kolom of een rij, kunnen deze geassocieerd worden met de individuele cellen.

Gebruikers kunnen ook het programma verzoeken om de inhoud van een specifieke cel. Bijvoorbeeld ‘Het deelnemersaantal van de activiteit Voorlichtingsavond stadsrenovatie.

De belangrijkste start voor het toegankelijk maken is al gedaan: het gebruik van cellen voor informatie (td) en cellen voor labelling (th).

Tabellabels associëren met rijen of kolommen: het scope attribuut

Table header (th) cellen vormen een label voor zowel een rij als een kolom. Visueel is te onderscheiden dat het label geldt voor een kolom óf een rij, maar als de tabel stap voor stap (seriëel) wordt voorgedragen, is dit minder duidelijk. Daarvoor is het scope attribuut bedacht. Dit attribuut op een th cel vertelt het schermleesprogramma of de brailleregel dat het label geassocieerd moet worden met een rij of kolom.

Gerelateerde richtlijnen
  • R-pd.11.2: Gebruik het th (table header) element voor het beschrijven van een kolom of rij in een tabel met relationele informatie.

Tabellabels en complexe associaties: het headers attribuut

Meestal zal het gebruik van het scope attribuut voldoende zijn om tabellabels te associëren met kolommen of rijen. Soms is de constructie echter zo complex dat dit attribuut niet langer volstaat. Er kan dan een expliciete relatie tussen specifieke cellen en tabellabels gelegd worden door middel van het headers attribuut en het id attribuut.

Gerelateerde richtlijnen
  • R-pd.11.5: Gebruik het header en id attribuut voor het associëren van tabellabels (th cellen) met individuele cellen in complexe tabellen.

Tabellabels afkorten

Soms kunnen tabellabels vrij lang worden, zoals “Werkzaamheden in de Randstad en omstreken”. Het kan voor een gebruiker verwarrend of irriterend werken als dit label door het schermleesprogramma of brailleregel wordt voorgedragen voor elke cel die hiermee wordt geassocieerd. th cellen kunnen het abbr attribuut meekrijgen waaraan een afgekorte versie van het label kan worden meegeven.

Gerelateerde richtlijnen
  • R-pd.11.6: Geef afkortingen voor tabellabels (th cellen) via het abbr (abbreviation) attribuut wanneer de lengte van de inhoud van het tabellabel zodanig van lengte is dat herhaling in een spraakbrowser irritatie kan wekken.

De inhoud van tabellen samenvatten

Voor niet-blinde gebruikers is gemakkelijk snel te zien waar een tabel over gaat. Dit geldt niet voor blinde gebruikers. Via het summary attribuut op de <table> tag, is het mogelijk blinde gebruikers (maar ook zoek-spiders) te voorzien van een korte beschrijving van een tabel.

Het summary attribuut (HTML)
  1. <table summary="Een agenda van de internationale activiteiten van gemeente Den Haag voor de komende 6 maanden">

Tabellen en titels

Niet elke tabel heeft een samenvatting nodig. Een goede kopregel boven een tabel kan net zo beschrijvend zijn, zowel voor blinden als niet-blinden. Hiervoor is een heading element te gebruiken (h1 tot en met h6), maar er is ook een element dat speciaal voor tabellen is gemaakt: het caption element.

Naar boven


Tabellen voor lay-out

De aard van tabellen – het opdelen van informatie in rijen en kolommen – leent zich uitstekend voor het creëren van een paginalay-out. Om deze reden werden tabellen ingezet voor het visuele ontwerp van websites in een tijd dat technische mogelijkheden hiervoor zeer beperkt waren. Deze truc wordt tegenwoordig – in vergelijking tot alternatieve lay-outtechnieken – nog steeds het meest toegepast.

Voor- en nadelen van tabellen voor lay-out

Als voordelen worden gezien:

  • Het concept is relatief eenvoudig te begrijpen door webontwikkelaars. Tabellen passen in het idee van markup voor vormgeving, een idee waar (helaas) nog steeds in wordt onderwezen. De meeste webontwikkelaars zijn ook handiger in het creëren van een lay-out via tabellen dan via het alternatief CSS (Cascading Style Sheets).
  • De meeste ontwikkelsoftware biedt vergaande ondersteuning voor het creëren van lay-out via tabellen. De ondersteuning voor het creëren van lay-out via CSS is de afgelopen jaren gelukkig wel sterk verbeterd.
  • Tabellen voor lay-out ‘werken’. Via tabellen kunnen webontwikkelaars een visueel aantrekkelijke lay-out creëren die zelfs in oude browsers wenselijke effecten geeft. Wanneer alleen de lay-out telt, lijkt er geen bezwaar te zijn hiervoor tabellen te gebruiken.

Nadelen

  • Tabellen voor lay-out voldoen niet aan het principe van Scheiding tussen structuur en vormgeving.Bovendien wordt tabel-markup gebruikt voor het markeren van inhoud in cellen die geen onderlinge relatie hebben; de markup beschrijft niet de inhoud. Zie ook Waarom is beschrijvende markup belangrijk?.
  • Tabellen voor lay-out zijn inflexibel in vergelijking tot CSS. CSS maakt het mogelijk inhoud in de lay-out te plaatsen ongeacht plaats in de broncode van het document. Tabellen bieden deze mogelijkheid niet: de volgorde in de markup van de tabel dicteert de beperkingen voor de lay-out van het document.
  • Tabellen voor lay-out kosten webontwikkelaars meer tijd. De lay-out van de site is verwerkt in de markup van de afzonderlijke pagina’s en niet, zoals bij CSS, gebundeld in één afzonderlijk bestand. Daarom moet bij de creatie en wijziging van deze pagina’s rekening worden gehouden met deze markup. Zulke aanpassingen zijn sneller uit te voeren in één CSS bestand.
    Ook kunnen door de scheiding tussen structuur en vormgeving de webontwikkelaar, contentbeheerder en eventueel de programmeur vrijwel onafhankelijk van elkaar aan een website werken.
  • Tabellen voor lay-out brengen een probleemloos onderhoud van de inhoud in het geding. Iedereen die met de inhoud van de pagina in aanraking komt ” contentbeheerders en webontwikkelaars ” moet de tabel-markup mijden of beheersen. Verkeerd gebruik van tabel markup zal al snel leiden to beschadiging ervan en dus tot inconsistentie in de lay-out. Hoewel het beheersen van tabellen voor lay-out door één individu een niet bijster grote uitdaging is, heeft het een steilere leercurve dan eenvoudige, beschrijvende markup.
  • Indien onnadenkend toegepast, kunnen tabellen voor lay-out de toegankelijkheid van een pagina belemmeren.

Naar boven