Таблицы. Таблицы в HTML организуются как набор столбцов и строк

Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.

Каждая таблица должна начинаться тэгом < TABLE> и заканчивается тэгом < /TABLE>. По умолчанию таблица не имеет обрамления и разделителей.

Строка таблицы: < TR>...< /TR>

Количество строк таблицы определяется количеством встречающихся пар тэгов < TR>..< /TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы: < TD>...< /TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

Заголовок таблицы: < TH>...< /TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись: < CAPTION>...< /CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг < CAPTION> должен присутствовать внутри < TABLE>...< /TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию < CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где – сверху или снизу таблицы — будет поставлена подпись. По умолчанию подпись всегда центрирована в рамках ширины таблицы. Браузер Microsoft Internet Explorer предоставляет дополнительные возможности для выбора расположения заголовка. Параметр ALIGN допускает значения LEFT, RIGHT, CENTER. Отметим, что это один из редких случаев, когда широко распространенный параметр ALIGN может использоваться для горизонтального и вертикального выравнивания. Однако двойное использование в одном заголовке параметра ALIGN недопустимо. Поэтому дополнительно введен специальный параметр для вертикального выравнивания — VALIGN, принимающий значения TOP и BOTTOM. Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, описание имеет вид:

< CAPTION ALIGN=Left VALIGN=bottom> Заголовок таблицы < /caption>

Параметры тэга < TABLE>

Основным тэгом, применяемым при создании таблиц, является тэг < TABLE>. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге < TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузеры Netscape и Microsoft Internet Explorerразрешают кроме перечисленных пяти параметров использовать параметры HEIGHT и BGCOLOR.

Параметр BORDER

Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

Параметр ALIGN

Если атрибут ALIGN присутствует внутри тэгов < TABLE> и < /TABLE>, то он определяет горизонтальное расположение таблицы в области просмотра. По умолчанию ALIGN=left. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания — CENTER. Это обусловлено тем, что присутствие параметра ALIGN в тэге < TABLE> не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы с двух сторон не предусмотрено. Для более точного управления обтеканием следует использовать тэг < BR> с параметром CLEAR так же, как это выполняется для < IMG>. Если параметр ALIGN опущен, то место слева и/или справа таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то можно добиться ее расположения по центру окна просмотра. Для этого необходимо все описание таблицы поместить внутри тэгов < CENTER> и < /CENTER>.

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

Каждую отдельную ячейку таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут использоваться для форматирования текста внутри ячейки. Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться внутри тела документа < BODY>. Область действия тэгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки независимо от наличия завершающего тэга. Например, если внутри ячейки определен цвет текста — < FONT COLOR=RED>, то даже при отсутствии завершающего кода < /FONT> или расположения его через несколько ячеек или строк таблицы, текст следующей ячейки будет отражен цветом по умолчанию.

Параметры выравнивания содержимого ячеек — ALIGN и VALIGN. Могут применяться в кодах < TR>, < TD> и < TH>. Параметр горизонтального выравнивания ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию LEFT для < TD> и CENTER для < TH>). Параметр вертикального выравнивания VALIGN может принимать значения TOP (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (посередине), BASELINE (по базовой линии). По умолчанию — MIDDLE. Выравнивание по базовой линии обеспечивает привязку текста отдельной строки во всех ячейках к единой линии. Задание параметров выравнивания на уровне кода < TR> определяет выравнивание для всех ячеек данной строки, при этом в каждой отдельной ячейки строки могут быть определены свои параметры, переопределяющие действие параметров, заданных в < TR>.

Параметр NOWRAP отключает возможность автоматического разбиения текста ячейки на строки. Может применяться в кодах < TR>, < TD> и < TH>. Следует избегать неоправданного применения этого параметра, так как это может значительно сократить возможности динамического изменения размеров таблиц и ухудшить их восприятие. В большинстве случаев достаточно применить NOWRAP для отдельных ячеек. Перенос слов осуществляется только по разделителям между словами (пробелами), и в ряде случаев для запрещения разрыва текста в отдельных местах следует вместо символа пробела задавать код неразрывного пробела & nbsp; (NonBreaking Space). Например, текст 650 км или Иванов И.И. рекомендуют записывать так: 650& nbsp; км и Иванов& nbsp; И.И.

Параметры WIDTH и HEIGHT могут применяться в кодах < TD> и < TH>. Их значение определяет ширину и высоту ячейки. Значения могут задаваться в пикселях или в процентах от размеров всей таблицы. Microsoft Internet Explorer разрешает задавать значение WIDTH только в пикселях. Задание ширины, для какой либо одной ячейки, влияет на ширину всей колонки, в которой расположена эта ячейка, а задание высоты влияет на всю строку. Если в колонке значение ширины указано в нескольких ячейках, то выбирается максимальное значение. Те же свойства характерны и для строк.

В сложных таблицах объединяют несколько смежных ячеек по горизонтали и/или по вертикали в одну. Данная возможность реализуется с помощью параметров COLSPAN (COLumn SPANning) и ROWSPAN (ROW SPANning).

Пример таблицы

< TABLE BORDER=5>

< CAPTION ALIGN=bottom> Таблица №1 < /CAPTION>

< TR> < TD ROWSPAN=2> < /TD> < TH COLSPAN=2> Среднее значение< /TH> < /TR>

< TR> < TH> Рост< /TH> < TH> Вес< /TH> < /TR>

< TR> < TD> Мужчины< /TD> < TD ALIGN=center> 174< /TD> < TD ALIGN=center> 78< /TD> < /TR>

< TR> < TD> Женщины< /TD> < TD ALIGN=center> 165< /TD> < TD ALIGN=center> 56< /TD> < /TR>

< /TABLE>

Вложенные таблицы

Отдельные ячейки таблицы могут содержать практически любые тэги языка и данные, разрешенные в разделе < BODY>. В том числе, внутри одной ячейки таблицы может быть расположена другая таблица. Не все браузеры, поддерживающие таблицы, правильно отображают сложные таблицы.