Этот атрибут объединяет несколько соседних друг с другом ячеек одной
строки в одну большую ячейку. Значением является число определяющее
количество объединеных ячеек.
Пример 1:
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>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" 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>
|
Как видно из кода мы закрасили только первые три строки, а
последнюю четвертую оставили без изменений, то есть прозрачной. В итоге
после отображения браузером таблицы мы не видим вспомогательную
четвертую строку.
|