Элемент Table |
|
Элемент извещающий о начале таблицы. Обязательно должен иметь закрывающий тег </Table>, который закрывает таблицу.
Имеет следующие атрибуты:
Атрибут: Width
|
|
Этот атрибут задает ширину таблицы в пикселях или в процентах от ширины
объекта, в который помещена таблица. Если не указать этот атрибут, то
браузер автоматически определит этот параметр в зависимости от объема
содержащегося в таблице материала.
Записывается так:
|
Атрибут: Height
|
|
Этот
атрибут задает ширину таблицы в пикселях или в процентах от ширины
объекта, в который помещена таблица. Если не указать этот атрибут, то
браузер автоматически определит этот параметр в зависимости от объема
содержащегося в таблице материала.
Записывается так:
|
Атрибут: Bgcolor
|
|
Определяет цвет фона таблицы. Идентичен одноименному атрибуту элемента <Body>.
Записывается так:
|
Атрибут: Background
|
|
Этот атрибут позволяет залить тело таблицы графическим изображением, также как и одноименный атрибут элемента <Body>. В качестве значения указывается путь до файла изображения.
Записывается так:
<table background="http://site.ru/images/fon.gif">
|
|
Атрибут: Border
|
|
Указывает
ширину внешней рамки таблицы в пикселях. Если этот атрибут не указывать
или указать значение "0", рамка отобраэаться не будет.
Записывается так:
Пример таблицы с рамкой равной 5 пикселям:
1 ячейка 1 строки |
2 ячейка 1 строки |
1 ячейка 2 строки |
2 ячейка 2 строки |
|
Атрибут: Align
|
|
Атрибут
горизонтального выравнивания таблицы. Имеет значения "center" (по
центру), "left" (по левому краю) и "right" (по правому краю).
Записывается так:
|
Атрибут: Cellspacing
|
|
Определяет расстояние в пикселях между ячейками таблицы.
Записывается так:
Пример таблицы со значением атрибута "cellspacing" равным "5":
1 ячейка 1 строки |
2 ячейка 1 строки |
1 ячейка 2 строки |
2 ячейка 2 строки |
|
Атрибут: Cellpadding
|
|
Этот атрибут определяет расстояние в пикселях между рамкой, каждой ячейки таблицы и ее содержимым.
Записывается так:
Пример таблицы со значением атрибута "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" ( по правому краю).
Записывается так:
|
Элемент создает новую строку ячеек в таблице.
Атрибут: Valign
|
|
Определяет
способ вертикального выравнивания содержимого всех ячеек данного ряда.
Возможные значения: "top" (по верхней границе строки), "bottom" (по
нижней границе строки), "middle"(по центру строки).
Записывается так:
Посмотрите пример:
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>.
Записывается так:
|
Элемент Td |
|
Создает в текущей строке ячейку с данными (текст, графическое
изображение, всевозможные объекты мультимедия и т.д). Внутрь ячейки
может быть вложена другая таблица.
Имеет атрибуты:
Атрибут: Width
|
|
Определяет ширину ячейки в пикселях или в процентах от ширины таблицы.
Обычно этот атрибут выставляется один раз для столбца. То есть для всех
ячеек во всех строках с одним и тем же порядковым номером.
Записывается так:
Пример задания ширины ячейки:
1 ячейка 1 строки |
2 ячейка 1 строки |
1 ячейка 2 строки |
2 ячейка 2 строки |
Здесь я задал ширину для 1 ячейки 1 строки таблицы равной 15 % от
ширины таблицы. И как Вы видите 1 ячейка 2 строки приняла ту же ширину.
Ширину можно задавать и в пикселях. |
Атрибут: Height
|
|
Определяет определяет высоту ячейки в пикселях или в процентах. Обычно
этот атрибут выставляется для какой нибудь одной ячейки строки. То есть
все ячейки текущей строки принимают для себе это же значение.
Записывается так:
Пример задания высоты ячейки:
1 ячейка 1 строки |
2 ячейка 1 строки |
1 ячейка 2 строки |
2 ячейка 2 строки |
В этом примере во 2 ячейке первой строки выставлен атрибут "height"
равный "100". И как Вы видите вторая ячейка приняла то же значение
атрибута "height", хотя он и не указан во второй ячейке. Если в одной
строке несколько ячеек (элементов <td>) будут иметь атрибут
"height" с разными значениями, браузер прорисует ячейки выбрав
максимальное значение атрибута "height".
Для правильного отображения таблицы значение атрибута "height"
выставляйте в пикселях. Как ни странно но не IE, ни Opera, ни Netscape
не хотят понимать значение "height" в процентах. |
Атрибут: Bgcolor
|
|
Определяет цвет фона ячейки. Идентичен одноименному атрибуту элемента <Table>.
Записывается так:
|
Атрибут: Background
|
|
Этот атрибут позволяет залить тело ячейки графическим изображением, также как и одноименный атрибут элемента <Table>. В качестве значения указывается путь до файла изображения.
Записывается так:
<td background="http://site.ru/images/fon.gif">
|
|
Атрибут: Align
|
|
Определяет способ горизонтального выравнивания содержимого ячейки.
Возможные значения: "left" (по левому краю), "right" (по правому краю),
"center"(по центру).
Записывается так:
|
Атрибут: Valign
|
|
Определяет
способ вертикального выравнивания содержимого ячейки. Возможные
значения: "top" (по верхней границе ячейки), "bottom" (по нижней
границе ячейки), "middle"(по центру)..
Записывается так:
То есть для каждой конкретной ячейки можно задать свой способ выравнивания.
Пример:
1 ячейка 1 строки |
2 ячейка 1 строки |
1 ячейка 2 строки |
2 ячейка 2 строки |
Здесь для первой ячейки первой строки значение атрибута "valign"
задано как "bottom". Для второй ячейки этой же строки valign="middle".
Для первой ячейки второй строки valign="middle". Для второй ячейки
второй строки valign="top".
|