Этот атрибут объединяет несколько соседних
друг с другом ячеек одной строки в одну большую ячейку.
Значением является число определяющее количество объединеных
ячеек.
Пример 1;
| 1 и 2 ячейки вместе |
3 ячейка |
4 ячейка |
| 1 ячейка |
2 ячейка |
3 ячейка |
4 ячейка |
| 1 ячейка |
2 ячейка |
3 ячейка |
4 ячейка |
Исходный код этой таблицы;
<table width="300" border="1">
<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>2 ячейка</td>
<td>3 ячейка</td>
<td>4 ячейка</td>
</tr>
</table>
Как видно в первой строке таблицы, первая и вторая ячейка
объеденены в одну. В коде видно, что в первой строке
у нас всего три ячейки, но первая ячейка имеет атрибут
"colspan" со значением "2". Этим
атрибутом мы просто объеденили первую и вторую ячейку.
Вот еще пример 2;
| 1 и 2 ячейки вместе |
3 ячейка |
4 ячейка |
| 1 ячейка |
2 ячейка |
3 ячейка |
4 ячейка |
| 1 ячейка |
2 ячейка3 ячейка4 ячейка |
Исходный код этой таблицы;
<table width="300" border="1">
<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">
<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="#EED7FF">
<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="#EED7FF">
<td colspan="2">1 и 2 ячейки вместе</td>
<td>3 ячейка</td>
<td>4 ячейка</td>
</tr>
<tr bgcolor="#EED7FF">
<td>1 ячейка</td>
<td colspan="2">2 ячейка3 ячейка</td>
<td>4 ячейка</td>
</tr>
<tr bgcolor="#EED7FF">
<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>
как видно из кода мы закрасили только первые три строки,
а последнюю четвертую оставили без изменений, то есть
прозрачной. В итоге после отображения браузером таблицы
мы не видим вспомогательную четвертую строку.
В разделе "Хитрости HTML", Вы найдете советы
и уроки "Таблицы
- маленькие хитрости". Советую почитать. 
