Wat is dat nou voor flauwe kul? We maken dit......

<TABLE>
<TR>
<TD>JAN</TD>
</TR>
</TABLE>

......en we krijgen dit te zien:

Jan

Dit lijkt niet erg op een tabel hè? We zullen er eens een kadertje omheen zetten om je te laten zien dat het wel degelijk een tabel is.

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

Jan

Wat dacht je van een iets groter kader?

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

Jan

Of een enorm kader?

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

Jan

Of wil je misschien helemaal geen kader?

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

Jan

Zoals je ziet is de standaard waarde geen kader.

We houden het nu even op een bescheiden kadertje.

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

Jan

Wanneer je geen afmetingen opgeeft wordt de tabel zo groot als nodig is.

<TABLE BORDER=3>
<TR>
<TD>Jan, Frank en Henk</TD>
</TR>
</TABLE>

Jan, Frank en Henk

Het is niet zo moeilijk om afmetingen te manipuleren.

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Jan, Frank en Henk</TD>
</TR>
</TABLE>

Jan, Frank en Henk

Wat dacht je hiervan?

<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Jan, Frank en Henk</TD>
</TR>
</TABLE>

Jan, Frank en Henk

We sturen de vrienden van Jan even weg.

<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>

Jan

We verkleinen de tabel even tot 50% van je schermgrootte.

<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>

Jan

We geven nu een breedte van 50 op in plaats van 50%.

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

Jan

Nu 100.

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

Jan

Zoals je ziet zijn er twee manieren om de tabelbreedte op te geven. Welke manier je wanneer moet gebruiken zul je vanzelf uitvinden. Als je de Frames cursus gevolgd hebt, heb je al het nodige kunnen oefenen in het gebruik van percentages en pixels

We kunnen ook een beetje spelen met de hoogte.

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

Jan

We kunnen zelf beslissen waar de tekst in de cel verschijnt.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Jan</TD>
</TR>
</TABLE>

Jan

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Jan</TD>
</TR>
</TABLE>

Jan

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Jan</TD>
</TR>
</TABLE>

Jan

De oplettende lezer heeft al gemerkt dat de standaard waarde ALIGN=LEFT is. De standaard waarde is, zoals je ongetwijfeld weet, de waarde die de browser aanneemt als je niets anders opgegeeft.

Hebben we ook invloed op de verticale plaatsing van de data in de cel? Jazeker!

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Jan</TD>
</TR>
</TABLE>

Jan

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Jan</TD>
</TR>
</TABLE>

Jan

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Jan</TD>
</TR>
</TABLE>

Jan

Zoals je al vermoedde: de standaard waarde is in het midden.
Let op dat we hier MIDDLE gebuiken en niet CENTER, zoals met de meeste centreringen.

Nu nog even dit: je kunt ook plaatjes gebruiken en manipuleren in een data cel. Als je deze cursus gedownload hebt vindt je in daarbij een plaatje dat luistert naar de naam jan.gif. Kopieer het maar even naar je werkmap. Vervang nu Jan door een IMG-tag.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="jan.gif" WIDTH=32 HEIGHT=32></TD>
</TR>
</TABLE>

Jan

Vergeet niet dat het altijd verstandig is om je plaatjes van afmetingen te voorzien. Als je geen afmetingen opgeeft zal de browser het plaatje eerst helemaal moeten laden voordat de tekst die eronder staat getoond kan worden. De browser weet tenslotte niet hoeveel ruimte hij voor het plaatje moet reserveren. Als je wel een afmeting opgeeft, reserveert de browser alvast een kader ter grootte van de afmetingen neer en kan hij de navolgende tekst er vast onder zetten. Op die manier kun je de tekst vast lezen, terwijl de browser de plaatjes nog aan het laden is. In deze tijd van filevorming op de electronische snelweg zullen je lezers je dankbaar zijn.

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