ProgrammerBook.ru: Обратите внимание, что

  1. данный документ является переводом документа «Tables»;
  2. данный документ может содержать неточности, опечатки и ошибки перевода;
  3. официальным документом по данной тематике является оригинальный документ на английском языке, расположенный на сайте W3C.

Таблицы

Допустимый Контекст: %body.content, %flow, %block
Модель Содержимого: Необязательный CAPTION, после которого следует одна или более строка таблицы (TR)

HTML модель таблиц была выбрана за свою простоту и гибкость. По умолчанию таблица автоматически изменяется в соответствии с содержимым ячейки и текущим размером окна. Атрибут COLSPEC может быть использован в случае, когда требуется контролировать ширину столбцов либо путём установления явной ширины, либо путём указания относительной ширины. Вы также можете указать ширину таблицы в явном виде или в виде доли от текущего поля (смотрим атрибут WIDTH).

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

Таблицы могут содержать широкий спектр содержимого, такого как заголовки, списки, абзацы, формы, рисунки, предотформатированный текст и даже вложенные таблицы. Когда таблица выровнена по левому или по правому краю, элементы следующие за таблицей будут обтекать вокруг неё, если имеется достаточно пространства. Такое поведение отключается, когда задан атрибут noflow или align атрибут таблицы имеет значение center (значение по умолчанию), или justify.

Пример

<TABLE BORDER>
  <CAPTION>Тестовая таблица с объединёнными ячейками</CAPTION>
  <TR><TH ROWSPAN=2><TH COLSPAN=2>В среднем
      <TH ROWSPAN=2>прочие<BR>категории<TH>Разное
  <TR><TH>высота<TH>ширина
  <TR><TH ALIGN=LEFT>мужчины<TD>1.9<TD>0.003
  <TR><TH ALIGN=LEFT ROWSPAN=2>женщины<TD>1.7<TD>0.002
</TABLE>

Это будет представлено как-то так:

         Тестовая таблица с объединёнными ячейками
    /--------------------------------------------------\
    |          |     В среднем     |прочие    | Разное |
    |          |-------------------|категории |--------|
    |          | высота  | ширина  |          |        |
    |-----------------------------------------|--------|
    | мужчины  |   1.9   |  0.003  |          |        |
    |-----------------------------------------|--------|
    | женщины  |   1.7   |  0.002  |          |        |
    \--------------------------------------------------/

Тут следует отметить несколько моментов:

Пример неправильной таблицы:

<table border>
<tr><td rowspan=2>1<td>2<td>3<td>4<td>5
<tr><td rowspan=2>6
<tr><td colspan=2>7<td>8
</table>

которая выглядит примерно так:

    /-------------------\
    | 1 | 2 | 3 | 4 | 5 |
    |   |---------------|
    |   | 6 |   |   |   |    Ячейки помеченные как 6 и 7 пересекаются!
    |---|...|-----------|
    | 7 :   | 8 |   |   |
    \-------------------/

Таблицы без границ полезно использовать в качестве макета, а также в качестве их традиционной роли для табличных данных, например, заполняемой формы:

                        имя: [John Smith        ]
                номер карты: [4619 693523 20851 ]
          срок действия, до: [03] / [97]
                    телефон: [212 873 2739      ]

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

<table>
  <tr valign=baseline>
  <td align=right>
    имя:<br>
    номер карты:<br>
    срок действия, до:<br>
    телефон:
  <td align=left>
    <input name="name" size=18><br>
    <input name="cardnum" size=18><br>
    <input name="expires-month" size=2> /
    <input name="expires-year" size=2><br>
    <input name="phone" size=18><br>
</table>

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

Подсказка: Вы можете добиться такого же эффекта, указанного выше, при использовании выравнивания по десятичной точке и атрибута DP для того, чтобы установить в качестве символа выравнивания необходимый символ, например:

<table>
  <tr align=decimal dp=":">
  <td>
    имя: <input name="name" size=18><br>
    номер карты: <input name="cardnum" size=18><br>
    срок действия, до: <input name="expires-month" size=2> /
    <input name="expires-year" size=2><br>
    телефон:<input name="phone" size=18><br>
