E-mail Добавить в "Избранное" Сделать "ТвойWeb" стартовой
Здесь находится флеш баннер. Чтобы увидеть его Вы должны установить Flashplayer
 
Новости сайта
02 [F]апреля, 2006
08 [F]декабря, 2005
17 [F]октября, 2005
16 [F]июля, 2005
25 [F]декабря, 2004
======================
Предыдущие новости
<< < 01 02 03 04 05 > >>
 
 
 

Таблицы (частьIII)

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