Op het internet wordt veel gebruikt gemaakt van tabellen, maar de manier waarop is voor 99,9% fout. Tabellen worden namelijk misbruikt voor het maken van een layout. CSS is daar natuurlijk vele malen beter in. Dus onthoud goed dat je een tabel enkel en alleen hoort te gebruiken voor gegevens en dus niet om je layout mee te maken.

De TABLE en CAPTION elementen

Om een tabel te maken gebruiken we het TABLE element. In dat element komen alle gegevens die elk natuurlijk ook hun eigen element hebben. TABLE kan het summary attribuut hebben. Dit attribuut kan je gebruiken om een omschrijving van het doel en structuur van de tabel te geven. Dit attribuut is erg handig voor browsers die de tabel niet grafisch kunnen weergeven (denk aan robots zoals die van Google en browsers die gebruikt worden door slechtzienden) omdat die dan als nog de tabel kunnen begrijpen.

Het CAPTION element is te vergelijken met LEGEND die we in het vorige hoofdstuk hebben gezien, samen met FIELDSET. CAPTION geeft dus de titel van de tabel. Dit element moet als eerste voorkomen in een TABLE element.

Een TABLE samen met een CAPTION ziet er dus ongeveer als volgt uit:

<table summary="Het schoolrooster van Piet Jansen">
 <caption>Piet Jansen</caption>
 <!-- De gegevens van de tabel -->
</table>

De TR, TH en TD elementen

Zoals je waarschijnlijk weet bestaat een tabel uit rijen en kolommen. In HTML bouwen we een tabel regel voor regel. Elke regel komt in een TR element. In die TRs komen de cellen. Zo'n cel kan een TH of TD element zijn.

Een TH geeft een element weer die als kop functioneert. Dat wil niet zeggen dat een TH alleen maar boven een kolom kan staan. Een TH kan ook als eerste in een rij voorkomen. Om aan te geven of een TH een kop is voor een kolom of een rij gebruiken we het scope attribuut. Gebruik je de TH voor een kolom, dan is de waarde van scope "col". Gebruik je de TH voor een rij, dan is de waarde "row".

Een TD is een element met gewone informatie.

Hieronder volgt een voorbeeld die de TR, TH en TD elementen in gebruik neemt:

<table summary="Het schoolrooster van Piet Jansen">
 <caption>Piet Jansen</caption>
  <tr>
   <th scope="col">Maandag</th>
   <th scope="col">Dinsdag</th>
   <th scope="col">Woensdag</th>
   <th scope="col">Donderdag</th>
   <th scope="col">Vrijdag</th>
  </tr>

  <tr>
   <td>Wiskunde</td>
   <td>-</td>
   <td>Wiskunde</td>
   <td>-</td>
   <td>Economie</td>
  </tr>

  <!-- etc. -->
</table>

Zoals je ziet bestaat deze tabel uit twee rijen (want er zijn 2 TRs) en 5 kolommen (want in elke TR zijn er 5 TDs of THs). Maandag is de kop voor de 1e kolom, Dinsdag voor de 2e kolom enz.

Een andere manier om aan te geven welke kop bij een TD element hoort, is om elke TH een unieke id attribute te geven. Dan kan voor elke TD worden aangegeven welke kop erbij hoort door de waarde van het id attribuut van de kop te gebruiken in het headers attribuut. Er mogen meerdere IDs in het headers attribuut. Deze methode kan handig zijn voor complexe tabellen. Hieronder volgt een voorbeeld van deze methode:

<table summary="Het schoolrooster van Piet Jansen">
 <caption>Piet Jansen</caption>
  <tr>
   <th id="k1">Maandag</th>
   <th id="k2">Dinsdag</th>
   <th id="k3">Woensdag</th>
   <th id="k4">Donderdag</th>
   <th id="k5">Vrijdag</th>
  </tr>

  <tr>
   <td headers="k1">Wiskunde</td>
   <td headers="k2">-</td>
   <td headers="k3">Wiskunde</td>
   <td headers="k4">-</td>
   <td headers="k5">Economie</td>
  </tr>

  <!-- etc. -->
</table>

De THEAD, TFOOT en TBODY elementen

Je kan een tabel altijd opdelen in een kop, gegevens en soms zelfs een voetnoot. Deze drie delen kan je opdelen in 3 elementen:

1. THEAD voor de kop;
2. TFOOT voor de voetnoot;
3. en TBODY voor de gegevens.

Net zoals bij COL en COLGROUP zijn deze elementen niet noodzakelijk. Je hoeft ze dus niet te gebruiken, maar soms kan het handig zijn. Bijvoorbeeld als je een erg grote tabel hebt. Dan kan je namelijk dmv de overflow en height CSS eigenschappen de tabel een vaste hoogte geven. Is er dan meer informatie in tabel dan dat er in past, dan zorgt de overflow eigenschap dat de tabel een scrollbalk krijgt, i.p.v. dat de tabel langer wordt. Handig om de pagina klein en overzichtelijk te houden.

Indien je er voor kiest om THEAD, TFOOT en TBODY te gebruiken, dan moet het ook altijd in die volgorde. Dus de TBODY als laatst. In de THEAD komt 1 TR element met daarin de nodige TH elementen die de bovenste rij van de tabel voorstellen: de kop.

Dan komt TFOOT. Ook die heeft 1 TR element met daarin het zelfde aantal TDs. Als laatste komt dan nog TBODY. Deze mag natuurlijk meerdere TRs hebben. Het aantal TDs per rij moet net zoals bij TFOOT gelijk zijn aan het aantal in THEAD.

Indien je ervoor kiest om deze 3 elementen te gebruiken, ziet er als volgt uit:

<table summary="Het schoolrooster van Piet Jansen">
 <caption>Piet Jansen</caption>
 <thead>
  <tr>
   <!-- Kolommen -->
  </tr>
 </thead>

 <tfoot>
  <tr>
   <!-- Kolommen -->
  </tr>
 </tfoot>

 <tbody>
  <!-- Gegevens -->
 </tbody>
</table>

Nu we HTML en CSS in zo'n beetje de grote lijnen hebben doorgewerkt zijn we bijna aan het einde van deze handleiding beland. Wat ons echter resteert is de evaluatie waar we kijken wat we hebben geleerd, hoe deze de layout van Modern Markup is gemaakt en hoe je verder kan leren over HTML en CSS.