</table>

После каждой строки в таблице устанавливается такой отступ, чтобы все столбцы были расположены друг под другом.

Алгоритм Определения Размеров Таблицы

Алгоритм определения размеров по умолчанию требует двух проходов по данным таблицы. В первом проходе отключён перенос слов, и агент пользователя отслеживает минимальную и максимальную ширину каждой ячейки. Максимальная ширина определяется самой широкой строкой. Так как перенос слов был отключён, абзацы рассматриваются как длинные строки, если они не нарушены элементами <BR>. Минимальная ширина определяется самым широким словом или изображением и так далее с учётом ведущих отступов, маркеров списков и т.д. Другими словами, если бы вы форматировали содержимое ячейки в собственном окне, необходимо было бы определить минимальную ширину, которую бы вы могли сделать, прежде чем начать обрезать содержимое.

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

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

  1. Минимальная ширина таблицы равна или шире, чем доступное пространство. В этом случае назначить минимальную ширину и позволить пользователю горизонтальное прокручивание. Для преобразования в шрифт Брайля, необходимо будет заменить ячейки ссылками на примечания, включающие их полное содержание. В соответствии с соглашением они появляются перед таблицей.
  2. Максимальная ширина таблицы помещается в пределах доступного пространства. В этом случае установить столбцам их значения максимальной ширины.
  3. Максимальная ширина таблицы превышает доступное пространство, но минимальная ширина таблицы меньше доступного пространства. В этом случае, найдём разницу между доступным пространством и минимальной шириной таблицы и назовём её W. Давайте также D обозначим как разницу между максимальной и минимальной шириной таблицы.

    Для каждого столбца, пусть d будет разницей между максимальной и минимальной шириной этого столбца. Теперь установим ширину столбца до минимальной ширины плюс d раз W свыше D. Это делает столбцы с большим количеством текста шире, чем столбцы с меньшим количеством.

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

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

Затем модифицируется алгоритм назначения ширины столбца:

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

Допустимые Атрибуты

ID
SGML-идентификатор используется в качестве цели для гипертекстовых ссылок или для именования отдельных элементов в присоединённых таблицах стилей. Идентификаторы NAME лексем должны быть уникальными в рамках текущего документа.
LANG
Это одна из кратких меток ISO стандарта языка, например «en.uk» для варианта английского языка используемого в Соединённом Королевстве. Он может быть использован обработчиками при выборе конкретного языкового варианта кавычек, лигатур, правил переноса и так далее. Атрибут языка состоит из двухбуквенного кода языка, соответствующего стандарту ISO 639, в случае необходимости, за которым следует точка и двухбуквенный код страны, соответствующий стандарту ISO 3166.
CLASS
Это разделённый пробелами список SGML NAME лексем, которые используются для именования подклассов тега. По соглашению, имена классов интерпретируются иерархически, с самого общего класса слева до наиболее специфичного справа, где классы разделены точкой. Атрибут CLASS чаще всего используется для прикрепления другого стиля к некоторому элементу, но это является рекомендацией, чтобы практические имена классов были выбраны на основе семантики элемента, так как это позволит использование для других целей, таких как ограничение поиска по документам путём сопоставления имён классов элемента. Соглашения по выбору имён классов выходят за рамки данной спецификации.
CLEAR
Когда уже есть рисунок или другая таблица возле поля, вы иногда хотите начать другую таблицу под рисунком, а не рядом с ним. Атрибут CLEAR позволяет перемещаться вниз без всяких условий:

clear=left
запрещает обтекание слева
clear=right
запрещает обтекание справа
clear=all
запрещает обтекание как слева, так и справа

В качестве альтернативы, вы можете решить разместить элемент рядом с рисунком при наличии достаточного места. Минимально-необходимая ширина определяется следующим образом:

