Гость !!! | RSS
Меню сайта
Оставить отзыв Гороскопы Сонник Мешок позитива Раскрутка сайта HTML HTML Формы Примеры Таблицы Таблицы цветов Генераторы Скрипты
Категории раздела
Новости [61]
Х-Новости [44]
Самое..., самое!!! [342]
ИнтересНости [241]
Праздничная [3]
Ghostly photo
Самый большой закрытый водоём в мире - «Каспийское море»
Самый большой закрытый водоём в мире - «Каспийское море»
Большие бедра ухудшают женскую память, утверждают ученые...
Большие бедра ухудшают женскую память, утверждают ученые...
Самая дорогая собака в мире стоит 585.000$
Самая дорогая собака в мире стоит 585.000$
Самые счастливые карты - Удивительная колода карт, которая называется «Счастливые карты».
Самые счастливые карты - Удивительная колода карт, которая называется «Счастливые карты».
Редкий австралийский вомбат-альбинос
Редкий австралийский вомбат-альбинос
Самое большое количество детей за одни роды.
Самое большое количество детей за одни роды.
Miapolis - громадина высотой 975 метров
Miapolis - громадина высотой 975 метров
Один из древнейших коралловых рифов
Один из древнейших коралловых рифов
Soft
Получить код блока
Mini-CHat
Они ждут - Тебя!
Многопользовательские · Герои: Возрождение
Аркады и экшн · Bumble About
Аркады и экшн · Papa Louie
Головоломки · Crossed Wires

Катай!!!
Корифаны сайта

Баннерообмен
Our button

[ Получить код баннера ]
Таблицы. 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>

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

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



Профиль
Ваш браузер: -
IP-адрес: 34.229.76.193

Логин:uID поддержка
Пароль:
Забыл пароль || Регистрация



Заговор на Любовь и Счастье
Елена Ваенга - Пашка Услуга от оператора - Дозво... Стас Михаилов - Не Вдвоем Evanescence - Going Under Наутилус Помпилиус - Апосто...
Tag cloud
Свернуть Архив записей Развернуть
«  Май 2019  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
2728293031
Опросник
Оцените сайт
Всего ответов: 66
Архонты — духи-мироправители
Архонты — духи-мироправители
Как ковыряют в носу разные знаки зодиака?
Как ковыряют в носу разные знаки зодиака?
Носители магии; Убыры – ведьмы
Носители магии; Убыры – ведьмы
Агуане
Агуане
Зодиакальный гороскоп для ребёнка: Ваш ребёнок - Козерог
Зодиакальный гороскоп для ребёнка: Ваш ребёнок - Козерог
Прикольные цитаты - Говорят дети
Прикольные цитаты - Говорят дети
Анекдоты про врачей -=- 57
Анекдоты про врачей -=- 57
Полярная реакция
Полярная реакция
Анекдоты про женщин - 56
Анекдоты про женщин - 56
Анекдоты про наркоманов (25)
Анекдоты про наркоманов (25)
Advertising
MeteoNova
Свернуть Statistics Развернуть
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Tagis Балаболка
Инфо сайта
Инфо форума

Все права защищены! shalbuzdag-666.ucoz.ru © 2009 – 2019 ()
уЧётчик сайта