het samenvoegen van cellen in HTML

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b	3c	3d
4a	4b	4c	4d

het samenvoegen cellen over meerdere van kolommen

In de tabel hierboven willen we de blauw cellen tot één cel. WE hebben het dus over de cellen 2a,2b en 2c.
We gaan de <td>-tag van 2a uitbreiden tot

<td colspan="3">

Hierdoor strekt de cel met 2a zich over 3 kolommen uit.

1a	1b	1c	1d
2a			2b	2c	2d
3a	3b	3c	3d
4a	4b	4c	4d

Dit geeft de zeer vreemde tabel hierboven omdat de tweede rij nu teveel cellen bevat. De cellen met 2b en 2c moeten nu worden wegehaald!

1a	1b	1c	1d
2a			2d
3a	3b	3c	3d
4a	4b	4c	4d

Dit is het gewenste resultaat.

Het samenvoegen van cellen over meerdere rijen.

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b	3c	3d
4a	4b	4c	4d

In dit voorbeeld gaan we de groende cellen over meerdere rijensamenvoegen. Dit zijn de cellen met 2c, 3c en 4c.

We gaan de <td>-tag van 2c uitbreiden tot

<td rowspan="3">

Hierdoor strekt de cel met 2a zich over 3 rijen uit.

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b		3c	3d
4a	4b		4c	4d

Omdat er nu weer geen cellen zijn verwijderd geeft dit weer een ongewild resultaat. We moeten de cellen met 3c en 4c weerweghalen!

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b		3d
4a	4b		4d

En dan hebben we hier het gewenste resultaat.
Door rowspan en colspan juist te combineren en de goede cellen weg te halen is zelfs onderstaande tabel mogelijk met

<td colspan="2" rowspan="3">2c</td>  

komt zelfs de volgende tabel:

1a	1b	1c	1d
2a	2b	2c
3a	3b
4a	4b

links naar andere sites over HTML en CSS:

naar een exclusieve beschrijving van HTML.
een beschrijving van het GLA-contractonderwijs
nog een site met veel over HTML - CSS - JavaScript: www.mijnhomepage.nl/
de webpagina, waar ik de techniek voor de navigatie van deze pagina's heb gevonden.