R-pd.11.2

Labels voor kolommen en rijen met th

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. Hierdoor kunnen gebruikers van hulptechnologieën informatie in een tabelcel koppelen aan de rij- en kolomheader.

Voorbeelden

Voorbeeld van gebruik van het th element voor twee kolommen (HTML)

Door deze toevoeging wordt het duidelijk (zichtbaar) wat de informatie in de kolommen Activiteit en Deelnemersaantal betekent. Op de horizontale as (rij) zal een bezoeker nu een individuele activiteit met het deelnemersaantal associëren.

Er kan ook een label voor een rij worden aangegeven door een table header te gebruiken als eerste cel in een rij.

Voorbeeld van gebruik van het th element voor een rij (HTML)

Als in het voorbeeld een nieuwe th cel zou worden toegevoegd, zou in de rij met kolomlabels, bovenaan in de tabel, ook een extra cel moeten worden toegevoegd, om de impliciete kolomindeling intact te behouden. Omdat de desbetreffende kolom alleen th cellen bevat, volstaat het om deze cel met een spatie te vullen of leeg te laten: <td></td>.

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. Zie 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.

Cellen die meerdere rijen of kolommen beslaan

In het gebruikte voorbeeld is het goed mogelijk dat er zich meerdere activiteiten in een zelfde week voordoen. th markup die deze week markeert, zou dan van toepassing moeten zijn op meerdere rijen met activiteiten. Hier voor staat webontwikkelaars het rowspan attribuut ter beschikking.

Het rowspan attribuut (HTML)

Het verraderlijke aan het gebruik van het rowspan attribuut is dat een cel ineens de ruimte inneemt van meerdere cellen waardoor in de daaropvolgende rijen de hoeveelheid cellen verschilt met die in andere rijen. Deze moeilijkheid geldt ook bij het gebruik van het colspan attribuut, waarmee een cel meerdere kolommen kan beslaan.

Natuurlijk kan ook een td cel meerdere rijen of kolommen beslaan – en daardoor geassocieerd worden met meer dan één rij of kolom. In de praktijk is dit echter zelden nodig. Het kan bovendien visueel verwarrend werken. Het is namelijk voor een bezoeker niet meteen duidelijk welke relatie deze cel heeft met andere cellen.

Links en referenties

• Aan de slag: Tabellen

Gerelateerde richtlijnen

• R-pd.2.9: Bouw een website volgens de Web Content Accessibility Guidelines (WCAG  1.0) van het W3C.
• R-pd.11.1: Gebruik tabellen voor het weergeven van relationele informatie en niet voor lay-out.
• 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.
• R-pd.11.4: Gebruik het scope attribuut voor het associëren van tabellabels (th cellen) met kolommen of rijen.
• R-pd.11.5: Gebruik het headers en id attribuut voor het associëren van tabellabels (th cellen) met individuele cellen in complexe tabellen.
• 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.
• R-pd.11.7: Gebruik het caption element of heading markup voor het geven van een koptekst boven een tabel.

Bijbehorende ijkpunten normdocument

• IJkpunt 5.1: Voor tabellen met data: geef rij- en kolomheaders aan.