Tabellen
Handleiding HTML
 Inhoud   Trefwoordenregister

In dit onderdeel komen aan de orde Introductie, Elementen, Eenvoudige tabellen, Samenvoegen cellen, Uitlijnen tabel, Bijschrift voor een tabel, Tabelranden, Uitlijnen celinhoud, Voorrangsregels bij uitlijnen, Achtergrondkleur, Het gebruik van stijlen, Rijgroepen, Kolomgroepen en Kader en lijnen.


Introductie

Van tabellen wordt in HTML-pagina's op grote schaal gebruik gemaakt. Dit heeft zeker te maken met de mogelijkheden die tabellen bieden bij het geven van de gewenste lay-out aan een document. Hoewel in de toekomst deze functie overgenomen moet gaan worden door Style Sheets, bieden tabellen op dit moment voor de meeste browsers de enige mogelijkheid voor het in horizontale richting op de gewenste plaats zetten van tekst en andere inhoud van het document. Om die reden wordt ook in deze handleiding intensief van tabellen gebruik gemaakt.

Een tabel bevat één of meer rijen en elke rij bevat één of meer cellen. Onder elkaar gelegen cellen vormen een kolom. Het aantal cellen in een rij bepaalt het aantal kolommen.

Tabellen worden gemaakt met behulp van de elementen TABLE, CAPTION, TR, TH en TD.
Met het TABLE element wordt het begin en einde van een tabel aangegeven. Het CAPTION element plaatst een bijschrift bij de tabel.
Een rij wordt gedefinieerd met het TR element en elke cel in een rij met het TH of het TD element. Bij cellen waarvoor het TH element wordt gebruikt, gaat het om header informatie: de titel van een rij of een kolom. Het TD element wordt gebruikt voor cellen die de feitelijke tabelgegevens (data) bevatten.
Cellen kunnen zowel in horizontale als in verticale richting worden samengevoegd. Voor het samenvoegen in horizontale richting gebruik je het COLSPAN attribuut van het TH of TD element, voor het samenvoegen in verticale richting het ROWSPAN attribuut.
In principe moet elke rij evenveel cellen bevatten (bij samengevoegde cellen wordt van het oorspronkelijke aantal uitgegaan). Indien dat niet het geval is, wordt het aantal kolommen bepaald door de rij met het grootste aantal cellen. Aan rijen met minder cellen worden aan het einde de ontbrekende cellen (zonder inhoud) toegevoegd.
Met het BORDER attribuut van het TABLE element wordt bepaald of wel of geen tabelranden worden weergegeven. Daarbij gaat het slechts om de keuze tussen overal randen (zowel aan de buitenzijde van de tabel als tussen de rijen en kolommen), of helemaal geen randen. De keuze voor helemaal geen randen wordt vooral gemaakt in situaties, waarin de tabel gebruikt wordt als hulpmiddel bij de lay-out van een document.
Elke cel in een tabel kan een groot aantal andere HTML-elementen bevatten, zoals elementen voor het structureren van tekst, lijsten, afbeeldingen en formulieren. Daarnaast kan een cel ook weer een nieuwe (geneste) tabel bevatten.

In HTML 4.0 zijn nieuwe elementen en attributen opgenomen, waarmee je meer mogelijkheden hebt bij het maken van tabellen. Het betreft de elementen THEAD, TFOOT, TBODY, COLGROUP en COL en de attributen FRAME en RULE van het TABLE element . Deze elementen en attributen worden op dit moment nog slechts beperkt ondersteund, maar als je daarmee rekening houdt, kun je ze zonder problemen gebruiken.

De elementen THEAD, TFOOT en TBODY groeperen de rijen van een tabel in rijgroepen, welke respectievelijk een header, een footer en één of meer body secties vormen. De cellen in de rijen die behoren tot de header en de footer bevatten informatie over de kolommen, de cellen in de rijen die behoren tot een body bevatten de tabelgegevens. Elke rijgroep moet minimaal één rij bevatten.
Wanneer THEAD, TFOOT en TBODY gebruikt zijn, kan het onderscheid in de tabel tussen de header, de footer en de body sectie(s) geaccentueerd worden door er lijnen tussen te plaatsen met behulp van het RULES attribuut van het TABLE element. Daarnaast heeft de groepering z'n nut als een tabel zich bij het printen over meerdere bladzijden uitstrekt. De browser kan dan de informatie uit de header en footer op elke pagina boven, respectievelijk onder de tabelgegevens plaatsen. Tenslotte moet het groeperen het aan browsers mogelijk maken om in lange tabellen de body sectie van een scrolling mechanisme te voorzien, onafhankelijk van de header en de footer.
Wanneer de elementen THEAD, TFOOT en TBODY niet zijn opgenomen, moet de browser ervan uitgaan dat er sprake is van slechts één body en geen header en footer.
Aan de elementen THEAD, TFOOT en TBODY kunnen attributen toegevoegd worden, waarmee de uitlijning van de inhoud van de cellen in de betreffende rijgroep in één keer bepaald kan worden.

De elementen COLGROUP en COL hebben betrekking op de kolommen in een tabel. Ze worden direct na het TABLE element geplaatst en geven de browser informatie over het aantal kolommen, voordat alle tabelgegevens zijn ontvangen.
Het COLGROUP element groepeert één of meer kolommen in een kolomgroep. Een tabel kan één of meer kolomgroepen bevatten, elk vastgelegd met het COLGROUP element. Het onderscheid tussen de kolomgroepen kan onder andere geaccentueerd worden door er lijnen tussen te plaatsen met behulp van het RULES attribuut van het TABLE element. Indien het COLGROUP element niet gebruikt is, moet de browser ervan uitgaan dat er sprake is van één kolomgroep.
Aan het COLGROUP element kunnen attributen toegevoegd worden, waarmee de breedte van de kolommen en de uitlijning van de inhoud van de cellen in de betreffende kolomgroep in één keer bepaald kan worden.
Ook het COL element kan gebruikt worden om de breedte van een aantal kolommen en de uitlijning van de inhoud van de cellen in deze kolommen in één keer te bepalen. Het COL element kan gebruikt worden binnen het COLGROUP element, maar ook wanneer het niet nodig is om de tabel te verdelen in kolomgroepen.

Met de attributen FRAME en RULES van het TABLE element kan bepaald worden welke randen van de tabel weergegeven moeten worden. Het FRAME attribuut heeft betrekking op het kader van de tabel, ofwel de rand aan de buitenzijde, het RULES attribuut controleert de weergave van de lijnen tussen de rijen en kolommen.

Tot HTML 4.0 behoren ook enkele attributen, welke vooral gericht zijn op de weergave door niet visuele media zoals spraak-synthesizers en braille-apparaten. Het betreft het SUMMARY attribuut voor het TABLE element en de attributen HEADERS, SCOPE, ABBR en AXIS voor de elementen TH en TD. Deze attributen zijn nog niet in deze handleiding beschreven.


Elementen

Voor het maken van tabellen zijn de volgende elementen beschikbaar:

CAPTION
COL
COLGROUP
 TABLE
TBODY
TD
 TFOOT
TH
THEAD
 TR


De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Microsoft Internet Explorer, Mozilla, Netscape Navigator en Opera.


Eenvoudige tabellen

In het volgende voorbeeld wordt een eenvoudige tabel met twee rijen en twee kolommen gemaakt. Het TR element definieert een rij en het TD element definieert de cellen in de rij. De randen van de tabel zijn zichtbaar, omdat aan het TABLE element het BORDER attribuut is toegevoegd.

<TABLE BORDER="1">
<TR> <TD>a1</TD> <TD>a2</TD> </TR>
<TR> <TD>b1</TD> <TD>b2</TD> </TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


Door in de eerste rij de cellen te definiëren met het TH element wordt de tabel voorzien van kolomtitels.

<TABLE BORDER="1">
<TR> <TH>Titel 1</TH> <TH>Titel 2</TH> <TH>Titel 3</TH> </TR>
<TR> <TD>a1</TD> <TD>a2</TD> <TD>a3</TD> </TR>
<TR> <TD>b1</TD> <TD>b2</TD> <TD>b3</TD> </TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

Titel 1 Titel 2 Titel 3
a1 a2 a3
b1 b2 b3


