Toveren met tabellen
Les 4

De achtergrondkleur van de tabel

Haal nu de optie's CELLPADDING en CELLSPACING maar even weg zodat we weer een simpele tabel weer hebben.

<TABLE BORDER=3>

<TR>
<TD>Jan</TD>
<TD>Frank</TD>
<TD>Henk</TD>
</TR>

<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan Frank Henk
Rick Jeroen Ronald

Bij de nieuwere browsers kun je een achtergrondkleur kunt specificeren voor een cel, een rij of de hele tabel.
Gebruik gewoon de BGCOLOR-optie zoals je dat in de <BODY> tag zou doen.

<TABLE BORDER=3 BGCOLOR="#FFCC66">

<TR>
<TD>Jan</TD>
<TD>Frank</TD>
<TD>Henk</TD>
</TR>

<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan Frank Henk
Rick Jeroen Ronald

<TABLE BORDER=3>

<TR BGCOLOR="#FF9999">
<TD>Jan</TD>
<TD>Frank</TD>
<TD>Henk</TD>
</TR>

<TR BGCOLOR="#99CCCC">
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan Frank Henk
Rick Jeroen Ronald

<TABLE BORDER=3>

<TR BGCOLOR="#FFCCFF">
<TD>Jan</TD>
<TD>Frank</TD>
<TD>Henk</TD>
</TR>

<TR>
<TD BGCOLOR="#FF0000">Rick</TD>
<TD>Jeroen</TD>
<TD BGCOLOR="#3366FF">Ronald</TD>
</TR>

</TABLE>

Jan Frank Henk
Rick Jeroen Ronald

Hier staat een handige kleurentabel die je kunt gebruiken om de juiste kleurcode te kiezen.
En hier staat een handige kleurentabel die je kunt gebruiken om de juiste kleurnaam te kiezen.

De voorrangsregels

Nog een kleinigheidje over deze achtergrondkleuren met betrekking tot tabellen...
Een <TD BGCOLOR> heeft voorrang op een <TR BGCOLOR> en die heeft weer voorrang op een
<TABLE BGCOLOR>.
Een voorbeeldje om dit iets duidelijker te maken...

<TABLE BORDER=3 BGCOLOR="#FF6633" >

<TR BGCOLOR="#009900" >
<TD BGCOLOR="#9999FF" >Jan</TD>
<TD>Frank</TD>
<TD>Henk</TD>
</TR>

<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan Frank Henk
Rick Jeroen Ronald

Tussendoortje:
Laten we het eens even wat rustiger aan doen en neem even de tijd om het volgende te lezen. Een browser moet met de instructies die je hem geeft de pagina zo goed mogelijk weergeven. Als je iets om de een of andere reden niet gespecificeerd hebt, zullen de meeste browsers zelf met een oplossing komen, die er soms nog goed uitziet ook.
Het verstandigste om als HTML-designer te doen is zoveel mogelijk details opgeven, vooral als die details belangrijk zijn voor de opbouw van je pagina. Het is ook belangrijk dat je je documenten test met browsers die door de Internetsurfers gebruikt wordt. Aangezien de meeste mensen Explorer gebruiken zit je als aardig goed als je documenten hierin goed werken. Maar als je echt webpagina's gaat ontwerpen, is het handig dat je ook een recente versie van Netscape op je schijf hebt staan om ook hierin je pagina's te testen.
Een ander belangrijk punt, waar we het al eerder over hebben gehad, is de schermresolutie. De meeste werken met een 800x600 resolutie en een aantal mensen gebruikt 640x480 of 1024x768. Dit kleine verschilletje kan er de oorzaak van zijn dat je documenten op andere computers volkomen in de war worden geschopt. Test dus ook bij verschillende resoluties.
Na dit korte intermezzo gaan we weer verder met het echte werk. We gaan de opties COLSPAN (Column Span) en ROWSPAN (Row Span) bespreken. Met deze opties kun je de celinhoud over meerdere kolommen of rijen laten lopen. Met een cijfer geef je aan hoeveel kolommen je wilt bezetten. Een voorbeeldje...

De optie COLSPAN

Stel dat Jan bonje krijgt met Frank en hem uit de tabel gooit. Als je Frank gewoon weghaalt krijg je dit:

<TABLE BORDER=3>

<TR>
<TD>Jan</TD>
<TD>Henk</TD>
</TR>

<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan Henk
Rick Jeroen Ronald

Er ontstaat een lege plek en Henk schuift op om die plek te bezetten.

Als we willen dat Jan de cel van Frank overneemt en die ruimte tot de zijne maakt dan moeten we de optie COLSPAN gebruiken.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Jan</TD>
<TD>Henk</TD>
</TR>

<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan Henk
Rick Jeroen Ronald

Henk wordt bang en vertrekt ook. Jan neemt zijn cel over en gaat in het midden staan.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>Jan</TD>
</TR>

<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan
Rick Jeroen Ronald

Je kunt overigens ook allerlei andere HTML-tags in een cel zetten. We zullen Jan bijvoorbeeld eens vet maken.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER><B>Jan</B></TD>
</TR>

<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan
Rick Jeroen Ronald

Nu maken we hem een link naar de homepage van het St. Willibrordcollege.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://www.stwillibrord.nl">Jan</A></TD>
</TR>

<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan
Rick Jeroen Ronald

Haal alles maar weer weg en zet Henk en Frank weer terug.

<TABLE BORDER=3>

<TR>
<TD>Jan</TD>
<TD>Frank</TD>
<TD>Henk</TD>
</TR>

<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan Frank Henk
Rick Jeroen Ronald

De optie ROWSPAN

Nu we weer terug bij af zijn gaan we kijken naar <ROWSPAN>. Zoals je wel zult vermoeden doet <ROWSPAN> met rijen wat <COLSPAN> met kolommen doet.
Als we Rick weghalen en zijn cel laten overnemen door Jan, gebeurt er het volgende...

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Jan</TD>
<TD>Frank</TD>
<TD>Henk</TD>
</TR>

<TR>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan Frank Henk
Jeroen Ronald

Natuurlijk kunnen alle tags in combinatie gebruikt worden.

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Jan</TD>
<TD COLSPAN=2>Frank</TD>
</TR>

<TR>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>

</TABLE>

Jan Frank
Jeroen Ronald

Als er verder geen vragen zijn gaan we in de volgende les het geleerde eens in praktijk brengen.

Intro Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Les 7 Index