cursus 2: toveren met TABELLEN

Les 3


De achtergrondkleur van de tabel


We beginnen met een simpele tabel:

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>

Je kunt een achtergrondkleur specificeren voor een cel, een rij of de hele tabel.
Gebruik gewoon de optie bgcolor gevolgd door een kleurcode (zie kleurentabel) of een (Engelse) kleurnaam (zie kleurennamen). Dit gaat hetzelfde als bij de optie bgcolor van de body-tag.
Bijvoorbeeld om de kleur van de achtergrond van de hele tabel te wijzigen:

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

Of om de kleur van de achtergrond van de rijen te wijzigen:

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

Of om de kleur van de individuele cellen te wijzigen:

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

Nog een kleinigheidje over deze achtergrondkleuren met betrekking tot tabellen...
Een <td bgcolor> heeft voorrang op een <tr bgcolor> en die heeft weer voorrang op een <table bgcolor> .
Een voorbeeld om dit duidelijker te maken...

Jan Kees Piet
Rick Jeroen Ronald

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


De optie colspan en de optie rowspan


We gaan de opties colspan (Column Span) en rowspan (Row Span) bespreken. Met deze opties kun je de celinhoud over meerdere kolommen of rijen laten lopen. Met een cijfer geef je aan over hoeveel kolommen of rijen het gaat. Een voorbeeldje ...
We starten met de tabel met de zes jongens:

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>

Vervolgens wordt Kees uit de tabel gegooid:

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

Er ontstaat een lege plek en Piet schuift op om die plek te bezetten.
Jan heeft de oudste rechten en wil de plaats van Kees erbij. Dat kan geregeld worden met de optie colspan:

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

Als Piet ook nog verdwijnt kan Jan zijn plaats er ook nog bij nemen. De optie colspan wordt nu op 3 gezet. Met de optie align="center" wordt Jan bovendien in het midden gezet.

Jan
Rick Jeroen Ronald
<table border="3">
<tr>
<td colspan="3" align="center">Jan</td>
<tr>
<td>Rick</td>
<td>Jeroen</td>
<td>Ronald</td>
</tr>
</table>

Je kunt overigens ook allerlei andere html-tags in een cel zetten. We zullen Jan bijvoorbeeld eens vet maken. Ook maken we van Jan een link naar de website van heerhugowaard.

Jan
Rick Jeroen Ronald
<table border="3">
<tr>
<td colspan="3" align="center"><a href="http://www.huygenwaard.nl"><b>Jan</b></a></td>
<tr>
<td>Rick</td>
<td>Jeroen</td>
<td>Ronald</td>
</tr>
</table>

We starten weer met de tabel met de zes jongens:

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>

We bekijken nu de optie rowspan. Zoals je wel zult vermoeden doet rowspan met rijen wat colspan met kolommen doet.
Als we Rick weghalen en zijn cel laten overnemen door Jan, gebeurt er het volgende...

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

Als laatste een voorbeeld van een tabel waarin zowel de optie colspan als de optie rowspan gebruikt wordt.

Jan Kees
Jeroen Ronald
<table border="3">
<tr>
<td rowspan=2>Jan</td>
<td colspan=2>Kees</td>
</tr>
<tr>
<td>Jeroen</td>
<td>Ronald</td>
</tr>
</table>

Als er verder geen vragen zijn gaan we in de volgende les het geleerde eens in praktijk brengen.


einde les 3
naar les 4