Глава 1.5. Таблицы

1.5.1. Общее описание

Одним из наиболее мощных механизмов языка HTML является возможность представления данных в виде таблиц, т. е. возможность расположения многомерных данных по строкам и столбцам. При этом ячейки таблиц могут содержать текст, графические образы, гиперссылки, формы и даже другие таблицы. Каждая таблица может иметь заголовок (элемент CAPTION), содержащий ее краткое описание. За ним могут следовать необязательные элементы COL и COLGROUP, которые определяют ширины столбцов таблицы и их группы. Далее следует содержимое таблицы, которое может состоять из трех секций: необязательного элемента THEAD, необязательного элемента TFOOT и одного или нескольких элементов TBODY. Элементы THEAD и TFOOT задают соответственно строки надзаголовка и подзаголовка таблицы, а элемент(ы) TBODY — группы строк тела таблицы. Каждая группа строк состоит из отдельных строк, задаваемых элементами TR, а каждый элемент TR — из элементов TH или TD, которые определяют содержимое ячеек заголовка и ячеек данных соответственно.

Таблица обязательно должна содержать хотя бы один элемент TBODY, но его начальный и конечный теги обычно опускаются, если он в таблице один, а элементов THEAD и TFOOT нет. Простая таблица выглядит так:

<TABLE>
  <CAPTION>Сокращения, принятые в Интернет-общении</CAPTION>
  <TR>
    <TH>Сокращение</TH>
    <TH>Расшифровка</TH>
    <TH>Значение</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
    <TD>насколько мне известно</TD>
  </TR>
  <TR>
    <TD>IMHO</TD>
    <TD>In My Humble Opinion</TD>
    <TD>по моему скромному мнению</TD>
  </TR>
  <TR>
    <TD>OTOH</TD>
    <TD>On The Other Hand</TD>
    <TD>с другой стороны</TD>
  </TR>
</TABLE>

а отображается так:

Примечание. Таблицы часто используются просто для размещения элементов на экране. Большинство мэтров рекомендуют этой практики по возможности избегать. Во-первых, изменение размера окна обозревателя или увеличение размера шрифтов резко искажает внешний вид таблицы. Во-вторых, большинство обозревателей не отображает таблицу до тех пор, пока полностью ее не загрузит, а это приводит к неприятному ожиданию, если весь или почти весь документ оформлен как элемент TABLE. С другой стороны, таблицы — это единственный сложный элемент HTML, который более или менее одинаково поддерживается всеми обозревателями, и поэтому они часто оказываются единственным приемлемым вариантом форматирования страницы (если только мы не хотим писать отдельный вариант страницы для каждого обозревателя).

1.5.2. Элемент TABLE

Синтаксис: <TABLE>…</TABLE> (блочный элемент)
Атрибуты:  id, class, style, title, lang, dir, события
           summary = текст (описание таблицы)
           width = размер (ширина таблицы)
           border = пиксели (ширина рамки)
           frame = void | above | below | hsides | lhs | rhs |
                   vsides | box | border (внешняя рамка)
           rules = none | groups | rows | cols | all (внутренние рамки)
           cellspacing = размер (расстояние между ячейками)
           cellpadding = размер (расстояние внутри ячеек)

Поддержка:  Атрибут summary игнорируется (5.0+)
            Атрибуты summary, frame и rules игнорируются (4.0+)

Элемент TABLE определяет таблицу. Содержимое этого элемента описано выше, приведем здесь только описание его атрибутов (все они являются необязательными):

• Атрибут summary задает описание таблицы, которое может быть более подробным пояснением заголовка таблицы.
• Атрибут width задает ширину таблицы либо в пикселях, либо в процентах от ширины окна обозревателя; задание ширины в пикселях обычно является нежелательным, т. к. может привести к неудобной для пользователя горизонтальной прокрутке документа. Если этот атрибут не указан, то ширина таблицы вычисляется обозревателем.
• Атрибут border задает ширину рамки таблицы в пикселях. По умолчанию его значение равно нулю, т. е. таблица выводится без рамки.
• Редко используемый атрибут frame указывает, какие части внешней рамки таблицы должны быть видны. Он может принимать следующие значения:

• Редко используемый атрибут rules указывает, какие части внутренней рамки таблицы должны быть видны. Он может принимать следующие значения:

