Tabellen

Een tabel bestaat uit een aantal rijen (horizontaal) en kolommen (vertikaal) zoals hier onder.

Kolom 1 Kolom 2 Kolom 3Kolom 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 1Kolom 2 Kolom 3 Kolom 4
rij 2 kol 1 rij 2 kol 2 rij 2 kol 3rij 2 kol 4
rij 3 kol 1 rij 3 kol 2 rij 3 kol 3rij 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 3rij 2 kol 4
rij 3 kol 2 rij 3 kol 3rij 3 kol 4