Tabellen: Anatomie van een tabel

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)

<table>
  <tr>
    <td>Cel 1 in rij 1</td>
    <td>Cel 2 in rij 1</td>
  </tr>
  <tr>
    <td>Cel 1 in rij 2</td>
    <td>Cel 2 in rij 2</td>
  </tr>
</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.

Gebruik het th (table header) element voor het beschrijven van een kolom of rij in een tabel met relationele informatie.

Richtlijn R-pd.11.2

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

<tr>
  <th>Activiteit:</th>
  <th>Deelnemersaantal:</th>
</tr>

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)

<tr>
  <th>Week 39:</th>
  <td>Voorlichtingsavond stadsrenovatie</td>
  <td>12</td>
</tr>

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.

Schermleesprogramma’s kunnen deze sectie voor een blinde gebruiker op verzoek voorlezen. Bovendien kunnen moderne grafische browsers deze sectie herhalen op geprinte pagina’s, wanneer een lange tabel over meerdere pagina’s verdeeld raakt. Bij gebruik van thead markup, moeten de overige rijen gegroepeerd worden binnen tbody (table body) markup: <tbody></tbody>.

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.

Richtlijn R-pd.11.3

Deze groeperende elementen zijn tevens geschikt als elementen waarmee lay-out variaties kunnen worden toegepast, door middel van CSS (Cascading Style Sheets).

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)

<tr>
  <th rowspan="2">Week 39:</th>
  <td>Voorlichtingsavond stadsrenovatie</td>
  <td>12</td>
</tr>
<tr>
  <td>Open vergadering Milieucommissie</td>
  <td>16</td>
</tr>

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.

(uitleg)


 Webrichtlijnen versie 1.3, november 2007.