Новости
Блог
Статьи
Фото
Видео
Муз
Игры
ТВ
Радио
Форум
Чат
CSS
К-сайта
FAQ
E
Таблицы (часть I)
Одним из самых важных элементов в HTML, несомненно являются таблица. С помощью них очень просто располагать текст и картинки в нужных нам местах. Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.
|
Чтобы разобраться в устройстве таблицы, расмотрим простой пример: |
Такая таблица реализуется следующим кодом: |
||||
Примечание: В данном примере создана таблица с фиксированой шириной (WIDTH="200" пикселей), но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменятся в зависимости от размера окна. |
<TABLE BORDER="2" WIDTH="300" BGCOLOR="#00FF00">
|
А теперь о каждом элементе таблицы, его атрибутах и их значениях, в подробностях и с примерами.
Элемент Table |
||||||||||||||
|
Элемент извещающий о начале таблицы. Обязательно должен иметь закрывающий тег </Table>, который закрывает таблицу.
Имеет следующие атрибуты: | ||||||||||||||
|
Этот атрибут задает ширину таблицы в пикселях или в процентах от ширины
объекта, в который помещена таблица. Если не указать этот атрибут, то
браузер автоматически определит этот параметр в зависимости от объема
содержащегося в таблице материала.
Записывается так:
| ||||||||||||||
Атрибут: Height
| ||||||||||||||
| Этот
атрибут задает ширину таблицы в пикселях или в процентах от ширины
объекта, в который помещена таблица. Если не указать этот атрибут, то
браузер автоматически определит этот параметр в зависимости от объема
содержащегося в таблице материала.
Записывается так:
| ||||||||||||||
Атрибут: Bgcolor
| ||||||||||||||
|
Определяет цвет фона таблицы. Идентичен одноименному атрибуту элемента <Body>.
Записывается так:
| ||||||||||||||
Атрибут: Background
| ||||||||||||||
|
Этот атрибут позволяет залить тело таблицы графическим изображением, также как и одноименный атрибут элемента <Body>. В качестве значения указывается путь до файла изображения.
Записывается так:
| ||||||||||||||
Атрибут: Border
| ||||||||||||||
| Указывает
ширину внешней рамки таблицы в пикселях. Если этот атрибут не указывать
или указать значение "0", рамка отобраэаться не будет.
Записывается так:
Пример таблицы с рамкой равной 5 пикселям:
| ||||||||||||||
Атрибут: Align
| ||||||||||||||
| Атрибут
горизонтального выравнивания таблицы. Имеет значения "center" (по
центру), "left" (по левому краю) и "right" (по правому краю).
Записывается так:
| ||||||||||||||
Атрибут: Cellspacing
| ||||||||||||||
|
Определяет расстояние в пикселях между ячейками таблицы.
Записывается так:
Пример таблицы со значением атрибута "cellspacing" равным "5":
| ||||||||||||||
Атрибут: Cellpadding
| ||||||||||||||
|
Этот атрибут определяет расстояние в пикселях между рамкой, каждой ячейки таблицы и ее содержимым.
Записывается так:
Пример таблицы со значением атрибута "cellpadding" равным "10":
| ||||||||||||||
|
Заметьте, что ширина таблицы в первом и во втором примере не менялась и составляет 300 пикселей. Но во второй таблице мы имеем атрибут cellpadding равный "10", то есть в каждой ячейке существуют как бы "мертвые зоны" слева, справа, сверху и снизу, величиной 10 пикселей. Этим мы как бы отобрали у каждой ячейки часть рабочего простанства в 20 пикселей по горизонтали (10 слева и 10 справа) и 20 пикселей по вертикали (10 сверху и 10 снизу). В итоге содержимое ячеек уже не поместилось в оставшееся пространство и чтобы показать все содержимое, браузер растянул таблицу по вертикали. | ||||||||||||||
Элемент Tr |
||||||||||||||
|
Элемент создает новую строку ячеек в таблице.
Имеет следующие атрибуты: | ||||||||||||||
|
Определяет способ горизонтального выравнивания содержимого всех ячеек
данной строки. Возможные значения:"left" (по левому краю), "center" (по
центру), "right" ( по правому краю).
Записывается так:
| ||||||||||||||
|
Элемент создает новую строку ячеек в таблице.
| ||||||||||||||
| Определяет
способ вертикального выравнивания содержимого всех ячеек данного ряда.
Возможные значения: "top" (по верхней границе строки), "bottom" (по
нижней границе строки), "middle"(по центру строки).
Записывается так:
Посмотрите пример:
Видите содержимое второй ячейки первой строки увеличилось в объеме и чтобы отобразить это содержимое браузер растянул по вертикали первую строку. Но в то же время содержимое первой ячейки по центру строки. Атрибут "valign" для того чтобы выравнять содержимое ячеек, то есть чтоб содержимое ячеек всегда находилось там где Вы хотите. Вот пример в котором значение атрибута "valign" равно "top", то есть выранивание осуществляется по верхней границе строки. И теперь как бы не раздвигалась таблица содержимое первой ячейки будут как бы привязаны к верху строки.
Вот пример где значение атрибута "valign" равно "bottom":
Если не указывать атрибута "align" и "valign", то по умолчанию они принимают значения "left" и "middle" соответственно. | ||||||||||||||
Атрибут: Bgcolor
| ||||||||||||||
|
Определяет цвет фона строки таблицы. Идентичен одноименному атрибуту элемента <Table>.
Записывается так:
| ||||||||||||||
Элемент Td |
||||||||||||||
|
Создает в текущей строке ячейку с данными (текст, графическое
изображение, всевозможные объекты мультимедия и т.д). Внутрь ячейки
может быть вложена другая таблица.
Имеет атрибуты: | ||||||||||||||
|
Определяет ширину ячейки в пикселях или в процентах от ширины таблицы.
Обычно этот атрибут выставляется один раз для столбца. То есть для всех
ячеек во всех строках с одним и тем же порядковым номером.
Записывается так:
Пример задания ширины ячейки:
Здесь я задал ширину для 1 ячейки 1 строки таблицы равной 15 % от ширины таблицы. И как Вы видите 1 ячейка 2 строки приняла ту же ширину. Ширину можно задавать и в пикселях. | ||||||||||||||
Атрибут: Height
| ||||||||||||||
|
Определяет определяет высоту ячейки в пикселях или в процентах. Обычно
этот атрибут выставляется для какой нибудь одной ячейки строки. То есть
все ячейки текущей строки принимают для себе это же значение.
Записывается так:
Пример задания высоты ячейки:
В этом примере во 2 ячейке первой строки выставлен атрибут "height" равный "100". И как Вы видите вторая ячейка приняла то же значение атрибута "height", хотя он и не указан во второй ячейке. Если в одной строке несколько ячеек (элементов <td>) будут иметь атрибут "height" с разными значениями, браузер прорисует ячейки выбрав максимальное значение атрибута "height". Для правильного отображения таблицы значение атрибута "height" выставляйте в пикселях. Как ни странно но не IE, ни Opera, ни Netscape не хотят понимать значение "height" в процентах. | ||||||||||||||
Атрибут: Bgcolor
| ||||||||||||||
|
Определяет цвет фона ячейки. Идентичен одноименному атрибуту элемента <Table>.
Записывается так:
| ||||||||||||||
Атрибут: Background
| ||||||||||||||
|
Этот атрибут позволяет залить тело ячейки графическим изображением, также как и одноименный атрибут элемента <Table>. В качестве значения указывается путь до файла изображения.
Записывается так:
| ||||||||||||||
Атрибут: Align
| ||||||||||||||
|
Определяет способ горизонтального выравнивания содержимого ячейки.
Возможные значения: "left" (по левому краю), "right" (по правому краю),
"center"(по центру).
Записывается так:
| ||||||||||||||
Атрибут: Valign
| ||||||||||||||
| Определяет
способ вертикального выравнивания содержимого ячейки. Возможные
значения: "top" (по верхней границе ячейки), "bottom" (по нижней
границе ячейки), "middle"(по центру)..
Записывается так:
То есть для каждой конкретной ячейки можно задать свой способ выравнивания. Пример:
Здесь для первой ячейки первой строки значение атрибута "valign" задано как "bottom". Для второй ячейки этой же строки valign="middle". Для первой ячейки второй строки valign="middle". Для второй ячейки второй строки valign="top". | ||||||||||||||
