W e b - м а с т е р у: 
  В с е   о   х о с т и н г е: 
  Р е к о м е н д у е м: 
  Р е к л а м а: 





  Р е к л а м а: 











  Главная > Уроки по HTML в примерах > Таблицы (часть II)

Google   
 


Профессиональный хостинг от REG.RU - от 99 рублей за месяц!!!
  • 10 Гб дискового пространства
  • Бесплатный трафик
  • До 30 размещенных сайтов на одном хостинге
  • Неограниченное количество почтовых ящиков и многое другое!

>> Смотреть подробнее






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

Элемент Td

Атрибут: Colspan
Этот атрибут объединяет несколько соседних друг с другом ячеек одной строки в одну большую ячейку. Значением является число определяющее количество объединеных ячеек.

Пример 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>

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


Атрибут: Rowspan
Этот атрибут объединяет несколько соседних друг с другом ячеек из соседних строк в одну большую ячейку. Значением является число определяющее количество объединеных ячеек.

Посмотрите пример 6:

1-ые ячейки двух строк 2 ячейка 3 ячейка 4 ячейка
2 ячейка 3 ячейка 4 ячейка
1 ячейка 2 ячейка 3 ячейка 4 ячейка

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

<table width="300" border="1" bgcolor="#00FF00">
   <tr>
      <td rowspan="2">1-ые ячейки двух строк</td>
      <td>2 ячейка</td>
      <td>3 ячейка</td>
      <td>4 ячейка</td>
   </tr>
   <tr>
      <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>

В этой таблице мы видим, что первые ячейки первой и второй строки объеденены. Добились мы этого с помощью атрибута "rowspan", выставив его значение равным "2". То есть этим мы дали понять браузеру, что первая ячейка первой строки должна объединиться с первой ячейкой второй строки. Теперь посмотрите на код таблице. Во второй строке прописаны только три ячейки. И это правильно так как первую ячейку и все ее пространство поглотила первая ячейка первой строки. Очень важно правильно писать код когда Вы объединяете ячейки соседних строк. Дело в том, что если мы запишем ячейку в которой имеется атрибут "rowspan" не в первую строку, а во вторую мы получим вот такую таблицу;

Пример 7:

2 ячейка 3 ячейка 4 ячейка
1-ые ячейки двух строк 2 ячейка 3 ячейка 4 ячейка
1 ячейка 2 ячейка 3 ячейка 4 ячейка

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

<table width="300" border="1" bgcolor="#00FF00">
   <tr>
      <td>2 ячейка</td>
      <td>3 ячейка</td>
      <td>4 ячейка</td>
   </tr>
   <tr>
      <td rowspan="2">1-ые ячейки двух строк</td>
      <td>2 ячейка</td>
      <td>3 ячейка</td>
      <td>4 ячейка</td>
   </tr>
   <tr class="small">
      <td>1 ячейка </td>
      <td>2 ячейка</td>
      <td>3 ячейка</td>
      <td>4 ячейка</td>
   </tr>
</table>

Ну как видите , что получилось? А это уже пародия на таблицу. Так писать не верно. Попробую сформулировать правило. Если вы объединяете ячейки соседних строк, то в коде таблицы ячейка с атрибутом "rowspan" записывается в самой верхней из строк, ячейки которых объеденились. Ячейки, которые были поглощены в других строках, не записываются. Думаю понятно. Теперь еще раз взглянем на нашу таблицу (Пример 6). Таблица поменяла вид, то есть теперь ячейки не одинаковы по ширине. Произошло это потому, что мы не указали, какой ширины должны быть ячейки. Попробую объяснить, как действует браузер в этом случае. Итак, браузер нашел тег <Body> и прочитал его атрибут "width" равный 300 пикселям. Теперь браузер знает, что ширина таблицы 300 пикселей и, что он должен вместить в эту ширину содержимое всех ячеек. Он читает дальше и натыкается на теги <Tr> и <TD>, но ни в одном из этих тегов он не находит атрибута указывающего какой ширины должны быть ячейки. Дальше он читает содержимое первой ячейки первой строки, оценивает его объем. Дальше он проверяет содержимое других ячеек, оценивает их объем и выясняет для себя, на сколько он может сжать эти ячейки, чтобы вывести содержимое первой ячейки в одну строку. То есть, на сколько объем содержимого других ячеек позволит ему сжать эти ячейки. Он выводит содержимое первой ячейки в одну строку, раздвигая первую ячейку и одновременно сжимая остальные (насколько это можно). То, что не поместилось, в одну он переводит на другую строку. Если ширина ячеек не указана, то браузер отдает все свободное место, таблицы, ячейке у которой объем содержимого больше содержимого других ячеек. Если бы мы для каждой ячейки задали ее ширину, этого бы не произошло. В этом случае браузер прочитает, что каждая ячейка имеет свою ширину, а это одновременно означает, что раздвигать ячейку нельзя. И он выводя содержимое первой ячейки, перенесет на другую строку, то что не поместилось в указанную ширину. Вот таблица из примера 6, только для ячеек уже задана ширина.

