Пример 1:

Вот еще пример 2:

1 и 2 ячейки вместе		3 ячейка	4 ячейка
1 ячейка	2 ячейка	3 ячейка	4 ячейка
1 ячейка	2 ячейка3 ячейка4 ячейка

Исходный код этой таблицы:

<table width="300" border="1" bgcolor="#00FF00"> <tr> <td colspan="2">1 и 2 ячейки вместе</td> <td>3 ячейка</td> <td>4 ячейка</td> </tr> <tr> <td>1 ячейка</td> <td>2 ячейка</td> <td>3 ячейка</td> <td>4 ячейка</td> </tr> <tr> <td>1 ячейка</td> <td colspan="3">2 ячейка3 ячейка4 ячейка</td> </tr> </table>

Здесь мы видим уже знакомую нам, объединенную в две, первую ячейку первой строки. Вторая строка осталась без изменений. А вот в третьей строке оказалось всего две ячейки. И как Вы можете видеть, это объеденились 2, 3 и 4 ячейки. В коде третьей строки видно всего две ячейки, но вторая ячейка имеет атрибут "colspan", значение которого равно "3". То есть в этой ячейке объеденены три соседние между собой ячейки третьей строки.
Надеюсь понятно.
Но здесь есть один подводный камень! Давайте попробуем объеденить, в нашей таблице еще и, вторую и третью ячейку второй строки и посмотрим что получится.

Вот что получилось. Пример 3:

1 и 2 ячейки вместе		3 ячейка	4 ячейка
1 ячейка	2 ячейка3 ячейка		4 ячейка
1 ячейка	2 ячейка3 ячейка4 ячейка

А получилась какая то ерунда. Причем эта ерунда по разному отображается в разных браузерах.

Исходный код этой таблицы:

<table width="300" border="1" BGCOLOR="#00FF00"> <tr> <td colspan="2">1 и 2 ячейки вместе</td> <td>3 ячейка</td> <td>4 ячейка</td> </tr> <tr> <td>1 ячейка</td> <td colspan="2">2 ячейка3 ячейка</td> <td>4 ячейка</td> </tr> <tr> <td>1 ячейка </td> <td colspan="3">2 ячейка3 ячейка4 ячейка</td> </tr> </table>

А в чем дело? Спросите Вы. Дело в том , что браузер просто не может сопоставить границы ячеек в столбцах (имеется ввиду по вертикали), он теряется и выдает такую таблицу. Есть только один выход для правильного отображения в трех основных браузерах. Нужно добавить еще одну строчку с четырьмя ячейками. Для каждой ячейки (элемент <td>) нужно явно указать ширину (атрибут "width") в пикселях или в процентах от ширины таблицы.

Вот что получилось. Пример 4:

1 и 2 ячейки вместе		3 ячейка	4 ячейка
1 ячейка	2 ячейка3 ячейка		4 ячейка
1 ячейка	2 ячейка3 ячейка4 ячейка

Исходный код этой таблицы:

<table width="300" border="1" bgcolor="#00F000"> <tr> <td colspan="2">1 и 2 ячейки вместе</td> <td>3 ячейка</td> <td>4 ячейка</td> </tr> <tr> <td>1 ячейка</td> <td colspan="2">2 ячейка3 ячейка</td> <td>4 ячейка</td> </tr> <tr> <td>1 ячейка </td> <td colspan="3">2 ячейка3 ячейка4 ячейка</td> </tr> <tr> <td width="75"></td> <td width="75"></td> <td width="75"></td> <td width="75"></td> </tr> </table>

Ну ка сосчитайте. Сколько получилось строк? Правильно теперь в нашей таблице четыре строки. Но в четвертой строке нив одной ячейке нет содержимого. Поэтому нижний бордюр (border) таблицы выглядит каким то широким. В теге <Table> этой таблицы я указал атрибут "bgcolor" равный "#EED7FF". Давайте теперь уберем атрибуты "bgcolor" и 'border" из тега <Table>. И вставим "bgcolor" в строки (<tr>).

Вот что получилось. Пример 5:

1 и 2 ячейки вместе		3 ячейка	4 ячейка
1 ячейка	2 ячейка3 ячейка		4 ячейка
1 ячейка	2 ячейка3 ячейка4 ячейка

Исходный код этой таблицы:

<table width="300"> <tr bgcolor="#00FF00"> <td colspan="2">1 и 2 ячейки вместе</td> <td>3 ячейка</td> <td>4 ячейка</td> </tr> <tr bgcolor="#00FF00"> <td>1 ячейка</td> <td colspan="2">2 ячейка3 ячейка</td> <td>4 ячейка</td> </tr> <tr bgcolor="#00FF00"> <td>1 ячейка </td> <td colspan="3">2 ячейка3 ячейка4 ячейка</td> </tr> <tr> <td width="75"></td> <td width="75"></td> <td width="75"></td> <td width="75"></td> </tr> </table>

Как видно из кода мы закрасили только первые три строки, а последнюю четвертую оставили без изменений, то есть прозрачной. В итоге после отображения браузером таблицы мы не видим вспомогательную четвертую строку.