In dit hoofdstuk ga ik uitleggen hoe je een tabel maakt. Een tabel kan je onder andere gebruiken om een overzicht van cijfertjes en dingetjes te creeëren, maar als HTML je bevalt en je later meerdere web-talen wil leren, zijn tabbellen erg handig om een profficionele website op te bouwen.

Met een tabel maak je gebruik van de tags <TABLE>, <TR> en <TD>:

<TABLE>     <TR>         <TD>Cel 1.1</TD>     </TR> </TABLE>

Je begint met de table tag. Hiermee geef je aan dat je een tabel gaat maken. Daarna gebruiken we de tr (table row = tabel rij) tag waarmee we een (horizontale) rij in de tabel gaan maken. Hierna gebruiken we de td (table data) tag. Met deze tag delen we de rij in cellen.

<TABLE width="75%">     <TR>         <TD>Cel 1.1</TD>         <TD>Cel 1.2</TD>     </TR>     <TR>         <TD>Cel 2.1</TD>         <TD>Cel 2.2</TD>     </TR> </TABLE>

Dit is het resultaat:

Cel 1.1 Cel 1.2 Cel 2.1 Cel 2.2

De breedte van de tabel is 75% van de ruimte. Dat hebben we aangegeven met width="75%" in de table tag. Je kan ook de breedte en hoogte van een cel bepalen:

<TABLE width="75%">     <TR>         <TD width="65%" height="40">Cel 1.1</TD>         <TD width="35%">Cel 1.2</TD>     </TR>     <TR>         <TD height="60">Cel 2.1</TD>         <TD>Cel 2.2</TD>     </TR> </TABLE>

De breedte van cel 1.1 is nu 65%. Ook cel 2.1 is nu 65% breedt, omdat dit een cel in dezelfde kolom is.

Een rij is dus horizontaal, een kolom vertikaal.

De hoogte van cel 1.1 is nu 40 pixels. De hoogte van cel 1.2 is nu ook 40 pixels, omdat cel 1.1 en 1.2 in dezelfde rij zitten.
De hoogte van cel 2.1 en 2.2. is 60 pixels.

Dit moet je ervaren om het goed te snappen, dus een beetje uitproberen kan geen kwaad.

<TABLE width="75%">     <TR>         <TD>Cel 1.1</TD>         <TD>Cel 1.2</TD>     </TR>     <TR>         <TD colspan="2">Cel 2.1 / 2.2</TD>     </TR> </TABLE>

Resultaat:

Cel 1.1 Cel 1.2 Cel 2.1 / 2.2

In deze tabel geven we d.m.v. het attribuut "colspan" aan, dat cel 2.1 en 2.2 worden samengevoegd. Om twee cellen uit een kolom samen te voegen, gebruiken we rowspan:

<TABLE width="75%">     <TR>         <TD rowspan="2" valign="top">Cel 1.1</TD>         <TD align="center">Cel 1.2</TD>     </TR>     <TR>         <TD align="center">Cel 2.2</TD>     </TR> </TABLE>

Resultaat:

Cel 1.1 / 2.1 Cel 1.2 Cel 2.2

valign (vertical align = vertikaal uitlijnen) :
In de eerste td tag gebruiken we valign="top". Als we dit attribuut er niet in zetten, staat de tekst ( "Cel 1.1 / 2.1" ) vertikaal gecentreerd. Door de waarde "top" staat de tekst bovenaan. Met de waarde "bottom" staat de tekst onderaan. Met "center" staat de tekst in het midden.

align ( = uitlijnen) :
We gebruiken align="center" om de tekst in cel 1.2 en 2.2 te centreren. Het is hetzelfde als dat je <CENTER> en </CENTER> om de tekst ("Cel 1.1" en"Cel 2.1") plaatst. Je kunt ook de waardes "left" en "right" gebruiken voor links en rechts uitlijnen.

Index

Hoofdstuk 1 - Hoofdstuk 2 - Hoofdstuk 3 - Hoofdstuk 4
Hoofdstuk 5 - Hoofdstuk 6 - Hoofdstuk 7 - Hoofdstuk 8
Hoofdstuk 9 - Hoofdstuk 10

Wat vind je van deze pagina? 88% Je moet ingelogd zijn om te kunnen stemmen!