Korektně na slučované buňky tabulky v HTML

Tabulky v HTML jsou základním stavebním kamenem pokročilejších stránek. Pokud používáte slučované buňky pomocí parametru COLSPAN, mějte na paměti některé záludné vlastnosti. Jestliže použijete COLSPAN na prvním řádku tabulky, nebudete moci korektně nastavit jednotlivé rozměry sloupců, respektive i když budete definovat šířku sloupců později, nemusí se vždy nastavit šířka sloupce, jak si představujete. Řekněme například, že chcete vytvořit zhruba takovouto tabulku:

XXXX		XXXXX
	XXXX

Problém je v tom, že většinou napíšete něco ve smyslu:

<table width="200" cellspacing="0" cellpadding="0">
<tr>
  <td bgcolor=green colspan=2>XXXX</td>
  <td bgcolor=yellow>XXXXX</td>
</tr>
<tr>
  <td bgcolor=red>XXXX</td>
  <td bgcolor=blue colspan=2>XXXX</td>
</tr>
</table>

Výsledek ovšem nebude jistě tím, co bychom očekávali:

XXXX		XXXXX
	XXXX

Jak jistě vidíte, někde se stala chyba. Konkrétně zcela zmizel prostřední sloupec, kde by se měly jednotlivé pruhy překrývat, v uvedeném HTML kódu ale není kde definovat šířku prostředního sloupce, proto si musíme pomoci přidáním dalšího řádku na začátek tabulky, který použitím průhledného obrázku stlačíme na velikost jednoho pixelu. Výsledný kód tedy bude vypadat takto:

<table width="200" cellspacing="0" cellpadding="0">
<tr>
  <td width=33%><img src="null.gif" width=1 height=1></td>
  <td width=33%><img src="null.gif" width=1 height=1></td>
  <td width=33%><img src="null.gif" width=1 height=1></td>
</tr>
<tr>
  <td bgcolor=green colspan=2>XXXX</td>
  <td bgcolor=yellow>XXXXX</td>
</tr>
<tr>
  <td bgcolor=red>XXXX</td>
  <td bgcolor=blue colspan=2>XXXX</td>
</tr>
</table>

Tabulka se tedy nijak co do velikosti nezměnila, dali jsme ale do pořádku definice šířek sloupců.