cursus 2: toveren met TABELLEN

Les 2


Horizontale en vertical uitlijning in de cel


Maak een tabel met drie cellen:

Jan Kees Piet
<table border="3" width="250" height="50">
<tr>
<td>Jan</td>
<td>Kees</td>
<td>Piet</td>
</tr>
</table>

We kunnen zelf beslissen waar de tekst in de cel verschijnt. Daarvoor gebruiken we de optie align van de td-tag.

Jan Kees Piet
<table border="3" width="250" height="50">
<tr>
<td>Jan</td>
<td align="center">Kees</td>
<td align="right">Piet</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.
We hebben ook invloed op de verticale plaatsing van de data in de cel met de optie valign van de td-tag.

Jan Kees Piet

<table border="3" width="250" height="50">
<tr>
<td valign="top">Jan</td>
<td align="center" >Kees</td>
<td align="right" valign="bottom">Piet</td>
</tr>
</table>

De standaardwaarde is valign="middle" (in het midden).


Plaatjes in een cel


Nu nog even dit: je kunt ook plaatjes gebruiken in een cel. Hiernaast vind je een plaatje dat luistert naar de naam jan.gif. Sla het plaatje op in de map bij de pagina met de tabellen.
We gaan het plaatje nu in een tabel plaatsen:

<table border="10">
<tr>
<td ><img src="jan.gif" ></td>
</tr>
</table>

... en het resultaat is: Jan in een lijstje!


De celbreedte


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

Jan Kees
<table border="3" width="300" height="75">
<tr>
<td>Jan</td>
<td>Kees</td>
</tr>
</table>

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.

Jan Kees
<table border="3" width="300" height="75">
<tr>
<td width="150">Jan</td>
<td width="150">Kees</td>
</tr>
</table>

De width optie kun je ook in percentages opgeven.

Jan Kees
<table border="3" width="300" height="75">
<tr>
<td width="70%">Jan</td>
<td width="30%">Kees</td>
</tr>
</table>

Als Piet er ook nog bij komt, dan krijgen we het volgende:

Jan Kees Piet
<table border="3" width="300" height="75">
<tr>
<td width="60%">Jan</td>
<td width="20%">Kees</td>
<td width="20%">Piet</td>
</tr>
</table>

Jan was er het eerst, dus die krijgt de grootste cel ...


Meer dan één rij


Naast Jan, Kees en Piet willen ook Rick, Jeroen en Ronald een plaats in de tabel. Aangezien het dan wel dringen wordt in de rij geven we die drie een eigen rij.

Jan Kees Piet
Rick Jeroen Ronald
<table border="3" width="300" height="75">
<tr>
<td width="60%">Jan</td>
<td width="20%">Kees</td>
<td width="20%">Piet</td>
</tr>
<tr>
<td>Rick</td>
<td>Jeroen</td>
<td>Ronald</td>

</tr>
</table>

Zoals je ziet wordt de breedte van de cellen in de eerste rij automatisch overgenomen in de tweede rij.
Als Ronald verdwijnt hebben we nog steeds een goede tabel, al hebben we nu wel wat leegstand.

Jan Kees Piet
Rick Jeroen
<table border="3" width="300" height="75">
<tr>
<td width="60%">Jan</td>
<td width="20%">Kees</td>
<td width="20%">Piet</td>
</tr>
<tr>
<td>Rick</td>
<td>Jeroen</td>

</tr>
</table>

De cel rechtsonder is verdwenen!
Wil je in plaats van een verdwenen cel een lege cel, gebruik dan een non-breaking-space: &nbsp;.

Jan Kees Piet
Rick Jeroen  
<table border="3" width="300" height="75">
<tr>
<td width="60%">Jan</td>
<td width="20%">Kees</td>
<td width="20%">Piet</td>
</tr>
<tr>
<td>Rick</td>
<td>Jeroen</td>
<td>&nbsp;</td>
</tr>
</table>

Ronald komt terug. Verder halen we alle opties weg behalve rand (border="3").

Jan Kees Piet
Rick Jeroen Ronald
<table border="3">
<tr>
<td>Jan</td>
<td>Kees</td>
<td>Piet</td>
</tr>
<tr>
<td>Rick</td>
<td>Jeroen</td>
<td>Ronald</td>
</tr>
</table>

Cellpadding en cellspacing


De volgende optie die we gaan bespreken is de optie cellpadding van de table-tag. Met cellpadding is de hoeveelheid witruimte tussen de rand van de cel en de inhoud.

Jan Frank Henk
Rick Jeroen Ronald
<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>

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.
Als we cellpadding vervangen door cellspacing krijgen we een iets ander effect. Met cellspacing regel je de ruimte tussen de cellen onderling.

Jan Frank Henk
Rick Jeroen Ronald
<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>

De standaardwaarde voor cellspacing is 2.
Natuurlijk kunnen we deze twee opties ook in combinatie gebruiken.

Jan Frank Henk
Rick Jeroen Ronald
<table border="3" cellpadding="12" 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>

einde les 2
naar les 3