• Атрибут cellspacing задает расстояние между ячейками таблицы, а атрибут cellpadding — расстояние внутри ячеек (т. е. между содержимым ячейки и рамкой). Значения этих атрибутов всегда применяются ко всем четырем сторонам ячейки.

Теперь мы можем изменить приведенный выше пример таблицы с учетом описанных атрибутов:

<TABLE border="1" cellspacing="2" width="75%"
  summary="Сокращения, принятые в Интернет-общении">
  <CAPTION><STRONG>Сокращения</STRONG></CAPTION>
  <TR>
    <TH>Сокращение</TH>
    <TH>Расшифровка</TH>
    <TH>Значение</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
    <TD>насколько мне известно</TD>
  </TR>
  <TR>
    <TD>IMHO</TD>
    <TD>In My Humble Opinion</TD>
    <TD>по моему скромному мнению</TD>
  </TR>
  <TR>
    <TD>OTOH</TD>
    <TD>On The Other Hand</TD>
    <TD>с другой стороны</TD>
  </TR>
</TABLE>

Эта таблица отображается так:

1.5.3. Заголовок таблицы: элемент CAPTION

Синтаксис: <CAPTION>…</CAPTION> (текстовый элемент)
Атрибуты:  id, class, style, title, lang, dir, события

Поддержка:  Полное соответствие стандарту (5.0+)
            Атрибут dir игнорируется (4.0+)

Элемент CAPTION определяет заголовок таблицы. Он может употребляться только как первый элемент внутри элемента TABLE. Его содержимым могут быть только текстовые элементы. Пример использования этого элемента приведен в предыдущем параграфе.

1.5.4. Группировка строк

Как отмечалось выше, строки таблицы могут быть разбиты на три группы: строки надзаголовка (элемент THEAD), строки подзаголовка (элемент TFOOT) и строки данных (один или несколько элементов TBODY). Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают THEAD и TFOOT как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы. Тем не менее, общая структура таблицы такова:

<TABLE>
<THEAD>
   <TR> …строки надзаголовка…</TR>
</THEAD>
<TFOOT>
   <TR> …строки подзаголовка…</TR>
</TFOOT>
<TBODY>
   <TR> …первая строка первого блока данных…</TR>
   <TR> …вторая строка первого блока данных…</TR>
</TBODY>
<TBODY>
   <TR> …первая строка второго блока данных…</TR>
   <TR> …вторая строка второго блока данных…</TR>
   <TR> …третья строка второго блока данных…</TR>
</TBODY>
</TABLE>

Группы THEAD, TFOOT и TBODY должны содержать одно и то же количество столбцов.

1.5.4.1. Надзаголовок: элемент THEAD

Синтаксис: <THEAD>…</THEAD> (блочный элемент)
Атрибуты:  id, class, style, title, lang, dir, события
           align = left | center | right | justify | char (горизонтальное выравнивание)
           valign = top | middle | bottom | baseline (вертикальное выравнивание)
           char = символ (символ выравнивания)
           charoff = размер (смещение до символа выравнивания)

Поддержка:  Атрибуты char и charoff не поддерживаются (5.0+)
            Отображается как TBODY (4.0+)

Элемент THEAD (table header) определяет группу строк надзаголовка таблицы. Содержимым этого элемента являются один или несколько элементов TR, которые в свою очередь должны состоять из элементов TH. Многие обозреватели его не поддерживают, а отображают как TBODY, что не вызывает особых проблем. Помимо общих атрибутов THEAD может иметь следующие необязательные атрибуты:

• Атрибут align задает горизонтальное выравнивание ячеек надзаголовка. Он может принимать следующие значения:

• Атрибут valign задает вертикальное выравнивание ячеек надзаголовка. Он может принимать следующие значения:

• Атрибуты char и charoff имеют смысл только в случае, когда align = "char". В этом случае атрибут char задает символ, по которому производится горизонтальное выравнивание ячеек. По умолчанию символом выравнивания является символ десятичной точки текущего языка, заданного атрибутом lang (например, "." для английского языка и "," для русского). Атрибут charoff задает расстояние до символа выравнивания в каждой ячейке; если ячейка не содержит символа выравнивания, то перед выравниванием он как бы добавляется к ее содержимому справа. Современные обозреватели игнорируют эти атрибуты.

1.5.4.2. Подзаголовок: элемент TFOOT