clear="40 en"
запрещает обтекание до тех пор пока смежное горизонтальное пространство не станет более 40 en
clear="100 pixels"
запрещает обтекание до тех пор пока смежное горизонтальное пространство не станет более 100 пикселей

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

NOFLOW
Присутствие этого атрибута запрещает расположение потока текста вокруг таблицы. Данный атрибут избавляет от необходимости использования CLEAR или NEEDS атрибутов в следующем элементе.
ALIGN
Определяет горизонтальное выравнивание таблицы (а не её содержимого):

BLEEDLEFT
Выравнивание левого края по левой границе (окна).
LEFT
Выравнивание левого края по левому краю текстового поля.
CENTER
Таблица выравнивается по центру между текстовыми полями и при этом окружающий текст не обтекает таблицу. Это ALIGN значение по умолчанию.
RIGHT
Выравнивание правого края по правому краю текстового поля.
BLEEDRIGHT
Выравнивание правого края по правой границе (окна).
JUSTIFY
При применении данного значения пробелы следует изменять по величине для того, чтобы заполнить пространство между левым и правым полем текста. Для align=justify обтекание текста вокруг таблицы отключено.
UNITS
Определяет выбор единиц измерения для атрибута COLSPEC:

units=en
Определяет en единицу (типографическая единица равная половине размера точки). Это значение по умолчанию и оно позволяет агентам пользователей представлять табличную строку за один раз, не дожидаясь, получения всех данных таблицы.
units=relative
Используется для установки относительной ширины столбцов. Агент пользователя суммирует значения для того, чтобы определить пропорциональную ширину каждого столбца.
units=pixels
Наименее полезно!

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

COLSPEC
Атрибут colspec представляет собой список значений ширины столбцов и параметров выравнивания. Столбцы перечисляются слева направо, с заглавной буквой, за которой следует число, например, COLSPEC="L20 C8 L40". Буква L обозначает выравнивание содержимого ячеек по левому краю, C обозначает выравнивание содержимого ячеек по центру, а R обозначает выравнивание содержимого ячеек по правому краю. J для выравнивания по ширине, когда это возможно, в противном случае это значение рассматривается как значение L для выравнивания по левому краю. D обозначает выравнивание по десятичной точке; для получения более подробной информации смотрите атрибут DP.

Заглавные буквы необходимы, чтобы избежать особенно распространённых ошибок, когда L нижнего регистра путают с символом единицы. Записи столбцов разделяются одним или несколькими пробелами.

Число определяет ширину в en единицах, пикселях или дробное значение ширины таблицы в соответствии с тем, что указано в значении атрибута units. Такой подход является более компактным, чем большинство SGML моделей таблицы и выбраны для упрощения ручного ввода. Атрибут width позволяет указать ширину таблицы в пикселях, em единицах или в процентах от пространства между текущим левым и правым краем.

DP
Определяет символ, который будет использоваться как десятичная точка, действие которой активируется атрибутом COLSPEC, например dp="." (По умолчанию) или dp=",". Значение по умолчанию может быть изменено в соответствии с контекстом языка, который устанавливается с помощью атрибута LANG в родительских элементах.
WIDTH
Этот параметр определяет ширину таблицы рассчитываемую в соответствии с атрибутом UNITS. Если units=relative, то ширина берётся в процентах от ширины между текущим левым и правым полем. Агенту пользователя следует игнорировать этот атрибут, если его значение приведёт к столбцам, имеющим меньшие значения ширины, чем их минимальные значения ширины.
BORDER
Присутствие этого атрибута указывает агенту пользователя на необходимость представления границ вокруг таблицы. Например: <TABLE BORDER>. Точным внешним видом, а также размерами полей вокруг ячеек, можно управлять с помощью присоединяемых таблиц стилей, или с помощью информации в элементе STYLE, располагаемом в голове документа. В этом отношении особенно полезно создание подклассов таблицы, строки и ячейки.
NOWRAP
Атрибут NOWRAP используется, когда вы не хотите, чтобы браузер автоматически переносил строки. В этом случае вы можете явно определить разрывы строк в абзацах с помощью элемента BR.