Haal nu de optie's CELLPADDING en CELLSPACING maar even weg zodat we onze 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
Een leuke feature van nieuwere browsers is dat 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 kleur te kiezen.
Nog een kleinigheidje over deze achtergrondkleuren met betrekking tot tabellen...
Stel, je geeft een rij een kleur en een cel een andere kleur. Hoe weet de browser nu welke kleur hij de cel moet maken>
De kleur van de rij of die van de cel?
Gelukkig hebben de bedenkers van de HTML-taal daarover nagedacht en een voorrangsregeling opgesteld.
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
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 Netscape of Internet Explorer gebruiken zit je als aardig goed als je documenten hierin goed werken. Maak je een site speciaal voor Linux of MAC gebruikers, zorg dan dat je de gangbare browsers voor die platforms geïnstalleerd hebt
Een ander belangrijk punt, waar we het al eerder over hebben gehad, is de schermresolutie. De meeste mensen werken met een 1024x768 resolutie en een aantal mensen gebruikt 800x600 of 640x480. 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 misschien??) 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...
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
Hier kunnen we een leuk voorbeeldje geven van het verhaal dat ik hierboven vertelde over browsers die met hun eigen oplossing komen. We laten de laatste wijzigingen staan en zetten Frank weer terug. We voeren dus opzettelijk een fout in om te kijken hoe het eruit ziet.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>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 Je ziet nu dus dat het belangrijk is dat je zorgvuldig te werk gaat anders kun je voor verassingen komen te staan. Dergelijke fouten in een HTML-document zijn er overigens zelden de oorzaak van dat de browser vastloopt. Dat kunnen we helaas niet zeggen van bewegende plaatjes en JAVA.
OK... we gooien die arme Frank er weer uit.
<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 mijn homepage.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://michael1.www.cistron.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
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.
Inleiding Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Les 7 Index