Tabellen
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.
<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>
De tag <caption> geeft het begin van een titel boven de tabel aan, en de bijbehorende eindtag is </caption>.
Een tabel met drie rijen en vier kolommen maak je bijvoorbeeld als volgt:
<table border=1>
<caption>Titel boven tabel</caption>
<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:
Titel boven tabel
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 |
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 |