Синтаксис: <TFOOT>…</TFOOT> (блочный элемент)
Атрибуты:  id, class, style, title, lang, dir, события
           align = left | center | right | justify | char (горизонтальное выравнивание)
           valign = top | middle | bottom | baseline (вертикальное выравнивание)
           char = символ (символ выравнивания)
           charoff = размер (смещение до символа выравнивания)

Поддержка:  Атрибуты char и charoff не поддерживаются (5.0+)
            Отображается как TBODY (4.0+)

Элемент TFOOT (table footer) определяет группу строк подзаголовка таблицы. Содержимым этого элемента являются один или несколько элементов TR, которые в свою очередь должны состоять из элементов TH. Многие обозреватели его не поддерживают, а отображают как TBODY; это приводит к тому, что подзаголовок отображается перед телом таблицы, поэтому этим элементом лучше не пользоваться. Помимо общих атрибутов TFOOT может иметь те же необязательные атрибуты, что и THEAD.

1.5.4.3. Тело таблицы: элемент TBODY

Синтаксис: <TBODY>…</TBODY> (блочный элемент, оба тега не обязательны)
Атрибуты:  id, class, style, title, lang, dir, события
           align = left | center | right | justify | char (горизонтальное выравнивание)
           valign = top | middle | bottom | baseline (вертикальное выравнивание)
           char = символ (символ выравнивания)
           charoff = размер (смещение до символа выравнивания)

Поддержка:  Атрибуты char и charoff не поддерживаются (5.0+)
            Игнорируется

Элемент TBODY (table body) определяет группу строк тела таблицы. Содержимым этого элемента являются один или несколько элементов TR, которые в свою очередь должны состоять из элементов TH и TD. Помимо общих атрибутов TBODY может иметь те же необязательные атрибуты, что и THEAD. Пример:

<TABLE>
<CAPTION>Единицы международной системы СИ</CAPTION>
<THEAD>
   <TR>
     <TH>Название</TH>
     <TH>Обозначение</TH>
     <TH>Физическая величина</TH>
   </TR>
</THEAD>
<TBODY class="base">
   <TR>
     <TD>Метр</TD>
     <TD>м</TD>
     <TD>длина</TD>
   </TR>
   <TR>
     <TD>Килограмм</TD>
     <TD>кг</TD>
     <TD>масса</TD>
   </TR>
   <TR>
     <TD>Секунда</TD>
     <TD>с</TD>
     <TD>время</TD>
   </TR>
</TBODY>
<TBODY class="derived">
   <TR>
     <TD>Герц</TD>
     <TD>Гц</TD>
     <TD>частота</TD>
   </TR>
   <TR>
     <TD>Паскаль</TD>
     <TD>Па</TD>
     <TD>давление</TD>
   </TR>
   ...
</TBODY>
</TABLE>

1.5.5. Группировка столбцов

Группы столбцов позволяют авторам задавать структурное разбиение таблицы. Для выделения внутренней структуры таблицы могут использоваться таблицы стилей или атрибуты HTML (например, атрибут rules элемента TABLE). Таблица может состоять либо из одной группы столбцов (если в ней нет элементов COLGROUP), либо из нескольких явно заданных групп столбцов (каждая из которых определяется одним элементом COLGROUP). Кроме того, элемент COL позволяет присвоить нескольким столбцам одинаковые атрибуты, не создавая структурных группировок.

1.5.5.1. Группы столбцов: элемент COLGROUP

Синтаксис: <COLGROUP>…</COLGROUP> (конечный тег не обязателен)
Атрибуты:  id, class, style, title, lang, dir, события
           span = число (количество столбцов в группе)
           width = кратный размер (ширина каждого столбца)
           align = left | center | right | justify | char (горизонтальное выравнивание)
           valign = top | middle | bottom | baseline (вертикальное выравнивание)
           char = символ (символ выравнивания)
           charoff = размер (смещение до символа выравнивания)

Поддержка:  Атрибуты char и charoff не поддерживаются (5.0+)
            Не поддерживается

Элемент COLGROUP (column group) определяет группу столбцов таблицы. Его содержимым должны быть нуль или более элементов COL. Он должен располагаться после необязательного элемента CAPTION и перед необязательным элементом THEAD. Помимо общих атрибутов COLGROUP может иметь следующие необязательные атрибуты:

