Toveren met tabellen
Les 6

Een tabel in een tabel

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

Een plaatje splitsen met een tabel

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=4>Netscape tegen Microsoft? </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