3.1 Een tabel maken
Een tabel bestaat uit een aantal rijen (horizontaal) en kolommen (vertikaal) zoals hier onder.
| Kolom 1 |
Kolom 2 | Kolom 3 | Kolom 4 |
| | | | |
| | | | |
Hierboven heb je 3 rijen en 4 kolommen, je hebt dan dus 3 x 4 = 12 hokjes, dat noem je de cellen.
In zo'n cel kan tekst maar ook een plaatje staan.
De tag <table>
geeft het begin van een tabel aan, en
de bijbehorende eindtag </table>
geeft het einde van de tabel aan.
Bij deze tag horen verschillende attributen, bijv. border=1 Daarmee geef je aan dat er een rand om de cellen getekend wordt. Met border=0 is die rand er niet.
<tr> geeft aan dat er een nieuwe rij van de tabel begint en
</tr> geeft het einde van de rij aan.
<td> geeft aan dat er een nieuwe cel van de tabel begint, en </td> geeft het einde van de cel aan.
De tag <TH>
kun je in plaats van de <td>-tag gebruikten. Hiermee kan de cel extra worden benadrukt en je gebruikt dat vaak voor de titelrij. De bijbehorende eindtag is natuurlijk </TH>
Een tabel met drie rijen en vier kolommen maak je bijvoorbeeld als volgt:
<table border=1>
<tr>
<th> Kolom 1 </th> <th> Kolom 2 </th> <th> Kolom 3 </th>
<th> Kolom 4 </th></tr>
<tr>
<td>rij 2 kol 1 </td>
<td>rij 2 kol 2 </td>
<td>rij 2 kol 3 </td>
<td>rij 2 kol 4 </td></tr>
<tr>
<td>rij 3 kol 1 </td>
<td>rij 3 kol 2 </td>
<td>rij 3 kol 3 </td>
<td>rij 3 kol 4 </td></tr>
</table>
en dat ziet er dan zo uit:
| Kolom 1 | Kolom 2 | Kolom 3 | Kolom 4 |
| rij 2 kol 1 | rij 2 kol 2 | rij 2 kol 3 | rij 2 kol 4 |
| rij 3 kol 1 | rij 3 kol 2 | rij 3 kol 3 | rij 3 kol 4 |
3.2 rowspan en colspan
Je kunt cellen in een tabel samenvoegen. Dat doe je door een attribuut bij de td-tag te gebruiken.
Als je een aantal cellen naast elkaar wilt samenvoegen tot één cel dan gebruik je het attribuut colspan=n, en
als je een aantal cellen onder elkaar wilt samenvoegen tot één cel dan gebruik je het attribuut rowspan=n.
Als je in de tabel hierboven de vier cellen van de bovenste rij bijelkaar wilt nemen, en daaronder de twee in de linker kolom, dan doe je dat als volgt:
<table border=1>
<tr>
<td colspan=4> Dit is de eerste rij, 4 cellen samengenomen </td></tr>
<tr>
<td rowspan=2>rij 2/3 kolom 1 </td>
<td>rij 2 kol 2 </td>
<td>rij 2 kol 3 </td>
<td>rij 2 kol 4 </td></tr>
<tr>
<td>rij 3 kol 2 </td>
<td>rij 3 kol 3 </td>
<td>rij 3 kol 4 </td></tr>
</table>
en dat ziet er dan zo uit:
| Dit is de eerste rij, 4 cellen samengenomen |
| rij 2/3 kolom 1 | rij 2 kol 2 | rij 2 kol 3 | rij 2 kol 4 |
| rij 3 kol 2 | rij 3 kol 3 | rij 3 kol 4 |
Oefening:
Maak m.b.v. Kladblok, of een andere rekstverwerker, een html-document.
Maak in dat document een tabel met vier rijen en drie kolommen, met de
tabelkoppen in de eerste rij. Zorg er voor dat de drie cellen in de linker kolom samengevoegd worden tot één cel.
Daarin moet het woord "links" verschijnen. In de andere cellen moeten nummertjes komen: 1 t/m 8
Sla het bestand op, en bekijk het met een browser.
Meer mogelijkheden met tabellen
Er zijn veel attributen mogelijk bij de table-tag en ook bij de td-tag.
3.3 Attributen bij de table-tag
width en height
| <table width="50%"> |
De tabel beslaat de helft van het venster, in de breedte. |
| <table width="700"> |
De tabel heeft een breedte van 700 pixels. |
| <table height="400"> |
De tabel heeft een hoogte van 400 pixels (verouderd) |
align
| <table align="left"> |
De tabel verschijnt links |
| <table aligh="center"> |
De tabel verschijnt in het midden. De tekst loopt niet om de tabel heen |
| <table align="right"> |
Lijnt de tabel rechts uit met de tekst. |
border, cellspacing, cellpadding, bgcolor, Background
| <table border="0"> |
Geen rand om de cellen |
| <table border="1"> |
Een rand om de cellen, hoe groter het getal hoe meer 3D-effect |
| <table cellspacing="50"> |
De witruimte om de cellen is 50 pixels |
| <table cellpadding="10"> |
De witruimte tussen de tekst en de celrand is 100 pixels |
| <table bgcolor="#ff0000"> |
De achtergrondkleur is rood |
| <table background="world.gif"> |
De achtergrond is het plaatje world.gif |
| <table summary="lonen"> |
De naam van de tabel wordt lonen |
Frame
| <table frame="box"> |
Aan alle zijden van de cellen een rand |
| <table frame="void"> |
Geen randen om de cellen |
| <table frame=above> |
Alleen bovenranden van de cellen |
| <table frame=below> |
Alleen benedenranden van de cellen |
| <table frame=hsides> |
Alleen randen aan de boven- en onderkant van de cellen |
| <table frame=vsides> |
Alleen randen aan de linker- en rechterkant van de cellen |
| <table frame=lhs> |
Alleen randen aan de linkerkant van de cellen |
| <table frame=rhs> |
Alleen randen aan de rechterkant van de cellen |
Voorbeeld:
Als je de table-tag van de tabel bovenaan deze pagina verandert in:
<table border=2 cellpadding=10 cellspacing=20 FRAME=hsides>
en de rest laat je gelijk, dan ziet de tabel er zo uit:
| Kolom 1 |
Kolom 2 | Kolom 3 | Kolom 4 |
| | | | |
| | | | |
3.4 Een kop bij een tabel
Als je een kop boven de tabel wilt hebben, gebruik dan de volgende code.
<table border=1 width=50% align=center>
<caption align=top>Dit staat boven de tabel</caption> enz.
| <caption align=top> |
De kop verschijnt boven de tabel, gecentreerd |
| <caption align=bottom> |
De tekst komt onder de tabel te staan. |
| <caption align=left> |
De tekst wordt links boven de tabel uitgelijnd. |
| <caption align=right> |
De tekst wordt rechts boven de tabel uitgelijnd. |
3.5 Attributen bij de td-tag (en eventueel de TH-tag)
width, height, rowspan, colspan
| <td width=50> |
De cel heeft een breedte van 50 pixels |
| <td height=400> |
De cel heeft een hoogte van 400 pixels. |
| <td rowspan=3> |
Drie cellen onder elkaar worden bij elkaar genomen |
| <td colspan=4> |
Vier cellen naast elkaar worden bij elkaar genomen |
Valign, align, Backcolor, Background
| <td valign=top> |
De tekst begint boven in de cel |
| <td valign=middle> |
De tekst wordt vertikaal gecentreerd |
| <td valign=bottom> |
De tekst eindigt onder in de cel |
| <td align=right> |
De tekst wordt rechts uitgelijnd in de cel |
| <td align=left> |
De tekst wordt links uitgelijnd in de cel |
| <td align=center> |
De tekst wordt horizontaal gecentreerd |
| <td backcolor="#0000FF"> |
De achtergrondkleur van de cel is blauw |
| <td background="world.gif"> |
Het plaatje "world.gif" verschijnt als achtergrond in de cel |
Voorbeeld:
<table border="6" cellpadding="2" cellspacing="10" width="300">
<caption align=right>Dit is een voorbeeld</caption>
<tr><td bgcolor="#CCCCCC" rowspan="4" valign="top">vier cellen onder elkaar samen genomen</td>
<td colspan="3">drie cellen naast elkaar samengenomen</td></tr>
<tr><td bgcolor="red" > rood </td> <td bgcolor="#0000ff"" >blauw </td> <td bgcolor="yellow">geel </td></tr>
<tr><td colspan="3" align="right">rechts uitgelijnd </td></tr>
<tr><td height=100" valign="top">boven </td> <td valign="bottom>onder </td> <td align="middle">midden </td> <td></tr>
</table>
En dat ziet er zo uit:
Dit is een voorbeeld
| vier cellen onder elkaar samen genomen | drie cellen naast elkaar samengenomen |
| rood | blauw | geel |
| rechts uitgelijnd |
| boven | onder | midden |
3.6 Tekst met een kader
Als je een gekleurde rand om een tekst wilt hebben dan kan dat met een tabel in een tabel:
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FF0000">
<tr>
<td>
<table border="0" bgcolor="#CCCC00">
<tr>
<td>
Een rode rand om deze tekst
</td>
</tr>
</table>
</td>
</tr>
</table>
Dat ziet er zo uit (de dikte van de rand wordt bepaald door
het getal achter cellpadding) :
|
Een rode rand om deze tekst
|
|
|