Handleiding HTML - Tabellen - Eenvoudige tabellen

HTML		Tabellen

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

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