Toveren met tabellen
Les 3

Meer dan één kolom

Laten we even terug gaan naar een simpel tabelletje met alleen Jan erin.

<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.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Jan</TD>
<TD>Frank</TD>
</TR>
</TABLE>

Jan

Frank

De celbreedte

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

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.

<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

Meer dan één rij

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 afstand van de inhoud tot de celrand

De volgende optie die we gaan bespreken is CELLPADDING. Deze optie wordt 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 standaardwaarde 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.

De afstand tussen de cellen onderling

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 standaardwaarde 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