Гость !!! | RSS
Меню сайта
Оставить отзыв Гороскопы Сонник Мешок позитива Раскрутка сайта HTML HTML Формы Примеры Таблицы Таблицы цветов Генераторы Скрипты
Категории раздела
Новости [61]
Х-Новости [44]
Самое..., самое!!! [342]
ИнтересНости [241]
Праздничная [3]
Ghostly photo
Появление на свет редких сиамских крокодилов
Появление на свет редких сиамских крокодилов
Наша Луна может быть не уникальной
Наша Луна может быть не уникальной
Топ 10 любви и секса
Топ 10 любви и секса
Самое большое количество гремучих змей, удерживаемых во рту.
Самое большое количество гремучих змей, удерживаемых во рту.
Доказательство существования Бога нашли у неандертальцев!
Доказательство существования Бога нашли у неандертальцев!
Большая талия оказалась куда более точным показателем смертности, чем масса тела
Большая талия оказалась куда более точным показателем смертности, чем масса тела
Самая красивая улыбка....
Самая красивая улыбка....
Звездное трио, которое танцует в полной тишине
Звездное трио, которое танцует в полной тишине
Soft
Получить код блока
Mini-CHat
Они ждут - Тебя!
Головоломки · Flipped Out
Аркады и экшн · Обеденный переполох 2
Аркады и экшн · Haku: Spirit Storm
Головоломки · Solitaire

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

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

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



Заговор на плодовитость и размножение
Бьянка - Прости Елена Ваенга - Мамочка Татьяна Буланова - Последни... Татьяна Буланова - Дождь Наутилус Помпилиус - Три Хита
Tag cloud
Свернуть Архив записей Развернуть
«  Май 2019  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
2728293031
Опросник
Снег — это …???
Всего ответов: 98
Архангел Чамуил - Известен так-же, как Хамуил, Камаэль, Канцел, Яхоэль, Серафиил, Шемюэль, Карамил
Архангел Чамуил - Известен так-же, как Хамуил, Камаэль, Канцел, Яхоэль, Серафиил, Шемюэль, Карамил
Архангел Задкиил - Известен так-же, как Задкиэль, Саткиил, Задакиил, Зидекиил.
Архангел Задкиил - Известен так-же, как Задкиэль, Саткиил, Задакиил, Зидекиил.
Белые дамы - призраки и лесные духи
Белые дамы - призраки и лесные духи
Воинственные амазонки
Воинственные амазонки
Алконост - райская птица-дева
Алконост - райская птица-дева
Анекдоты про женщин - 61
Анекдоты про женщин - 61
Анекдоты про он и она - (121шт)
Анекдоты про он и она - (121шт)
Анекдоты про автоинспекторов (85)
Анекдоты про автоинспекторов (85)
Дагавские анекдоты ...
Дагавские анекдоты ...
Анекдоты про детишек - 82
Анекдоты про детишек - 82
Advertising
MeteoNova
Свернуть Statistics Развернуть
Онлайн всего: 1
Гостей: 1
Пользователей: 0

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

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