Гость !!! | RSS
Меню сайта
Оставить отзыв Гороскопы Сонник Мешок позитива Раскрутка сайта HTML HTML Формы Примеры Таблицы Таблицы цветов Генераторы Скрипты
Категории раздела
Новости [61]
Х-Новости [44]
Самое..., самое!!! [342]
ИнтересНости [241]
Праздничная [3]
Ghostly photo
Самый красивый цветок между ножек (13 фото)
Самый красивый цветок между ножек (13 фото)
Новые снимки «Хаббла» проясняют эволюцию галактик
Новые снимки «Хаббла» проясняют эволюцию галактик
Самое длинное слово
Самое длинное слово
Самый дорогой в мире полицейский автомобиль
Самый дорогой в мире полицейский автомобиль
Самое большое количество иголок в голове.
Самое большое количество иголок в голове.
В Чёрном море обнаружена единственная в мире, подводная река.
В Чёрном море обнаружена единственная в мире, подводная река.
Самая умная собака в мире
Самая умная собака в мире
Как мужчины узнают о том, что им изменяют?
Как мужчины узнают о том, что им изменяют?
Soft
Получить код блока
Mini-CHat
Они ждут - Тебя!
Аркады и экшн · Good Soldier Shvejk
Головоломки · Flea
Аркады и экшн · Ферма Айрис
Настольные · Непобедимый

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

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

[ Получить код баннера ]
Таблицы. I

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

Одним из самых важных элементов в HTML, несомненно являются таблица. С помощью них очень просто располагать текст и картинки в нужных нам местах. Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.

Чтобы разобраться в устройстве таблицы, расмотрим простой пример:

Такая таблица реализуется следующим кодом:

1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки

Примечание: В данном примере создана таблица с фиксированой шириной (WIDTH="200" пикселей), но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменятся в зависимости от размера окна.
<TABLE BORDER="2" WIDTH="300" BGCOLOR="#00FF00">
<TR>
<TD>1 ячейка 1 строки</TD>
<TD>2 ячейка 1 строки</TD>
</TR>
<TR>
<TD>1 ячейка 2 строки</TD>
<TD>2 ячейка 2 строки</TD>
</TR>
</TABLE>



А теперь о каждом элементе таблицы, его атрибутах и их значениях, в подробностях и с примерами.

Элемент Table

Элемент извещающий о начале таблицы. Обязательно должен иметь закрывающий тег </Table>, который закрывает таблицу.

Имеет следующие атрибуты:
Атрибут: Width


Этот атрибут задает ширину таблицы в пикселях или в процентах от ширины объекта, в который помещена таблица. Если не указать этот атрибут, то браузер автоматически определит этот параметр в зависимости от объема содержащегося в таблице материала.

Записывается так:

<table width="70%">

Атрибут: Height

Этот атрибут задает ширину таблицы в пикселях или в процентах от ширины объекта, в который помещена таблица. Если не указать этот атрибут, то браузер автоматически определит этот параметр в зависимости от объема содержащегося в таблице материала.

Записывается так:

<table height="150">

Атрибут: Bgcolor

Определяет цвет фона таблицы. Идентичен одноименному атрибуту элемента <Body>.

Записывается так:

<table bgcolor="blue">

Атрибут: Background

Этот атрибут позволяет залить тело таблицы графическим изображением, также как и одноименный атрибут элемента <Body>. В качестве значения указывается путь до файла изображения.

Записывается так:

<table background="http://site.ru/images/fon.gif">

Атрибут: Border

Указывает ширину внешней рамки таблицы в пикселях. Если этот атрибут не указывать или указать значение "0", рамка отобраэаться не будет.

Записывается так:

<table border="2">

Пример таблицы с рамкой равной 5 пикселям:

1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки

Атрибут: Align

Атрибут горизонтального выравнивания таблицы. Имеет значения "center" (по центру), "left" (по левому краю) и "right" (по правому краю).

Записывается так:

<table align="center">

Атрибут: Cellspacing

Определяет расстояние в пикселях между ячейками таблицы.

Записывается так:

<table cellspacing="2">

Пример таблицы со значением атрибута "cellspacing" равным "5":

1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки

Атрибут: Cellpadding

Этот атрибут определяет расстояние в пикселях между рамкой, каждой ячейки таблицы и ее содержимым.

Записывается так:

<table cellpadding="10">

Пример таблицы со значением атрибута "cellpadding" равным "10":

1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки


Заметьте, что ширина таблицы в первом и во втором примере не менялась и составляет 300 пикселей. Но во второй таблице мы имеем атрибут cellpadding равный "10", то есть в каждой ячейке существуют как бы "мертвые зоны" слева, справа, сверху и снизу, величиной 10 пикселей. Этим мы как бы отобрали у каждой ячейки часть рабочего простанства в 20 пикселей по горизонтали (10 слева и 10 справа) и 20 пикселей по вертикали (10 сверху и 10 снизу). В итоге содержимое ячеек уже не поместилось в оставшееся пространство и чтобы показать все содержимое, браузер растянул таблицу по вертикали.



Элемент Tr

Элемент создает новую строку ячеек в таблице.

Имеет следующие атрибуты:
Атрибут: Align


Определяет способ горизонтального выравнивания содержимого всех ячеек данной строки. Возможные значения:"left" (по левому краю), "center" (по центру), "right" ( по правому краю).