Пример 8

1-е ячейки двух строк 2 ячейка 3 ячейка 4 ячейка
2 ячейка 3 ячейка 4 ячейка
1 ячейка 2 ячейка 3 ячейка 4 ячейка

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

<table width="300" border="1" bgcolor="#00FF00">
   <tr>
      <td rowspan="2" width="75">1-е ячейки двух строк</td>
      <td width="75">2 ячейка</td>
      <td width="75">3 ячейка</td>
      <td width="75">4 ячейка</td>
   </tr>
   <tr>
      <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>

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

Пример 9

1-е ячейки 3х строк 2 ячейка 3 ячейка 4-е ячейки 3х строк
2 ячейка 3 ячейка
2 ячейка 3 ячейка

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

<table width="300" border="1" bgcolor="#00FF00">
   <tr>
      <td rowspan="3" width="75">1-е ячейки 3х строк</td>
      <td width="75">2 ячейка</td>
      <td width="75">3 ячейка</td>
      <td width="75" rowspan="3">4-е ячейки 3х строк</td>
   </tr>
   <tr>
      <td>2 ячейка</td>
      <td>3 ячейка</td>
   </tr>
   <tr>
      <td>2 ячейка</td>
      <td>3 ячейка</td>
   </tr>
</table>

И еще один немножко похитрее пример.

Пример 10

1 ячейка 2 ячейка 3 ячейка 4 ячейка
1 ячейка 2 и 3- я ячейка 2х строк 4 ячейка
1 ячейка 4 ячейка

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

<table width="300" border="1" bgcolor="#00FF00">
   <tr>
      <td width="75">1 ячейка</td>
      <td width="75">2 ячейка</td>
      <td width="75">3 ячейка</td>
      <td width="75">4 ячейка</td>
   </tr>
   <tr>
      <td width="75">1 ячейка</td>
      <td colspan="2" rowspan="2">2 и 3- я ячейка 2х строк</td>
      <td>4 ячейка</td>
   </tr>
   <tr>
      <td width="75">1 ячейка</td>
      <td>4 ячейка</td>
   </tr>
</table>

В этом примере уже одновременное объединение двух соседних ячеек одной строки (атрибут "colspan") и ячеек двух соседних строк (атрибут "rowspan"). Посмотрите здесь я подробно описал эту таблицу.



Помимо этих атрибутов есть и другие. Но некоторые из них по разному отображаются в разных браузерах, некоторые на данном этапе обучения Вам просто не нужны. Зачем забивать голову лишним. Я не ставил перед собой цели описывать все элементы, атрибуты и их значения. Для этого есть спецификация HTML. Если Вам нужен полный список элементов таблицы, их атрибутов и значений, загляните в спецификацию.





[Рекомендовать другу]  [Содержание  


Вывоз мусора в Уфе на автомобилях ГАЗель, Услуги грузчиков, Утилизация старой мебели


Щелкните здесь, чтобы узнать, как повысить тИЦ и Page Rank Вашего сайта. Бесплатно!

© Rusws™ 2007-2012. Разработка и техническая поддержка: RUSWS.RU
Хостинг от SpaceWeb

Перепечатка любых материалов с портала www.rusws.ru только с письменного разрешения администрации и с размещением ссылки на портал!

Техническая поддержка: rusws[собака]mail.ru
Rambler's Top100