Гость !!! | RSS
Меню сайта
Оставить отзыв Гороскопы Сонник Мешок позитива Раскрутка сайта HTML HTML Формы Примеры Таблицы Таблицы цветов Генераторы Скрипты
Категории раздела
Новости [61]
Х-Новости [44]
Самое..., самое!!! [342]
ИнтересНости [241]
Праздничная [3]
Ghostly photo
Секреты британских субмарин случайно попали в интернет
Секреты британских субмарин случайно попали в интернет
Самая большая змея – Titanoboa.
Самая большая змея – Titanoboa.
Субатомарные частицы могут двигаться быстрее скорости света
Субатомарные частицы могут двигаться быстрее скорости света
Райские острова со всего мира - Это действительно очень красиво.... (73 фото)
Райские острова со всего мира - Это действительно очень красиво.... (73 фото)
Купальные костюмы 2012 (40 фото)
Купальные костюмы 2012 (40 фото)
Самое высокое дерево на Земле
Самое высокое дерево на Земле
Компания Porsche выпустит ограниченное число новых гибридных супер-каров Spyder. Новый автомобиль станет самым дорогим в истории компании.
Компания Porsche выпустит ограниченное число новых гибридных супер-каров Spyder. Новый автомобиль станет самым дорогим в истории компании.
Обезьян научили управлять компьютером усилием мысли
Обезьян научили управлять компьютером усилием мысли
Soft
Получить код блока
Mini-CHat
Они ждут - Тебя!
Поиск предметов · Маша. Рождественская сказка. Делюкс
Аркады и экшн · Операция Жук 3
Многопользовательские · Perfect World
Стратегии · Построй-ка 2. Город мечты

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

Баннерообмен
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-адрес: 3.237.91.98

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



Заговор от чревоугодства
Глюкоза - Зима Alicia Keys - Fallin (instr... Scooter - The Age Of Love Кино - Спокойная ночь Стас Михаилов - За воротами...
Tag cloud
Свернуть Архив записей Развернуть
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Опросник
Оцените сайт
Всего ответов: 66
Совместимость по знаку зодиака Рак – Весы
Совместимость по знаку зодиака Рак – Весы
Совместимость по знаку зодиака Лев – Рыбы
Совместимость по знаку зодиака Лев – Рыбы
Символика татуировки (тату) » Знаки зодиака – Весы
Символика татуировки (тату) » Знаки зодиака – Весы
Носители магии - Манто
Носители магии - Манто
Поздравления на свадьбу в стихах
Поздравления на свадьбу в стихах
Анекдоты про молодожёнов -=- (70)
Анекдоты про молодожёнов -=- (70)
Анекдоты про Шерлока Холмса - (21шт)
Анекдоты про Шерлока Холмса - (21шт)
Анекдоты про игроков - (40)
Анекдоты про игроков - (40)
Про выгребную яму и яблоню
Про выгребную яму и яблоню
Анекдоты из серии: "кучка №6"
Анекдоты из серии: "кучка №6"
Advertising
MeteoNova
Свернуть Statistics Развернуть
Онлайн всего: 1
Гостей: 1
Пользователей: 0

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

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