In het vorige hoofdstuk heb je al een beetje geleerd hoe je een tabel maakt. Nu gaan we hier mee verder.

<TABLE width="75%" border="1" bordercolor="#999999" cellpadding="15" cellspacing="2">     <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 Cel 1.2 Cel 2.2

Border:
De border van je tabel is de rand die eromheen zit. Hij zorgt voornamelijk voor overzicht. We hebben "border" de waarde "1" gegeven, en dit betekend dat de lijn 1 pixel dik is.

Bordercolor:
Hiermee geef je de kleur van je border aan. Je gebruikt hierbij een hex-code (zie hoofdstuk 3; kleuren).

Cellpadding:
Cellpadding is de ruimte tussen je border en de tekst. Ik heb hem expres de waarde "15" gegeven, zodat je goed kan zien wat ik nou bedoel. Je ziet dat de tekst aan alle kanten minimaal 15 pixels van de border af staat.

Cellspacing:
Zoals je in het voorbeeld ziet, een tabel meerdere lijnen als border. De ruimte tussen deze lijnen bepaal je door "cellspacing". Test het zelf uit door deze bijv. de waarde 20 te geven. Dan is de ruimte tussen de lijntjes 20 pixels.


Tabbellen en achtergrondkleuren:

<TABLE width="75%" bgcolor="#FF0000">     <TR>         <TD rowspan="2">Cel 1.1</TD>         <TD>Cel 1.2</TD>     </TR>     <TR>         <TD bgcolor="#0000FF">Cel 2.2</TD>     </TR> </TABLE>

Resultaat:

Cel 1.1 Cel 1.2 Cel 2.2

bgcolor (background color) kun je voor een table, tr en td tag gebruiken. Je geeft hem als waarde een hex-code.


Mouseover:

<TABLE width="75%" bgcolor="#FF0000" onMouseover="style.backgroundColor='#FFFFFF';" onMouseout="style.backgroundColor='#CC0000'">     <TR>         <TD rowspan="2">Cel 1.1</TD>         <TD>Cel 1.2</TD>     </TR>     <TR>         <TD bgcolor="#0000FF">Cel 2.2</TD>     </TR> </TABLE>

Resultaat:

Cel 1.1 Cel 1.2 Cel 2.2

Door bgcolor is je tabel rood. Door onMouseover wordt je tabel wit als je eroverheen gaat en door onMouseout wordt je tabel groen als je er met je muis overheen bent geweest.
Dit kun je ook voor een tr en td tag gebruiken.

Dit van onMouseover en onMouseout is Javascript en geen HTML, dus we wijken af... Ik vond het wel even de moeite waard om het in deze cursus te vermelden.

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? 94% Je moet ingelogd zijn om te kunnen stemmen!