Таблицы

16.06.2009

Примеры таблиц by Battle_[Boy]

Пример 1:
<TABLE BORDER>
<TR>
<TH ROWSPAN=2>HDD</TH>
<TD>WD Caviar 3.1Gb</TD><TD ALIGN="right">85$</TD>
</TR>
<TR>
<TD>Quantum FB ST 6.4Gb</TD><TD ALIGN="right">110$</TD>
</TR>
</TABLE>
Результат:



Пример 2:
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Video</TH>
</TR>
<TR>
<TD>Matrox G400</TD><TD ALIGN="right">115$</TD>
</TR>
<TR>
<TD>Voodoo III</TD><TD ALIGN="right">129.95$</TD>
</TR>
</TABLE>
Результат:

16.06.2009

TR by Battle_[Boy]

Table Row

Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH

Атрибуты:

ALIGN – определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.

VALIGN – определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.

BGCOLOR – определяет цвет фона для всех ячеек данного ряда. системе.


===========

TD и TH

Table Data & Table Head

Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок.

Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, должна улучшиться работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы.

Атрибуты:

ALIGN – определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением атрибута ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH – центрирование.

VALIGN – определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого атрибута не было задано ранее в элементе TR.

WIDTH – определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.

HEIGHT – определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к высоте таблицы.

COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

NOWRAP – блокирует автоматический перенос слов в пределах текущей ячейки. Обратите внимания на примечание, касающееся использования данного атрибута (далее, внизу страницы).

BGCOLOR – определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

BACKGROUND – заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный атрибут не работает в старых версиях браузера Netscape (до 3.X включительно).

Примечания:

Границы ячейки отображаются только в том случае, когда она имеет некое содержание. Чтобы получить пустую ячейку с границами, достаточно поместить в нее специальный символ   или маленькую прозрачную gif-картинку.

Если вы используете одновременно атрибуты NOWRAP и WIDTH="x", где x – маленькое число, то следует дополнительно вставлять внутрь ячейки <NOBR>
Пример:
<!-- Так делать неправильно -->
<TABLE border=1>
...
<TR><TD WIDTH=5 NOWRAP>Текст, который не должен переноситься</TD></TR>
...
</TABLE>

<!-- А вот так – правильно и работает всегда -->
<TABLE border=1>
...
<TR><TD WIDTH=5 NOWRAP><NOBR>Текст, который не будет переноситься</NOBR></TD></TR>
...
</TABLE>
Дело в том, что в браузерах Internet Explorer для полной отмены переноса слов используется именно <NOBR>, а атрибут NOWRAP действует только при отсутствии WIDTH.

Атрибут HEIGHT, указанный в процентном отношении, работает нормально лишь в том случае, когда явно задана высота всей таблицы.

Один из наиболее распространенных приемов web-дизайнера – "таблица в таблице". Для этого достаточно расположить одну таблицу внутри ячейки другой. Таким образом можно создавать даже очень сложные вложенные "каркасы" дизайна страницы.