• Атрибут span задает количество столбцов в группе, по умолчанию он равен 1. Остальные атрибуты COLGROUP будут применяться ко всем столбцам группы. Если COLGROUP содержит элементы COL, то этот атрибут игнорируется, и атрибуты столбцов определяются атрибутами элементов COL.
• Атрибут width задает ширину каждого столбца в группе и имеет тип кратный размер с одним дополнением: он может иметь значение 0*, что означает минимально возможную ширину, необходимую для отображения столбца.
• Атрибут align задает горизонтальное выравнивание ячеек столбцов группы. Он может принимать следующие значения:

• Атрибут valign задает вертикальное выравнивание ячеек столбцов группы. Он может принимать следующие значения:

• Атрибуты char и charoff имеют смысл только в случае, когда align = "char". В этом случае атрибут char задает символ, по которому производится горизонтальное выравнивание ячеек. По умолчанию символом выравнивания является символ десятичной точки текущего языка, заданного атрибутом lang (например, "." для английского языка и "," для русского). Атрибут charoff задает расстояние до символа выравнивания в каждой ячейке; если ячейка не содержит символа выравнивания, то перед выравниванием он как бы добавляется к ее содержимому справа. Современные обозреватели игнорируют эти атрибуты.

Таблица в следующем примере состоит из 4 столбцов, причем первые 2 столбца имеют фиксированную ширину 50 пикселей и выровнены по центру ячейки, а вторые 2 столбца имеют минимально возможную для них ширину и выровнены влево:

<TABLE>
<COLGROUP span="2" width="50" align="center">
<COLGROUP span="2" width="*0" align="left">
  ...
</TABLE>

1.5.5.2. Столбцы: элемент COL

Синтаксис: <COL> (содержимого и конечного тега нет)
Атрибуты:  id, class, style, title, lang, dir, события
           span = число (количество столбцов)
           width = кратный размер (ширина каждого столбца)
           align = left | center | right | justify | char (горизонтальное выравнивание)
           valign = top | middle | bottom | baseline (вертикальное выравнивание)
           char = символ (символ выравнивания)
           charoff = размер (смещение до символа выравнивания)

Поддержка:  Атрибуты char и charoff не поддерживаются (5.0+)
            Не поддерживается

Элемент COL (column) позволяет группировать значения атрибутов для столбцов таблицы, не создавая их групп. Он должен располагаться после необязательного элемента CAPTION и перед необязательным элементом THEAD, при этом элементы COL могут употребляться как внутри элемента COLGROUP, так и самостоятельно. Элемент COL может иметь те же атрибуты, что и элемент COLGROUP. Пример из предыдущего параграфа может быть переписан с его использованием так:

<TABLE>
<COLGROUP>
  <COL span="2" width="50" align="center">
</COLGROUP>
<COLGROUP>
  <COL width="*0" align="left">
  <COL width="*0" align="left">
</COLGROUP>
  ...
</TABLE>

1.5.6. Содержимое таблиц

Как уже указывалось выше, содержимое таблицы состоит из строк (элементы TR), которые, в свою очередь, состоят из ячеек. Ячейки могут быть либо ячейками заголовков (элементы TH), либо ячейками данных (элементы TD). Атрибуты элементов TH и TD идентичны; разделение между ними в языке HTML проведено с тем, чтобы обозреватели могли отображать их по-разному. Обычно это различие состоит в том, что ячейки заголовков отображаются полужирным шрифтом. Многочисленные примеры использования этих элементов приведены выше.

1.5.6.1. Строки: элемент TR

Синтаксис: <TR>…</TR> (блочный элемент, конечный тег не обязателен)
Атрибуты:  id, class, style, title, lang, dir, события
           align = left | center | right | justify | char (горизонтальное выравнивание)
           valign = top | middle | bottom | baseline (вертикальное выравнивание)
           char = символ (символ выравнивания)
           charoff = размер (смещение до символа выравнивания)

Поддержка:  Атрибуты char и charoff не поддерживаются (5.0+)
            Атрибуты char и charoff не поддерживаются (4.0+)

Элемент TR (table row) определяет строку таблицы. Содержимым этого элемента являются один или несколько элементов TH и TD. Помимо общих атрибутов TR может иметь те же необязательные атрибуты, что и TBODY.

1.5.6.2. Ячейки заголовков: элемент TH

