HTML Tabellen


Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie tabellen | Eenvoudige tabellen | Samenvoegen cellen | Uitlijnen celinhoud | Uitlijnen tabel | Bijschrift bij tabel | Tabelranden | Achtergrond tabel | Rijgroepen | Kolomgroepen | Kader en lijnen | Voorrangsregels bij uitlijnen

Gerelateerde elementen: CAPTION | COL | COLGROUP | TABLE | TBODY | TD | TFOOT | TH | THEAD | TR


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 voor het TABLE element het BORDER attribuut is opgenomen met een andere waarde dan "0".

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

De browser maakt de cellen net zo breed als nodig is om de inhoud weer te geven:

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 zal deze koptitels in vet weergeven:

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 zal de beschikbare breedte over de kolommen verdelen:

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


Vervolg: Samenvoegen van cellen



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

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 5 december 2004