Handleiding HTML - Tabellen

HTML		Tabellen

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Tabelranden

De wijze waarop tabelranden worden weergegeven, kun je met twee attributen van het TABLE element beïnvloeden: BORDER en CELLSPACING.

Of er randen worden weergegeven worden, hangt ervan af of het BORDER attribuut is opgenomen voor het TABLE element en zo ja, welke waarde het heeft. Is het attribuut niet opgenomen, of heeft het de waarde "0", dan geeft de browser helemaal geen randen weer. Niet voor de tabel zelf (de buitenranden van de tabel) en ook niet voor de cellen.

<TABLE> <TR> <TD WIDTH="120" HEIGHT="40">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 keuze voor een tabel zonder randen wordt vooral gemaakt in situaties, waarin de tabel gebruikt wordt als hulpmiddel bij de lay-out van een document.

Door het opnemen BORDER attribuut voor het TABLE element met een andere waarde dan "0", kun je de breedte van de buitenranden van de tabel vastleggen. De breedte van de randen van de cel kun je met HTML niet beïnvloeden.

<TABLE BORDER="10"> <TR> <TD WIDTH="120" HEIGHT="40">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 breedte van de ruimte tussen de randen van een tabel leg je vast met het CELLSPACING attribuut van het TABLE element. Als je het attribuut niet hebt opgenomen, dan houden de meeste browsers een tussenruimte van 2 pixels aan.

<TABLE BORDER="1"> <TR> <TD WIDTH="120" HEIGHT="60" VALIGN="top">standaard tussenruimte</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE>

standaard tussenruimte	a2
b1	b2

Als je het CELLSPACING attribuut opneemt met de waarde "10", dan is de ruimte tussen de randen 10 pixels breed. Omdat de cellen even breed blijven, is de tabel breder dan in het vorige voorbeeld.

<TABLE BORDER="1" CELLSPACING="10"> <TR> <TD WIDTH="120" HEIGHT="60" VALIGN="top">rand 10 pixels breed</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE>

tussenruimte 10 pixels breed	a2
b1	b2

Door Microsoft Internet Explorer wordt voor de elementen TABLE, TR, TD en TH een aantal attributen ondersteund, waarmee je de kleur van de randen kunt vastleggen. Het gaat om de attributen BORDERCOLOR, BORDERCOLORLIGHT en BORDERCOLORDARK. Ze worden niet ondersteund door andere browsers en maken bovendien geen deel uit van HTML 4.0.

Alle hiervoor beschreven constructies voor de weergave van tabelranden (dus inclusief die welke alleen ondersteund worden door Microsoft Internet Explorer) zijn ook beschikbaar via stylesheets. Een uitgebreide toelichting en allerlei extra mogelijkheden zijn te vinden in het onderdeel CSS en tabellen - Tabelranden.

Vervolg: Achtergrond tabel

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin