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

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 bestuderen of opzetten kunnen we het ons makkelijker maken door de kaders aan te zetten.

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 zo breed maken als het scherm.

<TABLE BORDER=3 WIDTH=100%>
<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

Als je naar de broncode van deze pagina kijkt zul je zien dat ik zelf WIDTH=90% gebruik. Zo voorkom ik een horizontale schuifbalk door mijn gebruik van de <BLOCKQUOTE> tag.

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

<TABLE BORDER=3 WIDTH=100%>
<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!

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