Содержание
Модель таблиц HTML позволяет авторам упорядочивать данные - текст, форматированный текст, изображения, гиперссылки, формы, поля форм, другие таблицы и т.д. - в ряды и столбцы ячеек.
Каждая таблица может иметь ассоциированный заголовок (см. элемент CAPTION), представляющий краткое описание назначения таблицы. Полное описание также может быть представлено (атрибутом summary) для использования в ПА по системе Брайля.
Ряды таблицы могут быть сгруппированы в разделы head, foot и body (элементами THEAD, TFOOT и TBODY соответственно). Группы рядов дополнительно структурируют информацию и могут отображаться в ПА так, чтобы подчеркнуть эту структуризацию. ПА могут использовать разделение head/body/foot для поддержки прокрутки раздела body независимо от разделов head и foot. Если распечатываются большие таблицы, head и foot информация может повторяться на каждой странице с данными таблицы.
Авторы могут также группировать столбцы, чтобы предоставлять дополнительно структурированную информацию, которая может быть использована ПА. Кроме того, авторы могут объявлять свойства столбцов в начале определения таблицы (элементами COLGROUP и COL) таким образом, чтобы дать ПА возможность просматривать таблицу частями, а не заставлять пользователя ждать загрузки всех данных таблицы, прежде чем начать её отображение.
Ячейки таблицы могут содержать или "header" информацию (см. элемент TH), или "data" (см. элемент TD). Ячейки могут занимать несколько рядов или столбцов. Модель таблиц HTML 4 позволяет авторам помечать каждую ячейку так, что невизуальные ПА могут легче предавать заголовочную информацию о ячейке пользователю. Эти механизмы не только существенно помогают пользователям с дефектами зрения, они делают также возможным показ таблиц во многорежимных беспроводных браузерах с ограниченными возможностями отображения (например, пэйджеры и телефоны с возможностью отображения Web).
Таблицы не должны использоваться только с целью форматирования содержимого документа, так как это может создавать проблемы для невизуальных устройств. К тому же, при использовании с графикой, такие таблицы могут потребовать горизонтальной прокрутки для просмотра таблиц, созданных в системе с более широким дисплеем. Чтобы минимизировать эти проблемы, авторы должны использовать для управления выводом таблицы стиля, а не таблицы.
Примечание. Эта спецификация содержит более детальную информацию о таблицах в разделе рациональный дизайн таблиц и вопросы реализации.
Вот простая таблица, иллюстрирующая возможности табличной модели HTML.
Следующее определение таблицы:
<TABLE border="1" summary="This table gives some statistics about fruit flies: average height and weight, and percentage with red eyes (for both males and females)."> <CAPTION><EM>A test table with merged cells</EM></CAPTION> <TR><TH rowspan="2"><TH colspan="2">Average <TH rowspan="2">Red<BR>eyes <TR><TH>height<TH>weight <TR><TH>Males<TD>1.9<TD>0.003<TD>40% <TR><TH>Females<TD>1.7<TD>0.002<TD>43% </TABLE>
может отображаться на устройстве tty примерно так:
A test table with merged cells /-----------------------------------------\ | | Average | Red | | |-------------------| eyes | | | height | weight | | |-----------------------------------------| | Males | 1.9 | 0.003 | 40% | |-----------------------------------------| | Females | 1.7 | 0.002 | 43% | \-----------------------------------------/
или так в графическом ПА:
<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> <!ATTLIST TABLE -- элемент table -- %attrs; -- %coreattrs, %i18n, %events -- summary %Text; #ПРЕДПОЛАГАЕТСЯ -- назначение/структура для речевого вывода -- width %Length; #ПРЕДПОЛАГАЕТСЯ -- ширина таблицы -- border %Pixels; #ПРЕДПОЛАГАЕТСЯ -- толщина рамки вокруг таблицы -- frame %TFrame; #ПРЕДПОЛАГАЕТСЯ -- какие части фрэйма отображать -- rules %TRules; #ПРЕДПОЛАГАЕТСЯ -- линии между рядами и столбцами -- cellspacing %Length; #ПРЕДПОЛАГАЕТСЯ -- расстояние между ячейками -- cellpadding %Length; #ПРЕДПОЛАГАЕТСЯ -- расстояние между рамкой ячейки и её содержимым -- >
Начальный тег: необходим, Конечный тег: необходим
Определения атрибутов
Атрибуты, определённые в другом месте
Элемент TABLE содержит все другие элементы, определяющие заголовок таблицы, ряды, содержимое и форматирование.
Следующая информация описывает, какие операции ПА могут выполнять при отображении таблиц:
Модель таблиц HTML была разработана таким образом, что, с помощью авторов, ПА могут отображать таблицы частями (т.е. по мере получения рядов таблицы), вместо того, чтобы ожидать получения всех данных таблицы перед началом отображения.
Для того, чтобы ПА форматировали таблицы в один этап, авторы должны сообщить ПА:
Более точно ПА может отображать таблицу в один этап, если ширина столбцов определена комбинацией элементов COLGROUP и COL. Если какие-либо столбцы определены в относительных единицах или процентах (см. раздел подсчёт ширины столбцов), авторы должны также определить ширину всей таблицы.
Направление в таблице или наследуется прямо (по умолчанию слева-направо), или определяется атрибутом dir элемента TABLE.
Для таблиц с направлением слева-направо нулевой столбец - самый левый, а нулевой ряд - самый верхний. Для таблиц с направлением справа-налево нулевой столбец - самый правый, а нулевой ряд - самый верхний.
Когда ПА добавляет дополнительные ячейки в ряд (см. раздел подсчёт количества столбцов таблицы), новые ячейки в ряду добавляются справа для таблиц с направлением слева-направо и слева - для таблиц с направлением справа-налево.
Обратите внимание, что TABLE это единственный элемент, в котором dir резервирует визуальный порядок столбцов; отдельный ряд (TR)ил группа столбцов (COLGROUP) не могут быть независимо зарезервированы.
При установке для элемента TABLE, атрибут dir также влияет на направление текста внутри ячеек таблицы (поскольку атрибут dir наследуется элементами уровня блока).
Для определения таблицы с направлением справа-налево, установите атрибут dir так:
<TABLE dir="RTL"> ...таблица... </TABLE>
Направление текста в конкретной ячейке может быть изменено установкой атрибута dir в том элементе, который определяет ячейку. См. раздел двунаправленный текст.
<!ELEMENT CAPTION - - (%inline;)* -- заголовок таблицы --> <!ATTLIST CAPTION %attrs; -- %coreattrs, %i18n, %events -- >
Начальный тег: необходим, Конечный тег: необходим
Определение атрибута
Атрибуты, определённые в другом месте
Если элемент CAPTION присутствует, текст должен описывать сущность таблицы. Элемент CAPTION допускается только непосредственно после начального тега TABLE. Элемент TABLE может содержать только один элемент CAPTION.
Визуальные ПА позволяют зрячим людям разом охватить структуру таблицы, начиная с "шапки". Следствием этого может быть то, что заголовок часто не отражает общее назначение и структуру таблицы для тех, кто просматривает её в невизуальных ПА.
По этой причине авторы должны позаботиться о предоставлении дополнительной информации, суммирующей назначение и структуру таблицы, используя атрибут summary элемента TABLE. Это особенно важно для таблиц без заголовка. Данные ниже примеры иллюстрируют использование атрибута summary.
Визуальные ПА должны исключить усечение любой части таблицы, в том числе и заголовка, если только нет цели обеспечить доступ ко всей таблице целиком, например, с помощью горизонтальной или вертикальной прокрутки. Мы рекомендуем, чтобы текст заголовка был расположен на ту же ширину, что и таблица (см. также раздел рекомендуемый алгоритм вывода).
Начальный тег: необходим, Конечный тег: не обязателен
<!ELEMENT TBODY O O (TR)+ -- тело таблицы -->
Начальный тег: не обязателен, Конечный тег: не обязателен
<!ATTLIST (THEAD|TBODY|TFOOT) -- раздел таблицы -- %attrs; -- %coreattrs, %i18n, %events -- %cellhalign; -- горизонтальное выравнивание в ячейках -- %cellvalign; -- вертикальное выравнивание в ячейках -- >
Атрибуты, определённые в другом месте
Ряды таблицы могут быть сгруппированы в "шапку", футер и один или более разделов тела документа с помощью элементов THEAD, TFOOT и TBODY соответственно. Это разделение делает возможным для ПА поддерживать прокрутку тела таблицы независимо от "шапки" и футера. Если распечатываются большие таблицы, информация "шапки" и футера может повторяться на каждой странице, содержащей данные таблицы.
"Шапка" и футер таблицы должны содержать информацию о столбцах таблицы. Тело таблицы должно содержать ряды данных таблицы.
Если элементы THEAD, TFOOT и TBODY установлены, каждый из них содержит группу рядов.
Каждая
группа рядов должна содержать минимум один ряд, определённый элементом TR.
Этот пример иллюстрирует порядок и структуру "шапки", футера и тела таблицы.
<TABLE> <THEAD> <TR> ...информация "шапки"... </THEAD> <TFOOT> <TR> ...информация футера... </TFOOT> <TBODY> <TR> ...первый ряд данных блока 1... <TR> ...второй ряд данных блока 1... </TBODY> <TBODY> <TR> ...первый ряд данных блока 2... <TR> ...второй ряд данных блока 2... <TR> ...третий ряд данных блока 2... </TBODY> </TABLE>
TFOOT должен появляться перед TBODY внутри определения TABLE так, чтобы ПА могли отобразить футер до получения (возможно, многочисленных) рядов данных. Вот краткое резюме того, какие теги необходимы и какие могут быть опущены:
Соответствующие требованиям разборщики пользовательских агентов должны всегда следовать этим правилам для обеспечения обратной совместимости.
Таблица предыдущего примера может быть укорочена за счёт удаления некоторых конечных тегов:
<TABLE> <THEAD> <TR> ...информация "шапки"... <TFOOT> <TR> ...информация футера... <TBODY> <TR> ...первый ряд данных блока 1... <TR> ...второй ряд данных блока 1... <TBODY> <TR> ...первый ряд данных блока 2... <TR> ...второй ряд данных блока 2... <TR> ...третий ряд данных блока 2... </TABLE>
Разделы THEAD, TFOOT и TBODY должны содержать одинаковое количество столбцов.
Группы столбцов позволяют авторам создавать структурированные подразделения внутри таблицы. Авторы могут сделать эту структуру более ясной с помощью таблиц стилей или атрибутов HTML (напр., атрибут rules элемента TABLE). См. пример визуального представления группы столбцов в образце таблицы.
Таблица может содержать единую подразумеваемую группу столбцов (нет элементов COLGROUP, разграничивающих столбцы) или любое количество явно определённых групп столбцов (каждая ограничена вхождением элемента COLGROUP).
Элемент COL позволяет авторам разделять использование атрибутов среди нескольких столбцов без применения какого-либо структурного группирования. Атрибут "span" элемента COL это количество столбцов, которые будут использовать атрибуты элемента.
<!ELEMENT COLGROUP - O (COL)* -- группа столбцов таблицы --> <!ATTLIST COLGROUP %attrs; -- %coreattrs, %i18n, %events -- span NUMBER 1 -- количество по умолчанию столбцов в группе -- width %MultiLength; #ПРЕДПОЛАГАЕТСЯ -- ширина по умолчанию для COL, входящих в группу -- %cellhalign; -- горизонтальное выравнивание в ячейках -- %cellvalign; -- вертикальное выравнивание в ячейках -- >
Начальный тег: необходим, Конечный тег: не обязателен
Определения атрибутов
ПА должны игнорировать этот атрибут, если элемент COLGROUP содержит один или более элементов COL.
Этот атрибут определяет ширину по умолчанию для каждого столбца текущей группы столбцов. В дополнение к стандартным значениям в пикселах, процентах, относительных единицах, этот атрибут допускает специальную форму "0*" (нулевая звёздочка), которая означает, что ширина каждого столбца в группе должна быть наименьшей возможной для вмещения содержимого ячейки. Это предполагает, что всё содержимое столбца должно быть известно до того, как его ширина может быть корректно просчитана. Авторы должны помнить, что определение "0*" будет предупреждать визуальные ПА, что таблица не должна отображаться частями.
Этот атрибут переопределяется для любого столбца в группе, чей атрибут width определён в элементе COL.
Атрибуты, определённые в другом месте
Элемент COLGROUP явно определяет группу столбцов. Количество столбцов в группе может быть определено двумя взаимоисключающими путями:
Преимуществом использования атрибута span является то, что авторы могут группировать информацию о ширине столбцов. Так, если таблица содержит 40 столбцов, каждый из которых имеет ширину 20 пикселов, можно просто записать:
<COLGROUP span="40" width="20"> </COLGROUP>
вместо:
<COLGROUP> <COL width="20"> <COL width="20"> ...и так все 40 элементов COL... </COLGROUP>
Если необходимо выделить столбец (напр., для информации о стиле, для определения ширины и т.п.) внутри группы, авторы должны идентифицировать этот столбец элементом COL. Так, чтобы применить специальную информацию стиля к последнему столбцу в предыдущей таблице, мы выделим его:
<COLGROUP width="20"> <COL span="39"> <COL id="format-me-specially"> </COLGROUP>
Атрибут width элемента COLGROUP наследуется всеми 40 столбцами. Первый элемент COL ссылается на первые 39 столбцов (ничего специально не делая), а второй устанавливает значение id сороковому столбцу, и таблица стилей может обращаться к нему.
Таблица в следующем примере содержит две группы столбцов. Первая группа состоит из 10 столбцов, а вторая - из 5. Ширина по умолчанию для каждого из столбцов первой группы - 50 пикселов. Ширина каждого столбца второй группы составляет минимум, необходимый для данного столбца.
<TABLE> <COLGROUP span="10" width="50"> <COLGROUP span="5" width="0*"> <THEAD> <TR><TD> ... </TABLE>
<!ELEMENT COL - O EMPTY -- столбец таблицы --> <!ATTLIST COL -- группы и свойства столбца -- %attrs; -- %coreattrs, %i18n, %events -- span NUMBER 1 -- атрибуты COL действуют на N столбцов -- width %MultiLength; #ПРЕДПОЛАГАЕТСЯ -- ширина столбца -- %cellhalign; -- горизонтальное выравнивание в ячейках -- %cellvalign; -- вертикальное выравнивание в ячейках -- >
Начальный тег: необходим, Конечный тег: запрещён
Определения атрибутов
Атрибуты, определённые в другом месте
Элемент COL позволяет авторам группировать спецификации столбцов таблицы. COL не группирует столбцы структурно - это делает элемент COLGROUP. Элементы COL - пустые и служат только для поддержки атрибутов. Они могут появляться внутри или вне конкретной группы столбцов (т.е. элемента COLGROUP).
Атрибут width элемента COL ссылается на ширину каждого столбца, охваченного элементом.
Есть два способа определить количество столбцов в таблице (приоритет по убыванию):
Считается ошибкой, если таблица содержит элементы COLGROUP или COL, и два подсчёта не дают одинакового количества столбцов.
После того, как ПА подсчитал количество столбцов в таблице, он может сгруппировать их в группы столбцов.
Например, для каждой из следующих таблиц два метода подсчёта столбцов должны дать в результате по три столбца каждый. Первые три таблицы могут отображаться частями.
<TABLE> <COLGROUP span="3"></COLGROUP> <TR><TD> ... ...ряды... </TABLE> <TABLE> <COLGROUP> <COL> <COL span="2"> </COLGROUP> <TR><TD> ... ...ряды... </TABLE> <TABLE> <COLGROUP> <COL> </COLGROUP> <COLGROUP span="2"> <TR><TD> ... ...ряды... </TABLE> <TABLE> <TR> <TD><TD><TD> </TR> </TABLE>
Авторы могут установить ширину столбцов тремя методами:
Однако, если таблица не имеет фиксированной ширины, ПА должен получить все данные таблицы, прежде чем он сможет определить горизонтальное пространство, необходимое для таблицы. Только после этого это пространство может быть распределено пропорционально между столбцами.
Если автор не даёт информации о ширине столбца, ПА может не суметь сформатировать таблицу частями, поскольку он должен будет дожидаться получения всего столбца данных для того, чтобы распределить ширину пропорционально.
Если окажется, что ширина столбцов окажется слишком маленькой для отображения содержимого некоторых ячеек, ПА может избрать перерисовку таблицы.
Следующая таблица содержит 6 столбцов. Первый не входит в какую-либо группу. Следующие три принадлежат к первой определённой группе, а два последних - ко второй группе столбцов. Эта таблица не может быть сформатирована для вывода частями, поскольку она содержит спецификации пропорциональной ширины столбцов и не имеет значений атрибута width элемента TABLE.
Как только (визуальный) ПА получит данные таблицы: всё доступное горизонтальное пространство будет распределено так:
Сначала ПА выделит по 30 пикселов столбцам один и два.
Затем резервируется минимальное пространство, необходимое для столбца три.
Оставшееся горизонтальное пространство
делится на шесть равных частей (поскольку 2* + 1* + 3* = 6).
Столбец четыре получит две (2*) из этих частей, столбец пять - одну (1*), а столбец шесть - 3 части (3*).
<TABLE> <COLGROUP> <COL width="30"> <COLGROUP> <COL width="30"> <COL width="0*"> <COL width="2*"> <COLGROUP align="center"> <COL width="1*"> <COL width="3*" align="char" char=":"> <THEAD> <TR><TD> ... ...ряды... </TABLE>
Мы установили значение атрибута align в третьей группе столбцов в "center". Все ячейки каждого столбца этой группы наследуют это значение, но могут переопределить его. Фактически, последний COL делает именно это, определяя, что каждая ячейка в столбце, которым он владеет, будет выровнена по символу ":".
В следующей таблице спецификация ширины столбцов позволяет ПА форматировать таблицу для вывода частями:
<TABLE width="200"> <COLGROUP span="10" width="15"> <COLGROUP width="*"> <COL id="penultimate-column"> <COL id="last-column"> <THEAD> <TR><TD> ... ...ряды... </TABLE>
Первые 10 столбцов будут шириной по 15 пикселов каждый. Каждый из двух последних столбцов получит половину из оставшихся 50 пикселов. Обратите внимание, что элементы COL появляются именно так, поскольку значение id может быть определено для двух последних столбцов.
Примечание. Хотя атрибут width элемента TABLE и не "не рекомендуется", авторам следует использовать таблицы стиля для спецификации ширины таблицы.
<!ELEMENT TR - O (TH|TD)+ -- ряд таблицы --> <!ATTLIST TR -- ряд таблицы -- %attrs; -- %coreattrs, %i18n, %events -- %cellhalign; -- горизонтальное выравнивание в ячейках -- %cellvalign; -- вертикальное выравнивание в ячейках -- >
Начальный тег: необходим, Конечный тег: не обязателен
Атрибуты, определённые в другом месте
Элемент TR действует как контейнер для ряда ячеек таблицы. Конечный тег может быть опущен.
Образец таблицы содержит три ряда, каждый из которых начинается элементом TR:
<TABLE summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR> ...заголовочный ряд... <TR> ...1 ряд данных... <TR> ...2 ряд данных... ...остальная часть таблицы... </TABLE>
<!ELEMENT (TH|TD) - O (%flow;)* -- ячейка заголовочная|данных --> <!-- Область видимости проще, чем атрибуты заголовков обычных таблиц --> <!ENTITY % Scope "(row|col|rowgroup|colgroup)"> <!-- TH - для заголовков, TD - для данных, но для ячеек, работающих и так, и так, используйте TD --> <!ATTLIST (TH|TD) -- ячейка заголовочная|данных -- %attrs; -- %coreattrs, %i18n, %events -- abbr %Text; #ПРЕДПОЛАГАЕТСЯ -- аббревиатура для заголовочной ячейки -- axis CDATA #ПРЕДПОЛАГАЕТСЯ -- список разделённых запятыми относительных заголовков-- headers IDREFS #ПРЕДПОЛАГАЕТСЯ -- список id заголовочных ячеек -- scope %Scope; #ПРЕДПОЛАГАЕТСЯ -- область видимости заголовочных ячеек -- rowspan NUMBER 1 -- количество рядов, охваченных ячейкой -- colspan NUMBER 1 -- количество столбцов, охваченных ячейкой -- %cellhalign; -- горизонтальное выравнивание в ячейках -- %cellvalign; -- вертикальное выравнивание в ячейках -- >
Начальный тег: необходим, Конечный тег: не обязателен
Определения атрибутов
Атрибуты, определённые в другом месте
Ячейки таблицы могут содержать информацию двух типов: заголовочную информацию и данные. Такое разделение даёт ПА возможность по разному выводить ячейки заголовков и данных даже при отсутствии таблиц стилей. Например, визуальные ПА могут представлять текст заголовочной ячейки полужирным шрифтом. Голосовые синтезаторы могут представлять информацию заголовка другой интонацией.
Элемент TH определяет ячейку, содержащую заголовочную информацию. Для ПА доступно две части заголовочной информации: содержимое элемента TH и значение атрибута abbr.
ПА должны выводить или содержимое ячейки, или значение атрибута abbr.
Для визуальных носителей последнее более предпочтительно, когда не хватает пространства для вывода полного содержимого ячейки.
В невизуальных носителях abbr может
использоваться как сокращённая форма заголовков таблицы, когда они выводятся параллельно с содержимым ячеек, к которым относятся.
Атрибуты headers и scope также позволяют авторам облегчать невизуальным ПА обработку заголовочной информации. См. дополнительную информацию и примеры: пометка ячеек для невизуальных ПА.
Элемент TD определяет ячейку данных.
Ячейки могут быть пустыми (т.е. не содержать данных).
Например, следующая таблица содержит 4 столбца данных, каждый с заголовком, содержащим описание столбца.
<TABLE summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR> <TH>Name</TH> <TH>Cups</TH> <TH>Type of Coffee</TH> <TH>Sugar?</TH> <TR> <TD>T. Sexton</TD> <TD>10</TD> <TD>Espresso</TD> <TD>No</TD> <TR> <TD>J. Dinnen</TD> <TD>5</TD> <TD>Decaf</TD> <TD>Yes</TD> </TABLE>
Вывод ПА для устройства tty может выглядеть так:
Name Cups Type of Coffee Sugar? T. Sexton 10 Espresso No J. Dinnen 5 Decaf Yes
Ячейки могут занимать несколько рядов или столбцов. Количество рядов или столбцов, занимаемых ячейкой, устанавливается атрибутами rowspan и colspan в элементах TH и TD.
В этом определении таблицы мы определяем, что ячейка в четвёртом ряду во втором столбце должна занимать три столбца, включая текущий.
<TABLE border="1"> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR><TH>Name<TH>Cups<TH>Type of Coffee<TH>Sugar? <TR><TD>T. Sexton<TD>10<TD>Espresso<TD>No <TR><TD>J. Dinnen<TD>5<TD>Decaf<TD>Yes <TR><TD>A. Soria<TD colspan="3"><em>Not available</em> </TABLE>
Вывод ПА этой таблицы для устройства tty может выглядеть так:
Cups of coffee consumed by each senator -------------------------------------- | Name |Cups|Type of Coffee|Sugar?| -------------------------------------- |T. Sexton|10 |Espresso |No | -------------------------------------- |J. Dinnen|5 |Decaf |Yes | -------------------------------------- |A. Soria |Not available | --------------------------------------
Следующий пример иллюстрирует (с помощью обрамления таблицы), как определение ячейки, занимающей более одного ряда или столбца, влияет на определения последующих ячеек. Рассмотрим следующее определение таблицы:
<TABLE border="1"> <TR><TD>1 <TD rowspan="2">2 <TD>3 <TR><TD>4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE>
Ячейка "2" занимает первый и второй ряды, определение второго ряда учитывается в ней. Таким образом, второй TD во втором ряду в действительности определяет ячейку третьего ряда. Внешне таблица может выглядеть на устройстве tty так:
------------- | 1 | 2 | 3 | ----| |---- | 4 | | 6 | ----|---|---- | 7 | 8 | 9 | -------------
а в графическом ПА - так:
Обратите внимание, что если TD, определяющий ячейку "6", опущен, дополнительная пустая ячейка будет добавлена ПА для заполнения ряда.
Так же и в следующем определении таблицы:
<TABLE border="1"> <TR><TD>1 <TD>2 <TD>3 <TR><TD colspan="2">4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE>
ячейка "4" занимает два столбца, и второй TD в ряду в действительности определяет третью ячейку ("6"):
------------- | 1 | 2 | 3 | --------|---- | 4 | 6 | --------|---- | 7 | 8 | 9 | -------------
Графический ПА может вывести это так:
Определение перекрывающихся ячеек является ошибкой. ПА могут по разному обрабатывать такие ошибки (напр., вывод может различаться).
Следующий пример НЕВЕРНОГО ИСПОЛЬЗОВАНИЯ показывает, как могут создаваться перекрывающиеся ячейки. В это таблице ячейка "5" занимает два ряда, а ячейка "7" занимает два столбца, ячейки перекрываются в между ячейками "7" и "9":
<TABLE border="1"> <TR><TD>1 <TD>2 <TD>3 <TR><TD>4 <TD rowspan="2">5 <TD>6 <TR><TD colspan="2">7 <TD>9 </TABLE>
Примечание. В данном разделе рассматриваются атрибуты таблиц HTML, относящиеся к визуальному форматированию. Когда эта спецификация была впервые опубликована в 1997 году, [CSS1] не предоставлял механизмы управления всеми аспектами визуального форматирования таблиц. Затем [CSS2] добавил свойства, позволяющие проводить визуальное форматирование таблиц.
HTML 4 содержит механизмы управления:
Следующие атрибуты влияют на отображение рамки таблицы и внутренней сетки.
Определения атрибутов
Чтобы выделить ячейки таблицы, мы можем использовать атрибут border элемента TABLE. Рассмотрим предыдущий пример:
<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR> <TH>Name</TH> <TH>Cups</TH> <TH>Type of Coffee</TH> <TH>Sugar?</TH> <TR> <TD>T. Sexton</TD> <TD>10</TD> <TD>Espresso</TD> <TD>No</TD> <TR> <TD>J. Dinnen</TD> <TD>5</TD> <TD>Decaf</TD> <TD>Yes</TD> </TABLE>
В следующем примере ПА должен вывести линии толщиной 5 пикселов слева и справа от таблицы и линии между столбцами.
<TABLE border="5" frame="vsides" rules="cols"> <TR> <TD>1 <TD>2 <TD>3 <TR> <TD>4 <TD>5 <TD>6 <TR> <TD>7 <TD>8 <TD>9 </TABLE>
Следующие установки должны учитываться ПА для обеспечения обратной совместимости:
Например, следующие определения эквивалентны:
<TABLE border="2"> <TABLE border="2" frame="border" rules="all">
как и следующие:
<TABLE border> <TABLE frame="border" rules="all">
Примечание. Атрибут border определяет поведение обрамления для элементов OBJECT и IMG, но принимает для этих элементов разные значения.
Следующие атрибуты могут быть установлены для различных элементов таблицы (см. соответствующие определения).
<!-- атрибуты горизонтального выравнивания содержимого ячейки --> <!ENTITY % cellhalign "align (left|center|right|justify|char) #IMPLIED char %Character; #ПРЕДПОЛАГАЕТСЯ -- символ выравнивания, например, char=':' -- charoff %Length; #ПРЕДПОЛАГАЕТСЯ -- offset символа выравнивания --" > <!-- атрибуты вертикального выравнивания содержимого ячейки --> <!ENTITY % cellvalign "valign (top|middle|bottom|baseline) #IMPLIED" >
Определения атрибутов
Если charoff используется для установки офсета символа выравнивания, направление офсета определяется текущим направлением текста (установленным атрибутом dir). В текстах слева-направо (по умолчанию) офсет слева. В текстах справа налево офсет справа. От ПА не требуется поддерживать данный атрибут.
В этой таблице ряд цен выровнен вокруг десятичной точки. Мы явно устанавливаем символ выравнивания ".".
<TABLE border="1"> <COLGROUP> <COL><COL align="char" char="."> <THEAD> <TR><TH>Vegetable <TH>Cost per kilo <TBODY> <TR><TD>Lettuce <TD>$1 <TR><TD>Silver carrots <TD>$10.50 <TR><TD>Golden turnips <TD>$100.30 </TABLE>
Форматирование может выглядеть примерно так:
------------------------------ | Vegetable |Cost per kilo| |--------------|-------------| |Lettuce | $1 | |--------------|-------------| |Silver carrots| $10.50| |--------------|-------------| |Golden turnips| $100.30| ------------------------------
Если в содержимом ячейки есть более одного символа выравнивания, установленного атрибутом char, и строки содержимого переносятся, поведение ПА не определено. Поэтому авторы должны быть внимательны при использовании char.
Примечание. Визуальные ПА обычно отображают элементы TH сцентрированными в ячейке вертикально и горизонтально и полужирным шрифтом.
Выравнивание содержимого ячеек может быть определено на базе ячейка-за-ячейкой или наследоваться от включённых элементов, таких как ряд, столбец или сама таблица.
Приоритет (от высшего к низшему) атрибутов align, char и charoff:
Приоритет (от высшего к низшему) для атрибута valign (как и для других наследуемых атрибутов lang, dir, и style):
Таким образом, при выводе ячеек горизонтальное выравнивание определяется столбцами (имеющими преимущество перед рядами), а при вертикальном выравнивании - ряды имеют преимущество перед столбцами.
Значение выравнивания по умолчанию в ячейках зависит от ПА. Однако ПА должны замещать атрибуты по умолчанию для текущего направления (т.е. не просто "left" во всех случаях).
ПА, не поддерживающие значение "justify" атрибута align, должны вместо этого использовать наследуемое направление.
Определения атрибутов
Эти два атрибута управляют полями между ячеек и внутри них. Следующий рисунок поясняет эти соотношения:
В следующем примере атрибут cellspacing определяет, что ячейки должны отделяться друг от друга и от рамки таблицы полями размером 20 пикселов. Атрибут cellpadding определяет, что верхняя и нижняя границы ячейки отделяются от содержимого полями размером 10% доступного вертикального пространства (всего составляющего 20%). Таким же образом левая и правая границы ячейки отделяются от содержимого полями размером 10% доступного горизонтального пространства (всего составляющего 20%).
<TABLE cellspacing="20" cellpadding="20%"> <TR> <TD>Data1 <TD>Data2 <TD>Data3 </TABLE>
Если таблица или столбец имеют фиксированную ширину, cellspacing и cellpadding могут потребовать больше пространства, чем назначено. ПА могут дать этим атрибутам преимущество перед атрибутом width, если возникнет конфликт.
Невизуальные ПА, такие как голосовые синтезаторы и Брайль-устройства, могут использовать следующие атрибуты элементов TD и TH, чтобы выводить таблицу более интуитивно:
В следующем примере мы назначаем заголовочную информацию ячейке установкой атрибута headers. Каждая ячейка в том же столбце ссылается на одну и ту же заголовочную ячейку (с помощью атрибута id).
<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR> <TH id="t1">Name</TH> <TH id="t2">Cups</TH> <TH id="t3" abbr="Type">Type of Coffee</TH> <TH id="t4">Sugar?</TH> <TR> <TD headers="t1">T. Sexton</TD> <TD headers="t2">10</TD> <TD headers="t3">Espresso</TD> <TD headers="t4">No</TD> <TR> <TD headers="t1">J. Dinnen</TD> <TD headers="t2">5</TD> <TD headers="t3">Decaf</TD> <TD headers="t4">Yes</TD> </TABLE>
Голосовой синтезатор может выводить эту таблицу так:
Caption: Cups of coffee consumed by each senator Summary: This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar. Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
Обратите внимание, как заголовок "Type of Coffee" сокращён до "Type" с использованием атрибута abbr.
Это тот же самый пример, в котором атрибут scope заменил атрибут headers. Заметьте, что значение "col" атрибута scope означает "все ячейки текущего столбца":
<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR> <TH scope="col">Name</TH> <TH scope="col">Cups</TH> <TH scope="col" abbr="Type">Type of Coffee</TH> <TH scope="col">Sugar?</TH> <TR> <TD>T. Sexton</TD> <TD>10</TD> <TD>Espresso</TD> <TD>No</TD> <TR> <TD>J. Dinnen</TD> <TD>5</TD> <TD>Decaf</TD> <TD>Yes</TD> </TABLE>
Вот несколько более сложный пример, иллюстрирующий другие значения атрибута scope:
<TABLE border="1" cellpadding="5" cellspacing="2" summary="History courses offered in the community of Bath arranged by course name, tutor, summary, code, and fee"> <TR> <TH colspan="5" scope="colgroup">Community Courses -- Bath Autumn 1997</TH> </TR> <TR> <TH scope="col" abbr="Name">Course Name</TH> <TH scope="col" abbr="Tutor">Course Tutor</TH> <TH scope="col">Summary</TH> <TH scope="col">Code</TH> <TH scope="col">Fee</TH> </TR> <TR> <TD scope="row">After the Civil War</TD> <TD>Dr. John Wroughton</TD> <TD> The course will examine the turbulent years in England after 1646. <EM>6 weekly meetings starting Monday 13th October.</EM> </TD> <TD>H27</TD> <TD>£32</TD> </TR> <TR> <TD scope="row">An Introduction to Anglo-Saxon England</TD> <TD>Mark Cottle</TD> <TD> One day course introducing the early medieval period reconstruction the Anglo-Saxons and their society. <EM>Saturday 18th October.</EM> </TD> <TD>H28</TD> <TD>£18</TD> </TR> <TR> <TD scope="row">The Glory that was Greece</TD> <TD>Valerie Lorenz</TD> <TD> Birthplace of democracy, philosophy, heartland of theater, home of argument. The Romans may have done it but the Greeks did it first. <EM>Saturday day school 25th October 1997</EM> </TD> <TD>H30</TD> <TD>£18</TD> </TR> </TABLE>
Графический ПА может вывести это так:
Обратите внимание на использование атрибута scope со значением "row". Хотя первая ячейка каждого ряда содержит данные, а не заголовочную информацию, атрибут scope определяет такое же поведение ячеек данных, как для заголовочных ячеек ряда. Это позволяет речевым синтезаторам представлять соответствующее course name по запросу или выставлять его непосредственно перед содержимым каждой ячейки.
Пользователи, просматривающие таблицы с помощью речевого ПА, могут дополнительно пожелать услышать разъяснение о содержимом ячейки. Один из методов получить разъяснение состоит в прослушивании ассоциированной заголовочной информации перед прослушиванием содержимого ячеек данных (см. раздел ассоциирование заголовочной информации с ячейками данных).
Пользователей может также заинтересовать информация о более чем одной ячейке. В этом случае заголовочная информация, даваемая на уровне ячейки (атрибутами headers, scope и abbr), не может предоставить адекватный контекст. Рассмотрим таблицу, классифицирующую цены на еду, отели и транспорт в двух городах (Сан-Хосе и Сиэтл) за несколько дней:
Пользователю может понадобиться извлечь информацию из таблицы в форме запроса:
Каждый запрос вызывает вычисления ПА, в которых могут быть задействованы ноль или более ячеек. Чтобы определить, например, стоимость питания 25 августа, ПА должен знать, какая ячейка ссылается на "Meals" (все) и какая ссылается на "Dates" (конкретно, на 25 августа), и найти пересечение двух наборов (данных).
Чтобы приспособить этот тип запроса, табличная модель HTML 4 позволяет авторам разместить заголовки ячеек и данные по категориям. Например, по таблице цен на проезд автор мог бы сгруппировать заголовочные ячейки "San Jose" и "Seattle" в категорию "Location", заголовки "Meals", "Hotels" и "Transport" - в категорию "Expenses", а 4 дня в категорию "Date". Предыдущие три вопроса получат тогда следующие значения:
Авторы категоризируют ячейки заголовков или данных установкой атрибута axis для ячейки. К примеру, в таблице затрат на проезд, ячейка, содержащая информацию "San Jose" может быть помещена в категорию "Location" так:
<TH id="a6" axis="location">San Jose</TH>
любая ячейка, содержащая информацию со ссылкой на "San Jose", должна ссылаться на эту заголовочную ячейку через атрибуты headers или scope.
Таким
образом, затраты на питание 25 августа должны быть помечены так, чтобы ссылаться на атрибут id (значение которого - "a6") заголовочной ячейки "San Jose":
<TD headers="a6">37.74</TD>
Каждый атрибут headers предоставляет список ссылок на id. Авторы могут таким образом категоризировать данные ячейки любыми способами.
Ниже мы разметим таблицу затрат на путешествие с распределением информации по категориям:
<TABLE border="1" summary="This table summarizes travel expenses incurred during August trips to San Jose and Seattle"> <CAPTION> Travel Expense Report </CAPTION> <TR> <TH></TH> <TH id="a2" axis="expenses">Meals</TH> <TH id="a3" axis="expenses">Hotels</TH> <TH id="a4" axis="expenses">Transport</TH> <TD>subtotals</TD> </TR> <TR> <TH id="a6" axis="location">San Jose</TH> <TH></TH> <TH></TH> <TH></TH> <TD></TD> </TR> <TR> <TD id="a7" axis="date">25-Aug-97</TD> <TD headers="a6 a7 a2">37.74</TD> <TD headers="a6 a7 a3">112.00</TD> <TD headers="a6 a7 a4">45.00</TD> <TD></TD> </TR> <TR> <TD id="a8" axis="date">26-Aug-97</TD> <TD headers="a6 a8 a2">27.28</TD> <TD headers="a6 a8 a3">112.00</TD> <TD headers="a6 a8 a4">45.00</TD> <TD></TD> </TR> <TR> <TD>subtotals</TD> <TD>65.02</TD> <TD>224.00</TD> <TD>90.00</TD> <TD>379.02</TD> </TR> <TR> <TH id="a10" axis="location">Seattle</TH> <TH></TH> <TH></TH> <TH></TH> <TD></TD> </TR> <TR> <TD id="a11" axis="date">27-Aug-97</TD> <TD headers="a10 a11 a2">96.25</TD> <TD headers="a10 a11 a3">109.00</TD> <TD headers="a10 a11 a4">36.00</TD> <TD></TD> </TR> <TR> <TD id="a12" axis="date">28-Aug-97</TD> <TD headers="a10 a12 a2">35.00</TD> <TD headers="a10 a12 a3">109.00</TD> <TD headers="a10 a12 a4">36.00</TD> <TD></TD> </TR> <TR> <TD>subtotals</TD> <TD>131.25</TD> <TD>218.00</TD> <TD>72.00</TD> <TD>421.25</TD> </TR> <TR> <TH>Totals</TH> <TD>196.27</TD> <TD>442.00</TD> <TD>162.00</TD> <TD>800.27</TD> </TR> </TABLE>
Обратите внимание, что такая разметка таблицы позволяет также ПА исключить получение пользователем нежелательной информации. Например, если речевой синтезатор назвал бы все позиции в столбце "Meals" этой таблицы в ответ на запрос "What were all my meal expenses?", пользователь не смог бы отличить ежедневные затраты от общих. Внимательно категоризируя данные в ячейках, авторы позволяют ПА выполнить важное семантическое различение при выводе информации.
Конечно, нет никаких ограничений по категоризации информации таблицы. В таблице затрат на путешествие, например, мы могли бы добавить дополнительные категории "subtotals" и "totals".
Эта спецификация не требует от ПА обрабатывать информацию, предоставленную атрибутом axis, как и не даёт каких-либо рекомендаций, как ПА могут представлять пользователям информацию в axis или как пользователи могут запрашивать ПА об этой информации.
Однако ПА, в особенности речевые синтезаторы, могут выносить за скобки информацию, обычную для некоторых ячеек, которые являются результатом выполнения запроса. Например, если пользователь спрашивает "What did I spend for meals in San Jose?", ПА мог бы сначала определить ячейки для вопроса (25-Aug-1997: 37.74, 26-Aug-1997:27.28), а затем отобразить эту информацию. Речевой ПА смог бы прочитать эту информацию:
Location: San Jose. Date: 25-Aug-1997. Expenses, Meals: 37.74 Location: San Jose. Date: 26-Aug-1997. Expenses, Meals: 27.28
или более компактно:
San Jose, 25-Aug-1997, Meals: 37.74 San Jose, 26-Aug-1997, Meals: 27.28
И даже более экономно - можно было бы убрать общую информацию и реорганизовать её:
San Jose, Meals, 25-Aug-1997: 37.74 26-Aug-1997: 27.28
ПА, поддерживающие такой тип представления, должны иметь способность настраивать представление (напр., с помощью таблиц стилей).
При отсутствии заголовочной информации в атрибутах scope или headers, ПА могут конструировать заголовочную информацию в соответствии со следующим алгоритмом. Цель этого алгоритма - найти упорядоченный список заголовков. (В следующем описании алгоритма направление в таблице принимается "слева-направо".)
Это пример группировки рядов и столбцов. Он взят из "Developing International Software", Nadine Kano.
В "ascii-подобном" виде, следующая таблица:
<TABLE border="2" frame="hsides" rules="groups" summary="Code page support in different versions of MS Windows."> <CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION> <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3"> <THEAD valign="top"> <TR> <TH>Code-Page<BR>ID <TH>Name <TH>ACP <TH>OEMCP <TH>Windows<BR>NT 3.1 <TH>Windows<BR>NT 3.51 <TH>Windows<BR>95 <TBODY> <TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>* <TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X <TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X <TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X <TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X <TBODY> <TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X <TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X <TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X <TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X <TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X </TABLE>
могла бы быть представлена так:
CODE-PAGE SUPPORT IN MICROSOFT WINDOWS =============================================================================== Code-Page | Name | ACP OEMCP | Windows Windows Windows ID | | | NT 3.1 NT 3.51 95 ------------------------------------------------------------------------------- 1200 | Unicode (BMP of ISO 10646) | | X X * 1250 | Windows 3.1 Eastern European | X | X X X 1251 | Windows 3.1 Cyrillic | X | X X X 1252 | Windows 3.1 US (ANSI) | X | X X X 1253 | Windows 3.1 Greek | X | X X X 1254 | Windows 3.1 Turkish | X | X X X 1255 | Hebrew | X | X 1256 | Arabic | X | X 1257 | Baltic | X | X 1361 | Korean (Johab) | X | ** X ------------------------------------------------------------------------------- 437 | MS-DOS United States | X | X X X 708 | Arabic (ASMO 708) | X | X 709 | Arabic (ASMO 449+, BCON V4) | X | X 710 | Arabic (Transparent Arabic) | X | X 720 | Arabic (Transparent ASMO) | X | X ===============================================================================
Графический ПА мог бы представить это так:
Этот пример показывает, как COLGROUP может использоваться для группировки столбцов и установки выравнивания столбцов по умолчанию. Так же TBODY используется для группировки рядов. Атрибуты frame и rules сообщают ПА, какие рамки и сетку отображать.