Met het WIDTH attribuut van het TABLE element wordt de breedte van de tabel gedefinieerd.

<TABLE BORDER="1" WIDTH="50%">
<TR> <TD>a1</TD> <TD>a2</TD> </TR>
<TR> <TD>b1</TD> <TD>b2</TD> </TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


De hoogte en breedte van een cel worden bepaald met de attributen WIDTH en het HEIGHT van het TD of TH element.

<TABLE BORDER="1">
<TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


Samenvoegen van cellen

Opeenvolgende cellen kunnen zowel in horizontale als in verticale richting worden samengevoegd. Voor het samenvoegen in horizontale richting gebruik je het COLSPAN attribuut van het TD (of TH) element, voor het samenvoegen in verticale richting het ROWSPAN attribuut.
In het volgende voorbeeld wordt de eerste cel in de eerste rij met het ROWSPAN attribuut samengevoegd met de onderliggende cellen in de volgende twee rijen. In de tweede en derde rij hoeven er daardoor slechts twee cellen gedefinieerd te worden.

<TABLE BORDER="1" WIDTH="50%">
<TR>
<TD ROWSPAN="3" HEIGHT="100">abc1</TD> <TD>a2</TD> <TD>a3</TD>
</TR>
<TR>
<TD>b2</TD> <TD>b3</TD>
</TR>
<TR>
<TD>c2</TD><TD>c3</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

abc1 a2 a3
b2 b3
c2 c3


In het vorige voorbeeld worden nu de overblijvende cellen in de tweede rij samengevoegd met het COLSPAN attribuut.

<TABLE BORDER="1" WIDTH="50%">
<TR>
<TD ROWSPAN="3" HEIGHT="100">abc1</TD> <TD>a2</TD> <TD>a3</TD>
</TR>
<TR>
<TD COLSPAN="2">b23</TD>
</TR>
<TR>
<TD>c2</TD> <TD>c3</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

abc1 a2 a3
b23
c2 c3


Uitlijnen tabel

Met het ALIGN attribuut van het TABLE element bepaal je de horizontale uitlijning van de tabel in het venster. In het volgende voorbeeld is de waarde "left" gebruikt.

<TABLE BORDER="1" ALIGN="left">
<TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2

Met de waarden "left" of "right" voor het ALIGN attribuut van het TABLE element maak je een "zwevende" tabel. De tekst wordt naast de tabel geplaatst en wanneer de hoeveelheid tekst groter is dan naast de tabel past, dan loopt de tekst onder de tabel door. Is de hoeveelheid tekst kleiner dan naast de tabel past, dan is het verstandig direct na de tekst het BR element met het attribuut CLEAR te gebruiken. Daarmee voorkom je dat een volgende alinea onbedoeld naast in plaats van onder de tabel terecht komt.

a1 a2
b1 b2

Door in dezelfde tabel het ALIGN attribuut met de waarde "right" te gebruiken, komt de tabel rechts in het venster te staan en wordt de tekst links naast de tabel geplaatst.


Bijschrift voor een tabel

Een bijschrift plaats je met het CAPTION element bij een tabel. Met het ALIGN attribuut bepaal je waar het bijschrift moet staan.

<TABLE BORDER="1">
<CAPTION ALIGN="top">Dit is het bijschrift</CAPTION> <TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

Dit is het bijschrift
a1 a2
b1 b2


Tabelranden

De dikte van de rand aan de buitenzijde van een tabel wordt gecontroleerd met het BORDER attribuut van het TABLE element.

<TABLE BORDER="10">
<TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


De dikte van de lijnen tussen de rijen en de kolommen van een tabel wordt gecontroleerd met het CELLSPACING attribuut van het TABLE element.

<TABLE BORDER="1" CELLSPACING="10">
<TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


Het CELLPADDING attribuut van het TABLE element bepaalt de afstand tussen de rand van een cel en de inhoud.

<TABLE BORDER="1" CELLPADDING="10">
<TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


Met de het attribuut BORDER="0" voor het TABLE element wordt de tabel zonder randen weergegeven.

<TABLE BORDER="0">
<TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


Uitlijnen celinhoud

Met de attributen ALIGN en VALIGN van het TD (of TH) element bepaal je hoe de inhoud van een cel in respectievelijk horizontale en verticale richting uitgelijnd moet worden.

