Tabellen

Tabellen zijn een eenvoudige en effectieve manier om informatie te ordenen. HTML biedt daar volop mogelijkheden voor.

Eenvoudige tabel

Dit is het meest eenvoudige voorbeeld van een tabel:

<TABLE SUMMARY="een overzicht van de inhoud van deze tabel" BORDER="4" CELLPADDING="5" CELLSPACING="5" WIDTH="200">
<TR>
<TD>Dit is cel 1</TD>
<TD>Dit is cel 2</TD>
</TR>
<TR>
<TD>Cel 3</TD>
<TD>En dit is de laatste cel, nummer 4</TD>
</TR>
</TABLE>

Het TABLE element geeft aan dat de data er tussenin een tabel vormt. De attributen WIDTH, CELLPADDING, CELLSPACING en BORDER worden verderop uitgelegd.

Het SUMMARY attribuut geeft een samenvatting van de tabel die bijvoorbeeld door braillelezers gebruikt kan worden.

<TR> en </TR> omsluiten een rij data in de tabel. Het totaal aantal rijen in de tabel wordt bepaald door het aantal TR elementen wat je gebruikt. <TD> en </TD> omsluiten de data voor een cel. Het totaal aantal cellen in een rij bepaald het aantal kolommen in de tabel. Overigens zijn de afsluitende tags </TR> en </TD> niet verplicht.

In dit voorbeeld staat er alleen tekst in de cellen. Je kunt er evengoed afbeeldingen of links in plaatsen of zelfs een andere tabel.

De meeste browsers passen de grootte van de tabel en de breedte van de kolommen automatisch aan de inhoud van de cellen aan zoals in dit voorbeeld. Als je een verschillend aantal kolommen in verschillende rijen hebt probeert de browser er iets van te maken maar meestal is het resultaat heel onvoorspelbaar en lelijk.

Cellpadding: ruimte voor de inhoud van de cel

Het CELLPADDING attribuut stelt vast hoeveel witte ruimte er om de inhoud van een cel wordt geplaatst:

<TABLE BORDER="2" CELLPADDING="2">
<TR><TD>Padding is 2</TD></TR>
</TABLE>

<TABLE BORDER="2" CELLPADDING="20">
<TR><TD>Padding is 20</TD></TR>
</TABLE>

Zoals je kunt zien bepaalt het CELLPADDING attribuut de witte ruimte tussen de inhoud van een cel en de rand van die cel. Als je geen CELLPADDING gebruikt is de ruimte er niet en worden de randen van de cel direct om de inhoud getekend.

Cellspacing: ruimte tussen cellen

Het CELLSPACING attribuut bepaalt hoeveel ruimte er tussen de cellen staat. Deze twee voorbeelden maken dat duidelijk:

<TABLE BORDER="2" CELLSPACING="20">
<TR><TD>Een cel</TD>
<TD>Nog een cel</TD></TR>
</TABLE>

<TABLE BORDER="2" CELLSPACING="2">
<TR><TD>Een cel</TD>
<TD>nog een cel</TD></TR>
</TABLE>

De rand van tabellen

Het BORDER attribuut geeft aan welke rand er om de tabel wordt getekend. Als je geen BORDER attribuut gebruikt, hebben de tabel en cellen geen randen:

<TABLE>
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TABLE>

Je kunt het BORDER attribuut willekeurig welke waarde geven zolang het maar een positief, geheel getal is:

<TABLE BORDER="24">
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TABLE>

Breedte van een tabel

Met het WIDTH attribuut kun je de breedte van een tabel instellen.

<TABLE WIDTH="400" BORDER="1">
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TABLE>

De waarde voor WIDTH kan een geheel getal zijn voor een breedte in pixels of een percentage voor een breedte relatief aan het omringende element:

<TABLE WIDTH="50%" BORDER="1">
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TABLE>

Zoals je kunt zien, krijgt deze tabel een breedte van 50% van het vierkant er omheen.

THEAD, TBODY en TFOOD elementen

Je kunt een tabel in verdelen in een kop, midden en voet met de THEAD, TBODY en TFOOD elementen.

<TABLE>
<THEAD><TR><TD COLSPAN="2">Kop</TD></TR></THEAD>
<TFOOT><TR><TD COLSPAN="2">Voet</TD></TR></TFOOT>
<TBODY>
<TR><TD>Een</TD><TD>Twee</TD></TR>
<TR><TD>Drie</TD><TD>Vier</TD></TR>
</TBODY>
</TABLE>

Het THEAD element wordt altijd bovenaan de tabel getoond, TFOOT altijd onderaan. Bij langere tabellen kan de browser de kop bovenaan elke pagina herhalen en de voet onderaan. Sommige browsers tonen ook extra ruimte tussen deze drie elementen.

Tabel kolomhoofd

Het TH element kan een kolomhoofd definiëren:

<TABLE WIDTH="50%" BORDER="1">
<TR><TH>Werknemer</TH><TH>Salaris</TH></TR>
<TR><TD>Tom Jones</TD><TD>€40,000</TD></TR>
</TABLE>

Browsers tonen het TH element anders dan het TD element. Hoe anders precies, dat hangt van de browser af. Je kunt TH ook gebruiken in combinatie met een THEAD element:

<TABLE WIDTH="50%" BORDER="1">
<THEAD><TR><TH>Werknemer</TH><TH>Salaris</TH></TR></THEAD>
<TBODY>
<TR><TD>Piet Snot</TD><TD>€40,000</TD></TR>
</TBODY>
</TABLE>

Het THEAD element moet voor het TBODY element staan.

Uitlijnen van de inhoud van een cel

De ALIGN en VALIGN attributen kunnen gebruikt worden met het TR, TD en TH element en met de TBODY, THEAD en TFOOT elementen. Het hangt er vanaf of je het uitlijnen per cel, per rij of voor een heel deel van de tabel vast wilt leggen. ALIGN controleert de horizontale uitlijning. Mogelijke waarden zijn "left", "center", "right" of "justify". VALIGN controleert de verticale uitlijning. Mogelijke waarden zijn "top", "middle", "bottom" of "baseline". Hier is een voorbeeld van het gebruik van VALIGN:

<TABLE BORDER="1">
<TR>
<TD>Een<BR>Twee<BR>Drie</TD>
<TD VALIGN="top">Een</TD>
<TD>Twee</TD>
<TD VALIGN="bottom">Drie</TD>
</TR>
</TABLE>

Het uitgangspunt is "left" voor ALIGN en "middle" voor VALIGN. Meestal gebruik je deze dus niet, met een uitzondering. Als je ALIGN of VALIGN instelt voor een hele rij door dit attribuut te gebruiken bij een TR element, kun je voor één cel een uitzondering maken door die attributen te gebruiken bij een TD element. In het volgende voorbeeld is VALIGN "top" voor de hele rij, met de derde cel als uitzondering:

<TABLE BORDER="3">
<TR VALIGN="top">
<TD>Een<BR>Twee<BR>Drie<BR>Vier</TD>
<TD>Een</TD>
<TD>Twee</TD>
<TD VALIGN="middle">Drie</TD>
<TD>Vier</TD>
</TR>
</TABLE>

Het ALIGN attribuut gebruik je op dezelfde manier:

<TABLE WIDTH="80%" BORDER="5">
<TR>
<TD ALIGN="right">Rechts</TD>
<TD>Uitganspunt links</TD>
<TD ALIGN="center">Centreren</TD>
</TR>
</TABLE>

"Justify" werkt alleen goed met langere tekst als de linker- en rechtermarge uitgelijnd kunnen worden:

<TABLE WIDTH="80%" BORDER="4" CELLSPACING="0" CELLPADDING="5">
<TR>
<TD ALIGN="justify">Semper ubi sub ubi ...... cum periculo deicerentur.</TD>
</TR>
</TABLE>

Kijk ook eens naar het gebruik van CELLSPACING en CELLPADDING in dit voorbeeld. Door CELLSPACING in te stellen op 0 verdwijnt de lege ruimte tussen de rand van de tabel en de rand van de cel.

Cellen die meer dan één rij of kolom omvatten

Het COLSPAN attribuut vertelt de browser dat de cel meer dan één kolom omvat. Op dezelfde manier vertelt het ROWSPAN attribuut dat de cel meer dan één rij omvat:

<TABLE BORDER="2">
<TR ALIGN="center">
<TD>Een</TD>
<TD>Een</TD>
<TD>Een</TD>
<TD ROWSPAN="2">Twee rijen</TD>
</TR>
<TR ALIGN="center">
<TD COLSPAN="2">Twee kolommen</TD>
<TD>Een</TD>
</TR>
</TABLE>

Zoals je ziet omvat de vierde cel van de eerste rij twee rijen en de eerste cel van de tweede rij twee kolommen. Je moet het aantal cellen, rijen en kolommen goed uitpuzzelen anders wordt je tabel een chaos.

Titel boven een tabel

Je kunt het CAPTION element gebruiken om een titel boven een tabel te zetten:

<TABLE BORDER="3">
<CAPTION>Lijst van e-mail adressen</CAPTION>
<TR><TH>Naam</TH><TH>E-mail</TH></TR>
<TR><TD>Jan Weijers</TD><TD>nojunk@nojunk.com</TD></TR>
</TABLE>

Je kunt maar één CAPTION element in een tabel gebruiken en het moet onmiddellijk na het TABLE element komen. De titel komt standaard boven de tabel te staan maar dat kun je veranderen met stylesheets.

Tekstterugloop in een cel

De tekst in een cel loopt automatische terug zodat de tabel binnen het venster van de browser past en binnen de cellen van de tabel:

<TABLE BORDER="2">
<TR>
<TD>Semper</TD>
<TD>Semper ... deicerentur.</TD>
</TR>
</TABLE>

Tekst in kolommen plaatsen met een tabel

Je kunt een tabel gebruiken om tekst in meerdere kolommen te plaatsen:

<TABLE WIDTH="80%">
<TR VALIGN="top">
<TD STYLE="width:50%;">Semper ubi sub ubi ... tenere posset,</TD>
<TD STYLE="width:50%;">sed aliae eodem ... deicerentur.</TD>
</TR>
</TABLE>

Zoals je kunt zien hebben beide TD elementen een STYLE="width:50%;" attribuut. Hiermee wordt voorkomen dat de browser de breedte van de cel aanpast aan de hoeveelheid tekst en de kolommen verschillende breedtes krijgen. Gebruik je dat attribuut niet dan moet je er voor zorgen dat er precies evenveel tekst in beide kolommen staat. Overigens, die 50% is een percentage van het omringende element, in dit geval dus de tabel.