Синтаксис: <TH>…</TH> (блочный элемент, конечный тег не обязателен)
Атрибуты:  id, class, style, title, lang, dir, события
           rowspan = число (количество строк)
           colspan = число (количество столбцов)
           headers = IDREFS (список идентификаторов заголовков ячейки)
           abbr = текст (сокращенное название заголовка ячейки)
           scope = row | col | rowgroup | colgroup (область действия ячейки)
           axis = CDATA (категория ячейки)
           align = left | center | right | justify | char (горизонтальное выравнивание)
           valign = top | middle | bottom | baseline (вертикальное выравнивание)
           char = символ (символ выравнивания)
           charoff = размер (смещение до символа выравнивания)

Поддержка:  Атрибуты char, charoff, headers, scope, abbr, axis
              не поддерживаются (5.0+)
            Атрибуты char, charoff, headers, scope, abbr, axis
              не поддерживаются (4.0+)

Элемент TH (table header cell) определяет ячейку заголовка таблицы. Его содержимым могут быть как блочные, так и текстовые элементы. Элемент TH используется для задания заголовков строк и столбцов; он может иметь следующие необязательные атрибуты:

• Атрибуты rowspan и colspan задают соответственно количество строк и столбцов, занятых ячейкой. По умолчанию они равны 1. Специальное значение 0 указывает, что ячейка занимает все строки или столбцы до конца таблицы; однако, это значение часто игнорируется обозревателями, и им лучше не пользоваться.
• Атрибут headers задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Его значение — это список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id. Обычно атрибут headers используется в невизуальных обозревателях, но может использоваться и в сочетании с таблицами стилей. См. также атрибут scope.
• Атрибут abbr задает сокращенную название содержимого ячейки. Это позволяет визуальным обозревателям использовать краткую форму, если не хватает места для отображения формы, а невизуальным — сообщать краткую форму заголовка ячейки перед ее содержимым.
• Атрибут scope указывает, к каким ячейкам относится данный заголовок. Это простая альтернатива атрибуту headers. Он может принимать следующие значения:

• Атрибут axis обеспечивает категоризацию данных. Его значение — список названий категорий, к которым относится данная ячейка, разделенных пробелами. При введении этого атрибута в язык планировалось, что обозреватели будут поддерживать дополнительный анализ таблиц с точки зрения их содержания (например, при генерации оглавлений). Однако, обозреватели этого не делают, и данный атрибут пока не используется.
• Атрибут align задает горизонтальное выравнивание ячейки. Он может принимать следующие значения:

• Атрибут valign задает вертикальное выравнивание ячейки. Он может принимать следующие значения:

• Атрибуты char и charoff имеют смысл только в случае, когда align = "char". В этом случае атрибут char задает символ, по которому производится горизонтальное выравнивание ячеек. По умолчанию символом выравнивания является символ десятичной точки текущего языка, заданного атрибутом lang (например, "." для английского языка и "," для русского). Атрибут charoff задает расстояние до символа выравнивания в каждой ячейке; если ячейка не содержит символа выравнивания, то перед выравниванием он как бы добавляется к ее содержимому справа. Современные обозреватели игнорируют эти атрибуты.

1.5.6.3. Ячейки данных: элемент TD

Синтаксис: <TD>…</TD> (блочный элемент, конечный тег не обязателен)
Атрибуты:  id, class, style, title, lang, dir, события
           rowspan = число (количество строк)
           colspan = число (количество столбцов)
           headers = IDREFS (список идентификаторов заголовков ячейки)
           abbr = текст (сокращенное название заголовка ячейки)
           scope = row | col | rowgroup | colgroup (область действия ячейки)
           axis = CDATA (категория ячейки)
           align = left | center | right | justify | char (горизонтальное выравнивание)
           valign = top | middle | bottom | baseline (вертикальное выравнивание)
           char = символ (символ выравнивания)
           charoff = размер (смещение до символа выравнивания)

Поддержка:  Атрибуты char, charoff, headers, scope, abbr, axis
              не поддерживаются (5.0+)
            Атрибуты char, charoff, headers, scope, abbr, axis
              не поддерживаются (4.0+)

Элемент TD (table data cell) определяет ячейку данных таблицы. Его содержимым могут быть как блочные, так и текстовые элементы. Его атрибуты и правила отображения те же, что у элемента TH.