<TABLE BORDER="1">
<TR>
<TD ALIGN="left" VALIGN="top" WIDTH="120" HEIGHT="60">a1</TD>
<TD ALIGN="right" VALIGN="bottom" WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD ALIGN="center">b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


De attributen ALIGN en VALIGN kunnen ook aan het TR element toegevoegd worden, om in één keer voor alle cellen in een rij te bepalen hoe de inhoud in respectievelijk horizontale en verticale richting uitgelijnd moet worden.

<TABLE BORDER="1">
<TR ALIGN="left" VALIGN="top">
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR ALIGN="right" VALIGN="bottom">
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


Voorrangsregels bij uitlijnen

De uitlijning van de inhoud van een cel kan op verschillende manieren bepaald worden:

  • door het toevoegen van de attributen ALIGN, VALIGN, CHAR en CHAROFF direct aan de elementen voor het definiëren van een cel (TH of TD)
  • door de cel de uitlijning te laten erven van de elementen voor het definiëren van de rij (TR), kolommen (COL), de kolomgroep (COLGROUP) of de rijgroep (THEAD, TFOOT en TBODY), waartoe de cel behoort
  • via het STYLE attribuut, dat toegevoegd kan worden aan alle elementen, welke betrekking hebben op het maken van een tabel
  • via een element dat als inhoud in een cel is opgenomen

Omdat de genoemde mogelijkheden ook gelijktijdig en met een verschillende uitkomst gebruikt kunnen worden, zijn in de specificatie van HTML 4.0 voorrangsregels vastgelegd.

Voor de attributen ALIGN, CHAR en CHAROFF, welke betrekking hebben op de horizontale uitlijning van de celinhoud, geldt dat achtereenvolgens voorrang hebben:

  1. een attribuut dat is toegevoegd aan een element, dat tot de celinhoud behoort
  2. een attribuut dat is toegevoegd aan de elementen TH of TD
  3. een attribuut dat is toegevoegd aan het COL element
  4. een attribuut dat is toegevoegd aan het COLGROUP element
  5. een attribuut dat is toegevoegd aan het TR element
  6. een attribuut dat is toegevoegd aan de elementen THEAD, TFOOT of TBODY
  7. een attribuut dat is toegevoegd aan het TABLE element
  8. de standaardwaarde van de attribuut

Voor de attributen VALIGN (dat betrekking heeft op de verticale uitlijning van de celinhoud) en STYLE geldt dat achtereenvolgens voorrang hebben:

  1. een attribuut dat is toegevoegd aan een element, dat tot de celinhoud behoort
  2. een attribuut dat is toegevoegd aan de elementen TH of TD
  3. een attribuut dat is toegevoegd aan het TR element
  4. een attribuut dat is toegevoegd aan de elementen THEAD, TFOOT of TBODY
  5. een attribuut dat is toegevoegd aan het COL element
  6. een attribuut dat is toegevoegd aan het COLGROUP element
  7. een attribuut dat is toegevoegd aan het TABLE element
  8. de standaardwaarde van de attribuut

Door Microsoft Internet Explorer worden niet de voorrangsregels volgens de specificatie van HTML 4.0 aangehouden, maar wordt uitgegaan van de volgorde waarin de genoemde elementen in het document staan: de uitlijning wordt bepaald door de waarde van het attribuut, dat is toegevoegd aan het laatste element in het document dat betrekking heeft op een cel.


Achtergrondkleur

Op verschillende manieren kan aan de tabel kleur gegeven worden. In het volgende voorbeeld is het gedaan met het BGCOLOR attribuut van het TABLE element.

<TABLE BORDER="1" BGCOLOR="#FFFF99">
<TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


Het BGCOLOR kan ook toegevoegd worden aan het TR element, waardoor aan een rij kleur gegeven aan worden.

<TABLE BORDER="1">
<TR BGCOLOR="#FFFF99">
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR BGCOLOR="#FFFFCC">
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


Tenslotte kan het BGCOLOR attribuut ook gebruikt worden voor het TD (of TH) element.