Записывается так:

<tr align="center">
Элемент создает новую строку ячеек в таблице.


Атрибут: Valign


Определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: "top" (по верхней границе строки), "bottom" (по нижней границе строки), "middle"(по центру строки).

Записывается так:

<tr valign="top">

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

1 ячейка 1 строки 2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки

Видите содержимое второй ячейки первой строки увеличилось в объеме и чтобы отобразить это содержимое браузер растянул по вертикали первую строку. Но в то же время содержимое первой ячейки по центру строки. Атрибут "valign" для того чтобы выравнять содержимое ячеек, то есть чтоб содержимое ячеек всегда находилось там где Вы хотите.
Вот пример в котором значение атрибута "valign" равно "top", то есть выранивание осуществляется по верхней границе строки. И теперь как бы не раздвигалась таблица содержимое первой ячейки будут как бы привязаны к верху строки.

1 ячейка 1 строки 2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки


Вот пример где значение атрибута "valign" равно "bottom":

1 ячейка 1 строки 2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки


Если не указывать атрибута "align" и "valign", то по умолчанию они принимают значения "left" и "middle" соответственно.


Атрибут: Bgcolor

Определяет цвет фона строки таблицы. Идентичен одноименному атрибуту элемента <Table>.

Записывается так:

<tr bgcolor="blue">


Элемент Td

Создает в текущей строке ячейку с данными (текст, графическое изображение, всевозможные объекты мультимедия и т.д). Внутрь ячейки может быть вложена другая таблица.

Имеет атрибуты:
Атрибут: Width


Определяет ширину ячейки в пикселях или в процентах от ширины таблицы. Обычно этот атрибут выставляется один раз для столбца. То есть для всех ячеек во всех строках с одним и тем же порядковым номером.

Записывается так:

<td width="15%">

Пример задания ширины ячейки:

1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки

Здесь я задал ширину для 1 ячейки 1 строки таблицы равной 15 % от ширины таблицы. И как Вы видите 1 ячейка 2 строки приняла ту же ширину. Ширину можно задавать и в пикселях.

Атрибут: Height

Определяет определяет высоту ячейки в пикселях или в процентах. Обычно этот атрибут выставляется для какой нибудь одной ячейки строки. То есть все ячейки текущей строки принимают для себе это же значение.

Записывается так:

<td height="150">

Пример задания высоты ячейки:

1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки

В этом примере во 2 ячейке первой строки выставлен атрибут "height" равный "100". И как Вы видите вторая ячейка приняла то же значение атрибута "height", хотя он и не указан во второй ячейке. Если в одной строке несколько ячеек (элементов <td>) будут иметь атрибут "height" с разными значениями, браузер прорисует ячейки выбрав максимальное значение атрибута "height".
Для правильного отображения таблицы значение атрибута "height" выставляйте в пикселях. Как ни странно но не IE, ни Opera, ни Netscape не хотят понимать значение "height" в процентах.

Атрибут: Bgcolor

Определяет цвет фона ячейки. Идентичен одноименному атрибуту элемента <Table>.

Записывается так:

<td bgcolor="green">

Атрибут: Background

Этот атрибут позволяет залить тело ячейки графическим изображением, также как и одноименный атрибут элемента <Table>. В качестве значения указывается путь до файла изображения.

Записывается так:

<td background="http://site.ru/images/fon.gif">

Атрибут: Align

Определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: "left" (по левому краю), "right" (по правому краю), "center"(по центру).

Записывается так:

<td align="centr">

Атрибут: Valign

Определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: "top" (по верхней границе ячейки), "bottom" (по нижней границе ячейки), "middle"(по центру)..

Записывается так:

<td valign="top">

То есть для каждой конкретной ячейки можно задать свой способ выравнивания.
Пример:
1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки

Здесь для первой ячейки первой строки значение атрибута "valign" задано как "bottom". Для второй ячейки этой же строки valign="middle". Для первой ячейки второй строки valign="middle". Для второй ячейки второй строки valign="top".





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

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



Заговор для студента
Eminem - Lose Yourself Eminem - Evil Deeds Scooter - Fire БиС - Сны Стас Михаилов - Мне б взлететь
Tag cloud
Свернуть Архив записей Развернуть
«  Апрель 2024  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930
Опросник
Где, Вы – предпочитаете отдыхать?
Всего ответов: 62
Толкование значения снов на букву: «Н»
Толкование значения снов на букву: «Н»
Остерегайтесь скандалов, ссор и проклятий ближнего своего
Остерегайтесь скандалов, ссор и проклятий ближнего своего
Совместимость по знаку зодиака Телец – Скорпион
Совместимость по знаку зодиака Телец – Скорпион
Обереги...
Обереги...
Совместимость по знаку зодиака Близнецы – Стрелец
Совместимость по знаку зодиака Близнецы – Стрелец
Анекдоты про чудаков - (80 шт.)
Анекдоты про чудаков - (80 шт.)
Прикольные цитаты
Прикольные цитаты
Анекдоты про Вовочку -=- 39
Анекдоты про Вовочку -=- 39
Анекдоты про полицейских (34)
Анекдоты про полицейских (34)
Анекдоты о работе - (67)
Анекдоты о работе - (67)
Advertising
MeteoNova
Свернуть Statistics Развернуть
Онлайн всего: 1
Гостей: 1
Пользователей: 0

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

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