Гость !!! | RSS
Меню сайта
Оставить отзыв Гороскопы Сонник Мешок позитива Раскрутка сайта HTML HTML Формы Примеры Таблицы Таблицы цветов Генераторы Скрипты
Категории раздела
Новости [61]
Х-Новости [44]
Самое..., самое!!! [342]
ИнтересНости [241]
Праздничная [3]
Ghostly photo
Рекордный прыжок над крышами Монмартра
Рекордный прыжок над крышами Монмартра
Продюсер сериала «Спартак» - раскрывает секреты!!!
Продюсер сериала «Спартак» - раскрывает секреты!!!
Самые дорогие российские монеты
Самые дорогие российские монеты
Звездное трио, которое танцует в полной тишине
Звездное трио, которое танцует в полной тишине
Юлия Гнус – девушка картина.
Юлия Гнус – девушка картина.
Самые страшные животные в мире
Самые страшные животные в мире
Mitoza - Проверь свою логику
Mitoza - Проверь свою логику
Гигантская плантация марихуаны в Мексике
Гигантская плантация марихуаны в Мексике
Soft
Получить код блока
Mini-CHat
Они ждут - Тебя!
Головоломки · Treasure Caves 2
Аркады и экшн · hit banana
Поиск предметов · Записки волшебника. Заколдованный город
Аркады и экшн · Амели. Кафе

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

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

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



Заговор от табака
Movetown - Round N Round Eminem - Bump Heads Елена Ваенга - Говори, говори Стас Михаилов - Приди Ко Мне
Tag cloud
Свернуть Архив записей Развернуть
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Опросник
Вера в людей — это …?
Всего ответов: 92
Баранец - Фантастическое растение-животное
Баранец - Фантастическое растение-животное
Шумерская цивилизация
Шумерская цивилизация
Символика татуировки (тату) » Знаки зодиака – Скорпион
Символика татуировки (тату) » Знаки зодиака – Скорпион
Ахерон - терпящий наказание титан
Ахерон - терпящий наказание титан
Толкование значения снов, на букву: «Р»
Толкование значения снов, на букву: «Р»
Анекдоты про чудаков - (145 шт.)
Анекдоты про чудаков - (145 шт.)
Анекдоты про писателей - (29)
Анекдоты про писателей - (29)
Ну вот, я, как и многие другие россияне, тоже искупался на Крещение - сказал президент Медведев
Ну вот, я, как и многие другие россияне, тоже искупался на Крещение - сказал президент Медведев
Анекдоты про семью - (67шт.)
Анекдоты про семью - (67шт.)
«Это фантастика!» - восклицал волк ... (анекдоты)
«Это фантастика!» - восклицал волк ... (анекдоты)
Advertising
MeteoNova
Свернуть Statistics Развернуть
Онлайн всего: 1
Гостей: 1
Пользователей: 0

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

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