<TABLE BORDER="1">
<TR>
<TD WIDTH="120" HEIGHT="60" BGCOLOR="#FFFF99">a1</TD>
<TD WIDTH="80" BGCOLOR="#FFFFCC">a2</TD>
</TR>
<TR>
<TD HEIGHT="40" BGCOLOR="#FFFFCC">b1</TD>
<TD BGCOLOR="#FFFF99">b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

a1 a2
b1 b2


Het gebruik van stijlen

Voor alle elementen welke gebruikt worden bij het maken van tabellen, kunnen met behulp van style sheets stijlen gedefinieerd worden.

In het volgende voorbeeld zijn de kleur van de tabelranden en de achtergrondkleur van de tabel bepaald via inline stijlen. Door het toevoegen van het STYLE attribuut met de eigenschappen border-style en border-color aan het TABLE element, wordt aan de buitenste rand van het kader een kleur gegeven. Het STYLE attribuut met dezelfde eigenschappen toegevoegd aan het TD element kleurt alleen de rand van de betreffende cel. De background eigenschap zorgt voor de achtergrondkleur van de tabel.

<TABLE BORDER="1" STYLE="border-style: solid; border-color: #FF0000; background: #FFFFCC;">
<TR>
<TD WIDTH="120" HEIGHT="60" STYLE="border-style: solid; border-color: #008000;">a1</TD>
<TD WIDTH="80" STYLE="border-style: solid; border-color: #0000FF;">a2</TD>
</TR>
<TR>
<TD HEIGHT="40" STYLE="border-style: solid; border-color: #0000FF;">b1</TD>
<TD STYLE="border-style: solid; border-color: #008000;">b2</TD>
</TR>
</TABLE>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer is een afbeelding opgenomen.

Voorbeeld gekleurde tabelranden via inline stijlen

Bekijk in een nieuw venster of de browser de gebruikte elementen en attributen ondersteunt.


Het is aan te raden om, bij het kleuren van celranden, in plaats van inline stijlen gebruik te maken van een stijlblok of een stijlblad. Daarmee kan de hoeveelheid code aanzienlijk beperkt worden. Wanneer alle tabellen in een document er hetzelfde moeten uitzien en de celranden allemaal dezelfde kleur hebben, dan kun je bijvoorbeeld het volgende stijlblok in de head van het document zetten.

