Элемент 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".
|
Одним из самых важных элементов в HTML, несомненно являются таблица. С помощью них очень просто располагать текст и картинки в нужных нам местах. Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.
