Toveren met tabellen
Les 5

De tabel gebruikt voor de opmaak

Zoals gezegd gaan we nu in praktijk brengen wat we tot nu toe geleerd hebben...
Los van de dingen die ik voorkauw kun je natuurlijk zelf ook wat dingen uitproberen om te zien wat er gebeurt.

Hier is een kleine ongesorteerde lijst:

Ingrediënten voor appeltaart

• Appels
• Meel
• Suiker
• Kaneel

Opmerking:
Probeer nu niet meteen een appeltaart te bakken want je hebt nog meer nodig. Ik weet niet wat allemaal; ik ben tenslotte geen banketbakker.

Dit is allemaal leuk en aardig, maar wat als we het recept hier willen plaatsen...

Ingrediënten voor Appeltaart Appels Meel Suiker Kaneel

...omdat we er een plaatje naast willen zetten van een...     appeltaart!

Ingrediënten voor Appeltaart Appels Meel Suiker Kaneel

Om dit te bereiken kunnen we wel een tabel gebruiken, denk je niet?

Als we een tabel maken, zetten we er eerst kaders om. Dan zie je tenminste wat je doet!

Ingrediënten voor Appeltaart Appels Meel Suiker Kaneel

We gaan dit tabelletje stap voor stap opbouwen. Het is eigenlijk niet zo moeilijk!

Begin met kleine Jan.

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

Jan

Vervang Jan door de ongeordende lijst.

<TABLE BORDER=3>
<TR>

<TD>
Ingrediënten voor Appeltaart
<UL>
<LI>Appels
<LI>Meel
<LI>Suiker
<LI>Kaneel
</UL>
</TD>

</TR>
</TABLE>

Ingrediënten voor Appeltaart Appels Meel Suiker Kaneel

Weet je nog, als je geen afmeting opgeeft maakt de browser de tabel zo groot als hij zijn moet om de data er in te laten passen.

Vervolgens gaan we de tabel (bijna) zo breed maken als het scherm.

<TABLE BORDER=3 WIDTH=90%>
<TR>

<TD>
Ingrediënten voor Appeltaart
<UL>
<LI>Appels
<LI>Meel
<LI>Suiker
<LI>Kaneel
</UL>
</TD>

</TR>
</TABLE>

Ingrediënten voor Appeltaart Appels Meel Suiker Kaneel

Nu gaan we een tweede cel maken. De linker cel maken we iets kleiner dan de rechter cel.

<TABLE BORDER=3 WIDTH=90%>
<TR>

<TD WIDTH=40%></TD>

<TD WIDTH=60%>
Ingrediënten voor Appeltaart
<UL>
<LI>Appels
<LI>Meel
<LI>Suiker
<LI>Kaneel
</UL>
</TD>

</TR>
</TABLE>

Ingrediënten voor Appeltaart Appels Meel Suiker Kaneel

Als je dat nog niet gedaan hebt, kopieer dan nu even het plaatje van de appeltaart (applepie.gif) naar je werkdirectory.
Zet het nu in de linker cel.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>

<TD WIDTH=60%>
Ingrediënten voor Appeltaart
<UL>
<LI>Appels
<LI>Meel
<LI>Suiker
<LI>Kaneel
</UL>
</TD>

</TR>
</TABLE>

Ingrediënten voor Appeltaart Appels Meel Suiker Kaneel

Alles wat we nu nog moeten doen is het plaatje aan de rechterkant van de cel uitlijnen en de kaders uitzetten.

<TABLE BORDER=0 WIDTH=100%>
<TR>

<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>

<TD WIDTH=60%>
Ingrediënten voor Appeltaart
<UL>
<LI>Appels
<LI>Meel
<LI>Suiker
<LI>Kaneel
</UL>
</TD>

</TR>
</TABLE>

Ingrediënten voor Appeltaart Appels Meel Suiker Kaneel

Het is weer gelukt!