<STYLE TYPE="text/css">
<!--
TABLE  { border-style: solid; border-color: #FF0000; background: #FFFFCC; }
TD     { border-style: solid; border-color: #008000; }
-->
</STYLE>

In de tabel in de body van het document hoef je het STYLE attribuut daarna alleen te gebruiken voor de randen, welke een andere kleur moeten hebben dan de in het stijlblad opgegeven kleur.

<TABLE BORDER="1">
<TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80"gt;a2</TD>
</TR>
<TR>
<TD HEIGHT="40" STYLE="border-style: solid; border-color: #0000FF;">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer is een afbeelding opgenomen.

Voorbeeld gekleurde tabelranden via stijlblok

Bekijk in een nieuw venster of de browser de gebruikte elementen en attributen ondersteunt.


Wanneer je niet in alle tabellen de tabelranden dezelfde kleuren wilt geven, kun je voor het koppelen van de stijl aan een element ook gebruik maken van het CLASS attribuut. In het stijlblok in de head van het document gebruik je dan geen elementen, maar class-namen op als selectors. In het volgende voorbeeld is dat gedaan om een alternatief te laten zien voor de alleen door Microsoft Internet Explorer ondersteunde attributen BORDERCOLORDARK en BORDERCOLORLIGHT.

<STYLE TYPE="text/css">
<!--
.tabelrand  { border-style: solid; border-width: 4px; border-color: #C0C0C0 #808080 #808080 #C0C0C0; }
.celrand    { border-style: solid; border-width: 1px; border-color: #808080 #C0C0C0 #C0C0C0 #808080; }
-->
</STYLE>

Aan de elementen TABLE en TD voeg je nu het CLASS attribuut toe, met als waarde één van de in het stijlblok gebruikte class-namen.

<TABLE BORDER="1" CLASS="tabelrand">
<TR>
<TD WIDTH="120" HEIGHT="60" CLASS="celrand">a1</TD>
<TD WIDTH="80" CLASS="celrand">a2</TD>
</TR>
<TR>
<TD HEIGHT="40" CLASS="celrand">b1</TD>
<TD CLASS="celrand">b2</TD>
</TR>
</TABLE>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer is een afbeelding opgenomen.

Voorbeeld gekleurde tabelranden via stijlblok

Bekijk in een nieuw venster of de browser de gebruikte elementen en attributen ondersteunt.


In het volgende voorbeeld wordt voor de tabel een achtergrondafbeelding gedefinieerd door het STYLE attribuut met de background-image eigenschap aan het TABLE element toe te voegen.

<TABLE BORDER="1"
STYLE="background-image: url(handl.gif);">
<TR>
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 5 is een afbeelding opgenomen.

Voorbeeld achtergrond in tabel via inline stijl

Bekijk in een nieuw venster of de browser de gebruikte elementen en attributen ondersteunt.

Zie ook het gebruik van stijlen in de voorbeelden voor Rijgroepen en Kolomgroepen.

Het is goed er rekening mee te houden dat Netscape Navigator 4 een ernstige fout bevat waar het gaat om de combinatie stijlen en tabellen: stijlen welke voor het document gedefinieerd zijn via het BODY element, worden niet geërfd in een tabel. Dat betekent dat alle stijlen, welke ook betrekking hebben op de inhoud van de cellen van een tabel, nog eens extra vastgelegd moeten worden via de elementen TH of TD en/of de in de cellen opgenomen elementen. Zie ook CSS en browsers.


Rijgroepen

Met elementen THEAD, TFOOT en TBODY kun je de rijen van een tabel groeperen in een header, een footer en één of meer body secties. De cellen in de rijen die behoren tot de header en de footer bevatten informatie over de kolommen, de cellen in de rijen die behoren tot een body bevatten de tabelgegevens. In het volgende voorbeeld zijn THEAD en TBODY gebruikt. De gebruikte attributen zorgen er voor dat alle cellen in de betreffende rijgroep in één keer de gewenste kenmerken krijgen: het ALIGN attribuut regelt de uitlijning van de inhoud van de cellen en met het STYLE attribuut is de achtergrondkleur van de cellen bepaald en is vastgelegd dat de tekst vet moet worden weergegeven.

<TABLE BORDER="1">
<THEAD ALIGN="center"
STYLE="font-weight: bold; background: #C0C0C0;">
<TR>
<TD HEIGHT="40" WIDTH="90">titel 1</TD>
<TD WIDTH="90">titel 2</TD> <TD WIDTH="90">titel 3</TD>
<TD WIDTH="90">titel 4</TD>
</TR>
</THEAD>
<TBODY ALIGN="center">
<TR>
<TD HEIGHT="40">a1</TD> <TD>a2</TD> <TD>a3</TD> <TD>a4</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD> <TD>b2</TD> <TD>b3</TD> <TD>b4</TD>
</TR>
</TBODY>
</TABLE>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 5 is een afbeelding opgenomen.

Voorbeeld THEAD en TBODY

Bekijk in een nieuw venster of de browser de gebruikte elementen en attributen ondersteunt.


Het gebruik van de elementen THEAD, TFOOT en TBODY maakt het mogelijk de tabel in gecomprimeerde vorm weer te geven. Je kunt dat doen door met behulp van een stijl de hoogte van TBODY vast te leggen en te bepalen dat zonodig een scrollbar moet worden weergegeven.

<TABLE BORDER="1" WIDTH="300">
<THEAD STYLE="font-weight: bold; background: #C0C0C0;"
<TR>
<TD>Dit is de header van de tabel</TD>
</TR>
</THEAD>
<TFOOT STYLE="font-weight: bold; background: #C0C0C0;"
<TR>
<TD>Dit is de footer van de tabel</TD>
</TR>
</TFOOT>
<TBODY STYLE="overflow: auto; height: 130px;">
<TR>
<TD>Dit is rij 1 van de body van de tabel</TD>
</TR>
...
<TR>
<TD>Dit is rij 15 van de body van de tabel</TD>
</TR>
</TBODY>
</TABLE>

Deze mogelijkheid wordt op dit moment alleen door Mozilla en Netscape Navigator 6.0 en hoger ondersteund. Opera ondersteunt geen stijlen voor THEAD, TFOOT en TBODY en geeft dus een gewone tabel weer. Microsoft Internet Explorer past de opgegeven hoogte voor TBODY ten onrechte toe op de ingesloten TD elementen. Het resultaat kan daardoor in deze browser juist het tegendeel van een gecomprimeerde tabel zijn. Het voorbeeld moet dan ook vooral als illustratie van toekomstige mogelijkheden worden gezien en het gebruik ervan in de praktijk wordt afgeraden.

Van de weergave van het voorbeeld door Netscape Navigator 6 is een afbeelding opgenomen.

Voorbeeld TBODY

Bekijk in een nieuw venster of de browser de tabel op een vergelijkbare wijze weergeeft.

Hoewel de elementen THEAD en TBODY door oudere browsers (waaronder Netscape Navigator 4) niet ondersteund worden, kun je ze zonder problemen nu al gebruiken. Een uitzondering geldt de hiervoor beschreven gecomprimeerde tabel. Wanneer het van belang is dat de tabel in alle browsers wordt weergegeven zoals je bedoeld, dan is het verstandig de attributen voor de breedte van de cellen, de uitlijning en de stijlen (ook) te blijven gebruiken voor de elementen TR en/of TH en TD.
Met het gebruiken van TFOOT moet je wat voorzichtiger zijn. Omdat TFOOT vóór TBODY geplaatst moet worden, zullen browsers die het element niet kennen, de bijbehorende rijen niet aan het eind van de tabel weergeven maar voor de rijen van TBODY.


Kolomgroepen

Wanneer je de cellen in kolommen van bepaalde kenmerken wilt voorzien, dan kun je gebruik maken van de elementen COLGROUP en COL. Deze elementen doen in principe hetzelfde: het groeperen van meerdere kolommen van een tabel en/of het (met behulp van de verschillende attributen) in één keer geven van de gewenste kenmerken. Het COLGROUP element heeft daarnaast een functie in het structureren van de tabel: de lijnen tussen de kolomgroepen kunnen op een speciale manier worden weergegeven (zie Kader en lijnen).

In het volgende voorbeeld wordt de weergave bepaald met de attributen van het COLGROUP element. Het ALIGN attribuut bepaalt de uitlijning van de inhoud van de cellen, het WIDTH attribuut bepaalt de breedte van de cellen en het STYLE attribuut legt de kleur van de tekst en de achtergrondkleur van de cellen vast. De eerste kolomgroep bestaat uit slechts één kolom, voor de volgende kolomgroep is met behulp van het SPAN attribuut de omvang bepaald op drie kolommen.

<TABLE BORDER="1">
<COLGROUP ALIGN="left" WIDTH="120" STYLE="color: #000000; background: #FFFF99;">
</COLGROUP>
<COLGROUP SPAN="3" ALIGN="center" WIDTH="80" STYLE="color: #000000; background: #FFFFCC;">
</COLGROUP>
<TR>
<TD HEIGHT="40">a1</TD> <TD>a2</TD> <TD>a3</TD> <TD>a4</TD>
</TR>
<TR>
<TD HEIGHT="40">b1</TD> <TD>b2</TD> <TD>b3</TD> <TD>b4</TD>
</TR>
<TR>
<TD HEIGHT="40">c1</TD> <TD>c3</TD> <TD>c3</TD> <TD>c4</TD>
</TR>
</TABLE>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 5 is een afbeelding opgenomen.

Voorbeeld COLGROUP

Bekijk in een nieuw venster of de browser de gebruikte elementen en attributen ondersteunt.


Soms wil je bepaalde kolommen binnen een kolomgroep kenmerken geven, die afwijken van die van de rest van de kolomgroep. In het voorgaande voorbeeld willen we nu de laatste kolom van de tweede kolomgroep afwijkend weergegeven. Het COL element moet dan twee keer gebruikt worden. Het eerste COL element overspant met behulp van het SPAN attribuut de eerste twee kolommen. Verdere attributen zijn niet toegevoegd, omdat de cellen hun kenmerken krijgen van het COLGROUP element. Aan tweede COL element zijn wel attributen toegevoegd: het ALIGN attribuut wijzigt de uitlijning en het STYLE attribuut zorgt voor een andere kleur van de tekst. Let erop dat het COL element in tegenstelling tot het COLGROUP element geen beëindiging kent.

<TABLE BORDER="1">
<COLGROUP ALIGN="left" WIDTH="120" STYLE="color: #000000; background: #FFFF99;">
</COLGROUP>
<COLGROUP SPAN="3" ALIGN="center" WIDTH="80" STYLE="color: #000000; background: #FFFFCC;">
<COL SPAN="2">
<COL ALIGN="right" STYLE="color: #FF0000;">
</COLGROUP>
<TR>
<TD HEIGHT="40">a1</TD> <TD>a2</TD> <TD>a3</TD> <TD>a4</TD>
</TR>
...
</TABLE>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 5 is een afbeelding opgenomen.

Voorbeeld COLGROUP en COL

Bekijk in een nieuw venster of de browser de gebruikte elementen en attributen ondersteunt.

Hoewel de elementen COL en COLGROUP slechts beperkt ondersteund worden, kan het op zich geen kwaad ze nu al te gebruiken. Je moet er alleen rekening mee houden dat de tabel niet in alle browsers zo wordt weergegeven als je bedoeling is. Is de weergave van belang, dan is het verstandig de verschillende attributen voor bijvoorbeeld de breedte van de cellen, de uitlijning en de stijlen (ook) te blijven gebruiken voor de elementen TR en/of TH en TD.


Kader en lijnen

In de voorbeelden van rijgroepen en kolomgroepen zijn de mogelijkheden van de elementen THEAD, TFOOT, TBODY en COLGROUP om structuur te geven aan de tabel eigenlijk niet gebruikt (hoogstens indirect via bijvoorbeeld de achtergrondkleur van de cellen). Door aan het TABLE element het attribuut RULES toe te voegen, kun je de structuur zichtbaar maken. Het RULES attribuut bepaalt welke lijnen tussen de rijen en kolommen van een tabel worden weergegeven. In het volgende voorbeeld is het RULES attribuut gebruikt met de waarde "groups". Daardoor zijn alleen de lijnen tussen de rijgroepen en tussen de kolomgroepen zichtbaar. De weergave van het kader van de tabel (de rand aan de buitenzijde) wordt gecontroleerd door het FRAME attribuut van het TABLE element. In het voorbeeld is het FRAME attribuut gebruikt met de waarde "hsides". Alleen de boven- en onderrand zijn daardoor zichtbaar.

Om ook in browsers die de elementen THEAD, TFOOT, TBODY en COLGROUP niet ondersteunen, te komen tot een acceptabele weergave, zijn de attributen voor de uitlijning toegevoegd aan de elementen TH en TD. Het WIDTH attribuut is om dezelfde reden niet alleen aan het COLGROUP element toegevoegd, maar waar nodig ook aan TH en TD.

<TABLE BORDER="1" FRAME="hsides" RULES="groups">
<CAPTION><B>Ondersteuning door browser</B></CAPTION>
<COLGROUP WIDTH="120"></COLGROUP>
<COLGROUP SPAN="3" WIDTH="80"></COLGROUP>
<THEAD>
<TR>
<TH HEIGHT="40" WIDTH="120"></TH>
<TH WIDTH="80">Microsoft Internet Explorer</TH>
<TH WIDTH="80">Netscape Navigator</TH>
<TH WIDTH="80">Opera</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TH ALIGN="left" HEIGHT="40">Inline frames</TH>
<TD ALIGN="center">3.0</TD>
<TD ALIGN="center">6.0</TD>
<TD ALIGN="center">4.0</TD>
</TR>
...
</TBODY>
</TABLE>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 5 is een afbeelding opgenomen.

Voorbeeld FRAME en RULES

Bekijk in een nieuw venster of de browser de gebruikte elementen en attributen ondersteunt.

Hoewel de attributen RULES en FRAME slechts beperkt ondersteund worden, kun je ze zonder problemen nu al gebruiken.

  Inhoud Handleiding HTML   Trefwoordenregister   Inhoud Tabellen

Laatste wijziging 25 juli 2002
Copyright © 1995-2002 Hans de Jong