Гость !!! | RSS
Меню сайта
Оставить отзыв Гороскопы Сонник Мешок позитива Раскрутка сайта HTML HTML Формы Примеры Таблицы Таблицы цветов Генераторы Скрипты
Категории раздела
Новости [61]
Х-Новости [44]
Самое..., самое!!! [342]
ИнтересНости [241]
Праздничная [3]
Ghostly photo
В Австралии найден скелет «гигантского вомбата»
В Австралии найден скелет «гигантского вомбата»
Витамин «B» замедляет атрофию мозга, говорят ученые
Витамин «B» замедляет атрофию мозга, говорят ученые
Самые - самые птицы...
Самые - самые птицы...
Пляжные страсти - Микро-бикини (15 фото)
Пляжные страсти - Микро-бикини (15 фото)
Самая маленькая и самая большая из живущих лошадей + самый большой бычок
Самая маленькая и самая большая из живущих лошадей + самый большой бычок
Картины в стиле «пин-ап»
Картины в стиле «пин-ап»
Самая высокая прогулка, на воздушном шаре.
Самая высокая прогулка, на воздушном шаре.
Операция по пересадке лица в США прошла успешно
Операция по пересадке лица в США прошла успешно
Soft
Получить код блока
Mini-CHat
Они ждут - Тебя!
Головоломки · Solitaire
Настольные · Lucky Coins
Аркады и экшн · Свадебный переполох
Аркады и экшн · Чужой Космос 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-адрес: 54.162.245.198

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



Заговор для студента
Хохол звонит на пост сообщи... Стас Михаилов - К тебе иду Елена Ваенга - Письмо Татьяна Буланова - Нежность Evanescence - Lies
Tag cloud
Свернуть Архив записей Развернуть
«  Май 2017  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031
Опросник
Кто Вы, по знаку зодиака?
Всего ответов: 190
Ангелы
Ангелы
Совместимость по знаку зодиака Стрелец – Дева
Совместимость по знаку зодиака Стрелец – Дева
Символика татуировки (тату) » Знаки зодиака – Лев
Символика татуировки (тату) » Знаки зодиака – Лев
Звёзды шутят: Весёлый гороскоп - «Скорпион»
Звёзды шутят: Весёлый гороскоп - «Скорпион»
Носители магии - Волшебники
Носители магии - Волшебники
Анекдоты про евреев -- (60)
Анекдоты про евреев -- (60)
Моя юность: Первая любовь
Моя юность: Первая любовь
«Чернушки»: - детско-садистские стишки (55)
«Чернушки»: - детско-садистские стишки (55)
Анекдоты про он и она - (100шт)
Анекдоты про он и она - (100шт)
Анекдоты про врачей -=- 81
Анекдоты про врачей -=- 81
Advertising
MeteoNova
Свернуть Statistics Развернуть
Онлайн всего: 1
Гостей: 1
Пользователей: 0

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

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