Основные тэги таблиц и их атрибуты

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

Элемент TABLE представляет собой тэг-контейнер, в котором размещается содержимое таблицы. Этот контейнер напоминает контейнер списка.

Таблица строится по строкам: для обозначения строки используется контейнер TR, для обозначения заголовков столбцов (строк) - контейнер TH, а для данных в ячейках - контейнер TD. Заголовки выделяются полужирным шрифтом и центрируются в своих ячейках. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки. Ниже приведен список основных тэгов таблиц:

• <TABLE></TABLE> - контейнер таблицы.

• <TR></TR> - контейнер строки таблицы. Допускается отсутствие закрывающего тэга.

• <TD></TD> - контейнер ячейки таблицы. В ячейку можно включить другую таблицу. Закрывающий тэг может быть опущен.

• <TH></TH> - контейнер заголовка, располагающегося обычно в первой строке, либо в первом столбце таблицы. Закрывающий тэг необязателен.

• BORDER тэга <TABLE> - для определения рамки таблицы. Ширина рамки устанавливается в пикселах, например BORDER=1 (значение, равное нулю, означает отсутствие рамки).

• ALIGN тэга <TABLE> - для выравнивания таблицы в окне браузера. Имеет значения LEFT, CENTER и RIGHT (по умолчанию - LEFT).

Ниже приведен фрагмент HTML - кода и его интерпретация браузером

<TABLE BORDER=1>
  <TR>
    <TD> Item1 </TD>
    <TD> Item2</TD>
  </TR>
  <TR>
    <TD> Item3 </TD>
    <TD> Item4 </TD>
  </TR>
</TABLE>

Наличие в ячейках данных необязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (<TD></TD>), любо заполнить ее специальным символом пустого пространства &nbsp; (<TD>&nbsp;</TD>). При выводе пустых ячеек браузер Microsoft Internet Explorer объединяет их. Ячейки с невидимым содержанием выводятся раздельно.

При помощи атрибутов ALIGN и VALIGN можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с элементами <CAPTION>, <TR>, <TH> и <TD> в самых различных комбинациях. Ниже приведены значения атрибутов для этих элементов:

• <CAPTION> - атрибут ALIGN может иметь значения TOP и BOTTOM (по умолчанию - TOP); размещает заголовок таблицы сверху или снизу.

• <TR> - атрибут ALIGN может принимать значения LEFT, CENTER и RIGHT (по умолчанию - LEFT для данных, CENTER для заголовков); он определяет горизонтальное выравнивание данных в ячейках и действует на всю строку, если он не отменяется тем же атрибутом в отдельной ячейке. Атрибут VALIGN может иметь значения TOP, BOTTOM, MIDDLE и BASELINE (по умолчанию - MIDDLE); он регулирует положения данных относительно верхней и нижней границ ячейки и влияет на всю строку, если не отменяется таким же атрибутом в отдельной ячейке. BASELINE применяется ко всем элементам строки и выравнивает их по базовой линии.

• <TH> - атрибут ALIGN может принимать значения LEFT, CENTER и RIGHT ( по умолчанию - CENTER). Атрибут VALIGN может иметь значения TOP, BOTTOM и MIDDLE (по умолчанию - MIDDLE).

• <TD> - атрибут ALIGN может принимать значения LEFT, CENTER и RIGHT (по умолчанию - LEFT). Атрибут VALIGN может иметь значения TOP, BOTTOM и MIDDLE (по умолчанию - MIDDLE ).

Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут ROWSPAN тэга <TH> или <TD>, например:

<TD ROWSPAN=2>

Для объединения двух смежных ячеек в одной строке нужно использовать атрибут COLSPAN тех же тэгов, например:

<TD COLSPAN=2>

Новые атрибуты таблиц

В HTML версии 3.2 введены несколько новых атрибутов таблиц. Ниже приведен их список:

• WIDTH - определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера. Может также использоваться для отдельной ячейки.

• HEIGHT - определяет высоту всей таблицы в пикселах, либо в процентах от ширины окна браузера. Может также использоваться для отдельной ячейки.

• BORDER - устанавливает ширину рамки в пикселах.

• CELLPADDING и CELLSPACING - добавляют свободное пространство между данными внутри ячейки и ее границами и, соответственно, между ячейками внутри всей таблицы. Если рамка отсутствует, то результат их действия одинаков.

Использование цветов

Тэги <TABLE>, <TD>, <TH> и <TR> допускают использование атрибутов BGCOLOR и BORDERCOLOR для изменения цвета отдельных ячеек или всей таблицы.