colspan en rowspan > kolommen en/of regels samenvoegen.

<... colspan="2"> wordt gebruikt om 2 (regel)cellen (naast elkaar, dus in horizontale richting) samen te voegen.
<... rowspan="2"> wordt gebruikt om 2 (kolom)cellen (onder elkaar, dus in verticale richting) samen te voegen.

Deze (voorbeeld)tabel heeft 12 cellen:

Deze (voorbeeld)tabel is verdeeld in 3 kolommen met 3 cellen in elke kolom:

Deze (voorbeeld)tabel is verdeeld in 3 regels met 3 cellen op elke regel:

Het is erg belangrijk dat je weet dat er in principe geen enkel verschil is tussen de drie plaatjes.
Want of er wel of geen horizontale of verticale lijnen staan is van geen enkel belang voor de lay-out.

Denk maar aan een vel ruitjespapier of als je technisch bent, een vel millimeterpapier :-)

Belangrijk
Het basisprincipe van een tabel:
1. elke kolom heeft hetzelfde aantal cellen als de andere kolom(men), zie het 1ste, 2de, 3de plaatje.
2. elke regel heeft hetzelfde aantal cellen als de andere regel(s), zie het 1ste, 2de, 3de plaatje.
In HTML wordt dus hetzelfde principe gehanteerd als in een tekstverwerker.

Nu kan het zijn dat er in 1 van die cellen een plaatje (of tekst) moet staan dat een grotere oppervlakte heeft dan de oppervlakte van die cel.
Wat er dan gebeurt is dat alle browsers in dat geval (volkomen zelfstandig) besluiten om de oppervlakte van de betreffende cel aan te passen (op te rekken) zodat de inhoud er weer netjes in past.

Dat heeft echter weer tot gevolg dat de inhoud van de cellen er omheen ook weer verschuift.
Er zijn verschillende manieren om dat te voorkomen, daarover later bij Tips_N_Tricks meer.
In deze uitleg gaan we cellen met elkaar "verbinden" om een grotere oppervlakte te krijgen.

Voorbeeld

Zo ziet het er in het echt uit!

Schematisch hebben we het volgende gedaan:

waardoor er links boven in horizontale richting meer oppervlakte is ontstaan, een negatief gevolg is wel dat het kopje (1x th) van de middelste kolom nu is weggevallen in het eerste <tr>...</tr>-element (zie de source-code voor het voorbeeld).

De oplettende lezer vraagt zich nu af, kan dat ook in verticale richting en ja dat kan, met rowspan="2", dan ziet het er als volgt uit:

waardoor er links boven in verticale richting meer oppervlakte is ontstaan

Het zal nu geen verbazing meer wekken dat we door combinaties van <td rowspan="2" colspan="2"> ook 4 cellen kunnen combineren:

waardoor er links boven in verticale-, en in horizontale richting, meer oppervlakte is ontstaan

Belangrijk:
Het is belangrijk dat je beseft dat indien volgens deze methode cellen met elkaar "verbonden" worden, de inhoud van de cellen ernaast en eronder (afhankelijk van de gebruikte attribuut-parameters) min of meer netjes op zijn plaats blijft staan.
Met andere woorden, door de juiste parameters te gebruiken is het mogelijk te verhinderen dat een cel met een grotere "inhoud" (ongewenst) wordt uitgerekt in de ene of de andere richting, waardoor dan weer de inhoud in de omliggende cellen zou kunnen verschuiven.

Opmerking:
In de praktijk wordt vaak vergeten dat door het (meestal achteraf) "verbinden" van 2 of meer cellen, ergens één cel (of meerdere cellen) verloren gaat die gebruikt moest worden om met "inhoud" te vullen.
In dat geval moet er dus aan het design een complete kolom of een complete regel met cellen worden toegevoegd !
Het toevoegen van alleen de "verloren" cel(len) mag dus niet.

Moeilijk:
Indien cellen niet verbonden worden zoals in de voorbeelden hierboven, maar indien de al verbonden cellen elkaar op de een of andere manier horizontaal en/of verticaal overlappen, hebben de meeste (ook de allermodernste) browsers daar nog steeds problemen mee, zie het:

Voorbeeld 1.

Een praktijk voorbeeld

Een ander praktijk voorbeeld