Toveren met tabellen
Les 2
Tabelranden
Ok, we hadden dus dit gemaakt...
<TABLE>
<TR>
<TD>JAN</TD>
</TR>
</TABLE>
...en we kregen dit te zien:
Dit lijkt niet erg op een tabel hè? We zullen er eens een kader omheen zetten om je te laten zien dat het wel degelijk een tabel is.
<TABLE BORDER=1>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Wat dacht je van een iets groter kader?
<TABLE BORDER=5>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Of een enorm kader?
<TABLE BORDER=25>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Of wil je misschien helemaal geen kader?
<TABLE BORDER=0>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Zoals je ziet is de standaardwaarde geen kader.
We houden het nu even op een bescheiden kadertje.
<TABLE BORDER=3>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
De afmetingen
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>
Het is niet zo moeilijk om afmetingen te manipuleren.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Jan, Frank en Henk</TD>
</TR>
</TABLE>
Wat dacht je hiervan?
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Jan, Frank en Henk</TD>
</TR>
</TABLE>
We sturen de vrienden van Jan even weg.
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Absolute en relatieve maten
We verkleinen de tabel even tot 50% van je schermgrootte.
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
We geven nu een breedte van 50 op in plaats van 50%.
<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Nu 100.
<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Zoals je ziet zijn er twee manieren om de tabelbreedte op te geven. Je kunt een relative maat opgeven (50% van de schermbreedte) of een absolute maat (50 pixels). Welke manier je wanneer moet gebruiken moet je zelf uitvinden.
We kunnen ook een beetje spelen met de hoogte.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Jan</TD>
</TR>
</TABLE>
Horizontale uitlijning in de cel
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>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Jan</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Jan</TD>
</TR>
</TABLE>
De oplettende lezer heeft al gemerkt dat de standaardwaarde ALIGN=LEFT is. De standaardwaarde is, zoals je ongetwijfeld weet, de waarde die de browser aanneemt als je niets anders hebt opgegeven.
Verticale uitlijning in de cel
We hebben ook invloed op de verticale plaatsing van de data in de cel.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Jan</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Jan</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Jan</TD>
</TR>
</TABLE>
De standaardwaarde is in het midden.
Plaatjes
in een cel
Nu nog even dit: je kunt ook plaatjes gebruiken in een cel. In de map afb van deze cursus vind je een plaatje dat luistert naar de naam jan.gif.
Kopieer het 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>
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 zet de browser vast 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.
