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

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

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

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



Заговор от армии
Чего это тебе он там пишет Chris Parker - Symphony Наутилус Помпилиус - Брилли... Evanescence - Lithium Scooter - Suavemente
Tag cloud
Свернуть Архив записей Развернуть
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Опросник
Деньги — это …?
Всего ответов: 85
Шар Предсказаний
Шар Предсказаний
Китайский гороскоп – «Петух»
Китайский гороскоп – «Петух»
Дженни Зелёные Зубы – так называемые баги
Дженни Зелёные Зубы – так называемые баги
Носители магии - Авгуры
Носители магии - Авгуры
Азы - Тувинские злые духи
Азы - Тувинские злые духи
Приключения кота Барсика
Приключения кота Барсика
Анекдоты про чудаков - (70 шт.)
Анекдоты про чудаков - (70 шт.)
Анекдоты про призывников -=- (30)
Анекдоты про призывников -=- (30)
Анекдоты про ковбоев -- (56)
Анекдоты про ковбоев -- (56)
Анекдоты про семью - (67шт.)
Анекдоты про семью - (67шт.)
Advertising
MeteoNova
Свернуть Statistics Развернуть
Онлайн всего: 1
Гостей: 1
Пользователей: 0

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

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