Kunnen we ook een tabel in een tabel zetten. Gelukkig wel. Je kunt er namelijk heel mooie effecten mee creëren.
Laten we het eens proberen. Begin met kleine Jan.

<TABLE BORDER=3>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>

Jan

Maak de tabel iets groter.

<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>

Jan

Vervang Jan door een complete "kleine Jan" tabel

<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>
 
<TABLE BORDER=3>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
 
</TD>
</TR>
</TABLE>

Jan

Is dat leuk of niet?

Onze tabel kan ook makkelijk gecentreerd worden.

<CENTER>
<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>
 
<TABLE BORDER=3>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
 
</TD>
</TR>
</TABLE>
</CENTER>

Jan

Hier komt een situatie die we met een tabel kunnen oplossen.
Stel dat je een lumineus idee hebt voor een bewegend plaatje (animatad gif). Het probleem is alleen dat je plaatje wat aan de grote kant is. Misschien weet je dat een animated gif uit een serie gif's bestaat die na elkaar worden getoond. Je bestand wordt dus zo groot al het plaatje maal het aantal keren dat het na elkaar getoond wordt. De lezers van je homepage zullen niet blij zijn als er ongevraagd 700 kB data door hun telefoonlijn geperst wordt. En dat is nog niet alles; van een plaatje van dat formaat kan de browser het ook behoorlijk moeilijk krijgen, zeker op de wat tragere systemen. De oplossing? Verdeel het plaatje in hapklare brokken en zet ze in een tabel.

Hier is een voorbeeld:

Netscape tegen Microsoft?
Artwork by Boris Vallejo
Hier is dezelfde tabel maar nu met de CELLSPACING aangezet.

Netscape tegen Microsoft?

Je ziet dat het enige bewegende deel van het plaatje de ogen zijn. Alleen dat kleine stukje hoeft dus meerdere keren getoond te worden om het te laten bewegen. Het zou zonde van de bandbreedte zijn om de rest, die toch hetzelfde blijft, ook steeds opnieuw binnen te halen.

Hier is de HTML code voor die tabel. (De titel tussen de <CAPTION> tags heb ik er zelf voor de grap bijgezet. Het is natuurlijk niet noodzakelijk en het heeft verder geen effect op de tabel. Je hebt nu wel weer een extra tag geleerd.

<TABLE WIDTH=591 BORDER=0 CELLSPACING=0 CELLPADDING=0>
<CAPTION ALIGN=top><FONT SIZE=6><B><I>Netscape tegen Microsoft?</I></B></FONT></CAPTION>
 
<TR>
<TD ROWSPAN=3><IMG SRC="draak/draak4.gif" WIDTH=250 HEIGHT=406></TD>
<TD><IMG SRC="draak/draak3.gif" WIDTH=122 HEIGHT=109></TD>
<TD ROWSPAN=3><IMG SRC="draak/draak5.gif" WIDTH=219 HEIGHT=406></TD>
</TR>
 
<TR>
<TD><IMG SRC="draak/ogen.gif" WIDTH=122 HEIGHT=50></TD>
</TR>
 
<TR>
<TD><IMG SRC="draak/draak2.gif" WIDTH=122 HEIGHT=247></TD>
</TR>
 
</TABLE>

Dit is de layout.

draak4.gif
draak3.gif 		draak5.gif
ogen.gif
draak2.gif

Hieronder staan nog wat voorbeelden om te oefenen. Het toveren met tabellen kan nu dus echt beginnen.
Het eerste voorbeeld (de tafel) wordt wat nader uitgelegd als je de link onder de tekening volgt. Het schaakbord moet je zelf maar eens proberen te reproduceren zonder in de broncode te spieken. Neem er wel de tijd voor. Ik ben er zelf een paar uur mee zoet geweest. En je kunt er nog niet eens mee spelen!


Do it with a Table!








(JA, DEZE TAFEL IS EEN TABEL!)

Een paar tips dan. Je weet dat de browser de cellen van een tabel zo groot maakt als nodig. Aangezien de velden waar geen schaakstukken staan dan leeg zijn zouden ze worden verkleind tot niets. Daarom zijn ze opgevuld met het bestandje empty.gif. Dat is het transparante plaatje dat we ook bij de tafel hebben gebruikt.
Het kader om het schaakbord is gemaakt door een tabel in een tabel te zetten.
Hier zul je het mee moeten doen. Doe jezelf een plezier en kijk niet stiekum in de broncode.

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