Таблицы - Форматирование документа

• Команда TABLE
  • Размещение содержимого в клетках (ALIGN,VALIGN)
  • Атрибуты CELLPADDING,CELLSPACING
  • Задание заголовка к таблице (CAPTION)
  • Рамка (BORDER)
  • Задание цвета фона клеток и рамки
  • Изменение шрифтов
  • Задание нестандартных таблиц

Команда <TABLE> (задание и описание таблиц) является основной командой форматирования документа HTML.

Задание таблицы определяется двумя командами (и соответственно их атрибутами):

• <TR> (table row) - описание строки таблицы;
• <TD> (table detail)- описание клетки таблицы;

<TABLE>
<TR>
  <TD>Яблоки</TD><TD>Огурцы</TD>
<TR></TR>
  <TD>Апельсины<TD></TD>Помидоры</TD>
</TR>
</TABLE>

По умолчанию таблица прижимается (aligns) влево, ширина таблицы определяется наиболее длинным элементом в столбце, содержание каждой клетки размещается в середине клетки по высоте и прижимается к левому углу по ширине.

Ширина таблицы задается атрибутом WIDTH= для команды TABLE. Значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана просмотрщика. Содержание каждой клетки может быть размещено с помощью атрибутов ALIGN= (горизонтальное положение) и VALIGN= (вертикальное положение) для команд TR или TD.

Атрибут VALIGN может принимать следующие значения:

• top - прижать вверх
• bottom - прижать вниз
• middle - разместить по центу

• left - прижать влево
• right - прижать вправо
• center - разместить по центу

Атрибуты CELLPADDING= и CELLSPACING= определяют расстояние в пикселях между границей клетки и ее содержимым и между клетками соответственно.

Рассмотрим пример таблицы, занимающей весь экран просмотрщика и содержащей клетки прижатые влево и вверх:

<TABLE WIDTH="100%"> <TR VALIGN=TOP ALIGN=LEFT> <TD>Яблоки<TD>Огурцы <TR VALIGN=TOP ALIGN=LEFT> <TD>Апельсины<TD>Помидоры </TABLE>

Что даст:

Яблоки	Огурцы
Апельсины	Помидоры

В этом примера ширина таблицы задана в процентах (100%) от ширины экрана.

Можно добавить к таблице заголовок (caption), а также (headings) к строке или столбцу. Команда CAPTION после команды TABLE задает заголовок к таблице. По умолчанию заголовок центрируется относительно таблицы. При помощи атрибутов заголовок можно разместить ALIGN= или VALIGN= вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы.

Задание headings к строке (rows) или столбцу (columns) таблицы осуществляется при помощи команды TH после команды TR или TD.

Внутри клетки, задаваемой командой TD можно поместить текст или рисунок.

Атрибут BORDER= к команде TABLE рисует рамку вокруг таблицы и каждой клетки. Отметим, что если клетка является пустой, вокруг нее рамка рисоваться не будет, поэтому в пустые клетки в таблицах следует помещать любой непечатный символ (например, неразрывный пробел (&nbsp;). Ширина рамки (бордюра) задается в пикселях.

В следующем примере построена таблица с рамкой, заголовком и headings:

<TABLE BORDER=1> <CAPTION>Фрукты и Овощи</CAPTION> <TR> <TH>Фрукты<TH>Овощи <TR> <TD>Яблоки<TD>Огурцы <TR> <TD>Апельсины<TD>Помидоры </TABLE>

Что даст:

Фрукты и Овощи

Фрукты	Овощи
Яблоки	Огурцы
Апельсины	Помидоры

По умолчании headings центрируется относительно клетки таблицы. Атрибуты ALIGN= и VALIGN= соответственным образом изменяют его горизонтальное и вертикальное расположение.

При формировании таблиц, можно задавать цвет фона клеток и цвет рамки, используя атрибуты BGCOLOR= и BORDERCOLOR= к командам TABLE, TR, и TD соответственно изменяя цвет фона во всей таблице, в строке или в клетке.

Атрибут BGCOLOR= устанавливает цвет фона для элементов таблицы.

Атрибут BORDERCOLOR= устанавливает цвет рамки.

В следующем примере использовано задание одинакового цвета фона для заголовков (headings) столбцов, и разное для клеток таблицы:

<TABLE BORDERCOLOR=NAVY BORDER=1> <CAPTION>Фрукты и Овощи</CAPTION> <TR BGCOLOR=GRAY> <TH>Фрукты<TH>Овощи <TR> <TD BGCOLOR=LIME>Яблоки<TD BGCOLOR=AQUA>Огурцы <TR> <TD BGCOLOR=LIME>Апельсины<TD BGCOLOR=AQUA>Помидоры </TABLE>

Что даст:

Фрукты и Овощи

Фрукты	Овощи
Яблоки	Огурцы
Апельсины	Помидоры

Используя команды изменения текстовых шрифтов такие как, например, B, (bold - полужирный) I, (italic - курсив) или FONT (команда задания типа фонта) можно изменить начертание букв в тексте, однако эти команды правильно действуют (особенно команда FONT) только в пределах одной клетки. При переходе в другую клетку, при выходе из таблицы или при входе в таблицу эти команды могут быть отменены, а могут и не отменены. Для правильного их использования команды изменения шрифтов следует указывать в каждой клетке таблицы.

Как известно, таблицы далеко не всегда имеют правильную клеточную структуру. Для задания не стандартных таблиц используются дополнительные команды и атрибуты. Команды THEAD, TBODY, и TFOOT делят таблицу на три части: верхняя часть таблицы (header), тело таблицы (body) и нижняя часть таблицы (footer), в каждой из которых может быть свое деление на клетки.

Команды COLGROUP и COL определяют общие свойства столбцов таблицы, объединяя атрибуты отдельных клеток команды TD.

Атрибуты FRAME= и RULES= командыTABLE определяют способ отрисовки рамки таблицы. Например, рассмотрим таблицу имеющую рамку вокруг таблицы, а внутри таблицы рамкой выделяются верхняя часть таблицы (заголовок) и столбцы в нижней части. Атрибуты COLSPAN= и ROWSPAN= команд TD TH позволяют объединять клетки таблицы в группы, вокруг которых рисуется рамка.

Следующий пример показывает как можно выполнить поставленную задачу:

<TABLE WIDTH="50%" BORDER=1 FRAME=BOX RULES=GROUPS> <COLGROUP ALIGN=CENTER> <COLGROUP ALIGN=CENTER> <THEAD> <TR> <TH COLSPAN=2>Фрукты и овощи <TBODY> <TR> <TD>Яблоки<TD>Огурцы <TR> <TD>Апельсины<TD>Помидоры </TABLE>

Что даст:

Фрукты и овощи
Яблоки	Огурцы
Апельсины	Помидоры

Или

<TABLE WIDTH="50%" BORDER=1> <TR> <TH ROWSPAN=2>Фрукты и овощи <TD align=center>Яблоки Огурцы <TR> <TD align=center>Апельсины Помидоры </TABLE>

Что даст:

Фрукты и овощи	Яблоки Огурцы
	Апельсины Помидоры

Принципиально в стандарте языка имеется возможность включать в качестве фона клетки таблицы рисунки, и устанавливать правила отрисовки рамки, но не все просмотрщики это понимают.