Laten we even terug gaan naar ons tabelletje met alleen Jan erin.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Jan</TD>
</TR>
</TABLE>
Jan
Voor de leesbaarheid halen we alle opties die in de <TD>-tag staan even weg. We weten nu hoe het er uit komt te zien wat we weten wat de standaard waarden zijn. Tussen twee haakjes, een TAG vertelt de browser dat hij iets moet doen. Een OPTIE staat in de TAG en vertelt de browser hoe hij dat moet doen.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Jan
We maken nu onze tabel iets groter.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Jan
Jan's vriend Frank is terug en hij wil deze keer zijn eigen cel.
Een nieuwe cel in dezelfde rij maak je door een extra setje <TD> tags toe te voegen.<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Jan</TD>
<TD>Frank</TD>
</TR>
</TABLE>
Jan Frank
Wanneer je geen speciale instructies aan de browser geeft, kunnen alle cellen een andere afmeting hebben. Dat hoeft dus niet! Daarom kun je het beste opgeven hoe groot elke cel moet zijn. Zorg dat de afzonderlijke cellen samen even groot zijn als de complete tabel anders kunnen er wel eens rare dingen gebeuren.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=150>Jan</TD>
<TD WIDTH=150>Frank</TD>
</TR>
</TABLE>
Jan Frank
De WIDTH optie kun je ook in percentages opgeven.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=50%>Jan</TD>
<TD WIDTH=50%>Frank</TD>
</TR>
</TABLE>
Jan Frank Alsje Netscape gebruikt en je de indruk hebt dat de cellen niet precies even breed zijn, dan heb je gelijk. De inhoud van de rechter cel is langer en daardoor maakt Netscape de cel breder, ondanks dat je een breedte heb opgegeven. Dit is een beetje vreemd gedrag van Netscape. Internet Explorer zal de cellen wèl even breed maken.
Aangezien Jan er eerder was krijgt hij een grotere cel.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=80%>Jan</TD>
<TD WIDTH=20%>Frank</TD>
</TR>
</TABLE>
Jan Frank
Nu komt Henk ook terug en ook hij wil zijn eigen cel. We moeten beslissen hoeveel ruimte van het totaal hij krijgt. Ik denk dat 20% wel voldoende is voor hem. Vergeet niet om Jan's deel aan te passen. Het totaal moet tenslotte 100% zijn.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Jan</TD>
<TD WIDTH=20%>Frank</TD>
<TD WIDTH=20%>Henk</TD>
</TR>
</TABLE>
Jan Frank Henk
Drie vrienden die toevallig aan de overkant lopen zien wat er gebeurt en willen ook een plekje in de tabel. Aangezien het dan wel dringen wordt in de rij geven we die drie hun eigen rij.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Jan</TD>
<TD WIDTH=20%>Frank</TD>
<TD WIDTH=20%>Henk</TD>
</TR>
<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
<TD>Ronald</TD>
</TR>
</TABLE>
Jan Frank Henk Rick Jeroen Ronald Zoals je ziet wordt de WIDTH optie die je in de eerste rij hebt opgegeven overgenomen in de tweede rij.
Als Ronald naar huis gaat hebben we nog steeds een goede tabel, al hebben we nu wel wat leegstand.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Jan</TD>
<TD WIDTH=20%>Frank</TD>
<TD WIDTH=20%>Henk</TD>
</TR>
<TR>
<TD>Rick</TD>
<TD>Jeroen</TD>
</TR>
</TABLE>
Jan Frank Henk Rick Jeroen
Ronald bedenkt zich en komt terug. We halen alle opties weg behalve de BORDER.
<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 Frank Ronald
De volgende twee opties die we gaan bespreken zijn CELLPADDING en CELLSPACING. Beide opties worden in de <TABLE> tag gezet. CELLPADDING is de hoeveelheid witruimte tussen de kaders van de cel en de inhoud.
<TABLE BORDER=3 CELLPADDING=12>
<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 De standaard waarde voor deze optie is 1. De reden waarom het 1 is en niet 0 is dat de celinhoud niet tegen het kader aanzit als je niets opgeeft. Je kunt wel 0 opgeven als je dat wilt. Je zult later een voorbeeld zien waarin we dit gebruiken.
Als we CELLPADDING vervangen door CELLSPACING krijgen we een iets ander effect. CELLSPACING regelt de ruimte tussen de cellen onderling.
<TABLE BORDER=3 CELLSPACING=12>
<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 De standaard waarde voor CELLSPACING is 2.
Natuurlijk kunnen we deze twee opties ook in combinatie gebruiken.
<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>
<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
Inleiding Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Les 7 Index