![]() |
||
|
aranea.ru || Спецификация HTML 4.01 | 11. Таблицы
11. Таблицы11.2. Элементы для построения таблиц11.2.1. Элемент TABLEНаправление в таблице 11.2.2. Заголовки таблицы: элемент CAPTION 11.2.3. Группы рядов: элементы THEAD, TFOOT и TBODY 11.2.4. Группы колонок: элементы COLGROUP и COL Элемент COLGROUP Элемент COL Расчет количества колонок в таблице Расчет ширины колонок 11.2.5. Ряды таблицы: элемент TR 11.2.6. Ячейки таблицы: элементы TH и TD Ячейки, которые занимают несколько рядов или колонок 11.2.1 Элемент TABLE<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> <!ATTLIST TABLE -- table element -- %attrs; -- %coreattrs, %i18n, %events -- summary %Text; #IMPLIED -- purpose/structure for speech output-- width %Length; #IMPLIED -- table width -- border %Pixels; #IMPLIED -- controls frame width around table -- frame %TFrame; #IMPLIED -- which parts of frame to render -- rules %TRules; #IMPLIED -- rulings between rows and cols -- cellspacing %Length; #IMPLIED -- spacing between cells -- cellpadding %Length; #IMPLIED -- spacing within cells -- > Начальный тег: обязательный, конечный тег: обязательный Определение атрибутов
Атрибуты, определенные в другом месте
Элемент TABLE включает в себя все элементы, которые определяют заголовок, ряды, содержание и форматирование. Следующий информативный список описывает, какие операции могут выполнять устройства вывода, когда они представляют таблицу:
Табличная модель в HTML была разработана таким образом, что с помощью разработок авторов устройства вывода могут представлять таблицы шаг за шагом (т.е. по мере появления рядов таблицы) вместо ожидания загрузки всех данных перед началом визуализации. Чтобы устройство вывода форматировало таблицу за один проход, авторы должны сообщить устройству:
Устройства вывода могут визуализировать таблицу за один проход, когда ширина колонок определена с использованием комбинации элементов COLGROUP и COL. Если какие-либо колонки определены в относительных или процентных единицах (смотрите раздел по расчету ширины колонок), то авторам следует определить ширину самой таблицы. Направление в таблицеНаправление в таблице либо наследуется (по умолчанию слева направо), либо определяется атрибутом dir в элементе TABLE. Для таблицы с направлением слева направо, нулевая колонка находится на левой стороне, а нулевой ряд – наверху. Для таблицы с направлением справа налево, нулевая колонка находится справа, а нулевой ряд – наверху. Когда устройство вывода распределяет дополнительные ячейки в ряду (смотрите раздел по расчету количества колонок в таблице), то дополнительные ячейки добавляются справа для таблицы с направлением слева направо и – слева для таблиц с направлением справа налево. Обратите внимание на то, что TABLE является единственным элементом, для которого атрибут dir переворачивает визуальный порядок колонок; т.е. нельзя перевернуть один ряд в таблице (TR) или группу колонок (COLGROUP) независимо от других. Когда атрибут dir установлен для элемента TABLE, то он также влияет на направление текста внутри ячеек таблицы (так как атрибут dir наследуется блочными элементами). Для определения таблицы с направлением справа налево, установите атрибут dir следующим образом: <TABLE dir="RTL"> ...the rest of the table... </TABLE> Направление текста в индивидуальных ячейках можно изменить с помощью атрибута dir в элементе, который определяет ячейку. Обратитесь к разделу по двухстороннему направлению текста для получения подробной информации по данному вопросу. 11.2.2 Заголовки таблицы: элемент CAPTION<!ELEMENT CAPTION - - (%inline;)* -- table caption --> <!ATTLIST CAPTION %attrs; -- %coreattrs, %i18n, %events -- > Начальный тег: обязательный, Конечный тег: обязательный Определение атрибутов
Атрибуты, определенные в другом месте
Текст элемента CAPTION, когда он предоставлен, должен описывать природу таблицы. CAPTION – единственный разрешенный элемент сразу после начального тега TABLE. Элемент TABLE может содержать только один элемент CAPTION. Визуальные устройства вывода позволяют зрячим людям быстро ухватить структуру таблицы из заголовков, а также из ее названия. В результате этого, заголовки часто являются неадекватными резюме для цели и структуры таблицы с точки зрения людей, полагающихся на не визуальные устройства вывода. Поэтому, авторам следует быть осторожными при предоставлении дополнительной информации, суммирующей цель и структуру таблицы, с использованием атрибута summary элемента TABLE. Это особенно важно для таблиц без заголовков. Примеры внизу иллюстрируют использование атрибута summary. Визуальные устройства вывода должны избегать вырезания любой части таблицы, включая заголовки до тех пор, пока средства не предоставят доступ ко всем частям, например, горизонтальный или вертикальный скроллинг. Мы рекомендуем, чтобы текст заголовка размещался на ту же ширину, что и таблица. (Смотрите также раздел по рекомендуемым алгоритмам разметки.) 11.2.3 Группы рядов: элементы THEAD, TFOOT и TBODY<!ELEMENT THEAD - O (TR)+ -- table header --> <!ELEMENT TFOOT - O (TR)+ -- table footer --> Начальный тег: обязательный, конечный тег: факультативный <!ELEMENT TBODY O O (TR)+ -- table body --> Начальный тег: факультативный, конечный тег: факультативный <!ATTLIST (THEAD|TBODY|TFOOT) -- table section -- %attrs; -- %coreattrs, %i18n, %events -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- > Атрибуты, определенные в другом месте
Ряды таблицы могут группироваться в шапку, низ таблицы и в одно или несколько разделов тела таблицы с использованием элементов THEAD, TFOOT и TBODY, соответственно. Это разделение предоставляет устройствам вывода возможность поддерживать прокрутку тел таблиц независимо от шапки и низа таблицы. Когда печатаются длинные таблицы, информация шапки и низа таблицы может повторяться на каждой странице, которая содержит данные таблицы. Шапка и низ таблицы должны содержать информацию о колонках таблицы. Тело таблицы должно включать ряды данных таблицы. Когда следующие элементы присутствуют, то каждый THEAD, TFOOT и TBODY включает группу рядов. Каждая группа рядов должна содержать, по меньшей мере, один ряд, определенный элементом TR. Следующий пример иллюстрирует порядок и структуру шапки, низа и тела таблицы. <TABLE> <THEAD> <TR> ...header information... </THEAD> <TFOOT> <TR> ...footer information... </TFOOT> <TBODY> <TR> ...first row of block one data... <TR> ...second row of block one data... </TBODY> <TBODY> <TR> ...first row of block two data... <TR> ...second row of block two data... <TR> ...third row of block two data... </TBODY> </TABLE> TFOOT должен появляться перед элементом TBODY внутри определения TABLE так, чтобы устройства вывода могли визуализировать низ таблицы перед получением всех (возможно многочисленных) рядов с данными. Далее суммируется информация о том, какие теги необходимы, а какие можно опустить:
Синтаксические анализаторы согласующихся устройств вывода должны подчиняться этим правилам для обратной совместимости. Таблица из предыдущего примера может быть сокращена с помощью удаления определенных конечных тегов, следующим образом: <TABLE> <THEAD> <TR> ...header information... <TFOOT> <TR> ...footer information... <TBODY> <TR> ...first row of block one data... <TR> ...second row of block one data... <TBODY> <TR> ...first row of block two data... <TR> ...second row of block two data... <TR> ...third row of block two data... </TABLE> Разделы THEAD, TFOOT и TBODY должны содержать одинаковое число колонок. 11.2.4 Группы колонок: элементы COLGROUP и COLГруппы колонок позволяют авторам создавать структурное деление внутри таблицы. Авторы могут выделить эту структуру с помощью стилевых таблиц или атрибутов HTML (например, атрибут rules для элемента TABLE). Для просмотра визуальной презентации группы колонок, перейдите к примеру простой таблицы внизу. Таблица может содержать либо одну неявную группу колонок (элемент COLGROUP не определяет границы колонок), либо любое количество явных групп колонок (каждая ограничена примером элемента COLGROUP). Элемент COL позволяет авторам разделять атрибуты между несколькими колонками без обозначения какой-либо структурной группировки. Значение "span" элемента COL – это число колонок, которые будут разделять атрибуты элемента. Элемент COLGROUP<!ELEMENT COLGROUP - O (COL)* -- table column group --> <!ATTLIST COLGROUP %attrs; -- %coreattrs, %i18n, %events -- span NUMBER 1 -- default number of columns in group -- width %MultiLength; #IMPLIED -- default width for enclosed COLs -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- > Начальный тег: обязательный, конечный тег: факультативный Определение атрибутов
Атрибуты, определенные в другом месте
Элемент COLGROUP создает явную группу колонок. Число колонок в группе может быть определено двумя, взаимно исключающими, способами:
Преимущество использования атрибута span состоит в том, что авторы могут группировать вместе информацию о ширине колонок. Таким образом, если таблица содержит сорок колонок, каждая из которых имеет ширину 20 пикселей, то легче записать следующее: <COLGROUP span="40" width="20"> </COLGROUP> чем: <COLGROUP> <COL width="20"> <COL width="20"> ...a total of forty COL elements... </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> Элемент COL<!ELEMENT COL - O EMPTY -- table column --> <!ATTLIST COL -- column groups and properties -- %attrs; -- %coreattrs, %i18n, %events -- span NUMBER 1 -- COL attributes affect N columns -- width %MultiLength; #IMPLIED -- column width specification -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- > Начальный тег: обязательный, конечный тег: запрещенный Определение атрибутов
Атрибуты, определенные в другом месте
Элемент COL позволяет авторам группировать вместе спецификации атрибутов для колонок таблицы. Элемент COL не группирует колонки вместе структурно, эту роль выполняет элемент COLGROUP. Элементы COL – пустые и служат только как поддержка атрибутов. Они могут появляться внутри и вне явной группы колонок (т.е. элемента COLGROUP). Атрибут width для COL обращается к ширине каждой колонки в сцепке элемента. Расчет количества колонок в таблицеСуществует два способа определения количества колонок в таблице (в порядке предпочтения):
Происходит ошибка, если таблица содержит элемент COLGROUP или COL, и оба подсчета не приводят в результате к одинаковому количеству колонок. Как только устройство вывода подсчитало количество колонок в таблице, оно может сгруппировать их в группы. Например, для каждой из нижеследующих таблиц, оба метода расчета колонок должны в результате получить три колонки. Первые три таблицы могут визуализироваться пошагово. <TABLE> <COLGROUP span="3"></COLGROUP> <TR><TD> ... ...rows... </TABLE> <TABLE> <COLGROUP> <COL> <COL span="2"> </COLGROUP> <TR><TD> ... ...rows... </TABLE> <TABLE> <COLGROUP> <COL> </COLGROUP> <COLGROUP span="2"> <TR><TD> ... ...rows... </TABLE> <TABLE> <TR> <TD><TD><TD> </TR> </TABLE> Расчет ширины колонокАвторы могут установить ширину колонок тремя способами:
Если автор не дает информацию о ширине колонки, то устройство вывода не сможет пошагово отформатировать таблицу, так как оно должно ждать загрузку всей колонки с поступающими данными, чтобы осуществить распределение соответствующей ширины. Если ширина колонок предоставляется слишком узкой для содержания частной ячейки таблицы, то устройство вывода может выбрать переформатирование таблицы. Таблица в следующем примере содержит шесть колонок. Первая колонка не принадлежит к явно определенной группе колонок. Следующие три принадлежат первой явной группе колонок и последние две принадлежат второй явной группе колонок. Эту таблицу нельзя отформатировать пошагово, так как она содержит определения пропорциональных ширин колонок, и не имеет значения для атрибута width в элементе TABLE. Как только (визуальное) устройство вывода получает данные таблицы: доступное горизонтальное пространство будет распределено устройством вывода следующим образом: во-первых, устройство вывода будет распределять 30 пикселей для колонок один и два. Затем, будет резервироваться минимальное пространство, необходимое для третьей колонки. Оставшееся горизонтальное пространство будет разделено на шесть равных частей (так как 2* + 1* + 3* = 6 частей). Колонка четыре (2*) получит две из этих частей, колонка пять (1*) – одну часть, а колонка шесть (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> ... ...rows... </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> ... ...rows... </TABLE> Первые десять колонок будут шириной 15 пикселей каждая. Последние две колонки получат по половине оставшихся 50 пикселей. Обратите внимание, что элементы COL появляются только так, что значение id может быть определено для последних двух колонок. Обратите внимание. Хотя атрибут width в элементе TABLE не является устаревающим (deprecated), авторам рекомендуется использовать стилевые таблицы для определения ширины таблицы. 11.2.5 Ряды таблицы: элемент TR<!ELEMENT TR - O (TH|TD)+ -- table row --> <!ATTLIST TR -- table row -- %attrs; -- %coreattrs, %i18n, %events -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- > Начальный тег: обязательный, конечный тег: факультативный Атрибуты, определенные в другом месте
Элементы 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 <TR> ...A header row... <TR> ...First row of data... <TR> ...Second row of data... ...the rest of the table... </TABLE> 11.2.6 Ячейки таблицы: элементы TH и TD<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell--> <!-- Scope is simpler than headers attribute for common tables --> <!ENTITY % Scope "(row|col|rowgroup|colgroup)"> <!-- TH is for headers, TD for data, but for cells acting as both use TD --> <!ATTLIST (TH|TD) -- header or data cell -- %attrs; -- %coreattrs, %i18n, %events -- abbr %Text; #IMPLIED -- abbreviation for header cell -- axis CDATA #IMPLIED -- comma-separated list of related headers-- headers IDREFS #IMPLIED -- list of id's for header cells -- scope %Scope; #IMPLIED -- scope covered by header cells -- rowspan NUMBER 1 -- number of rows spanned by cell -- colspan NUMBER 1 -- number of cols spanned by cell -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- > Начальный тег: обязательный, конечный тег: факультативный Определение атрибутов
Атрибуты, определенные в другом месте
Ячейки таблицы могут содержать два типа информации: заголовки и данные. Это разделение дает возможность устройствам вывода представлять ячейки заголовков и данных различным образом, даже без стилевых таблиц. Например, визуальные устройства вывода могут представлять текст ячейки заголовка с утолщенным шрифтом. Синтезаторы речи могут произносить информацию заголовка с другой интонацией. Элемент TH определяет ячейку, которая содержит информацию заголовка. Устройства вывода имеет два вида информации заголовков: содержание элемента TH и значение атрибута abbr. Устройства вывода должны представлять либо содержание ячейки, либо значение атрибута abbr. Для визуальных медиа, последний может использоваться, когда не достаточно места для вывода всего содержания ячейки. Для не визуальных медиа, abbr может использоваться как сокращение для заголовков таблицы, когда они представляются вместе с содержанием ячеек, к которым они применяются. Атрибуты headers и scope позволяют так же авторам помогать не визуальным устройствам вывода обрабатывать информацию заголовков. Обратитесь к разделу по маркировке не визуальных устройств вывода для получения информации и примеров. Элемент TD определяет ячейку, которая содержит данные. Ячейки могут быть пустыми (т.е. не содержать данные). Например, следующая таблица содержит четыре колонки данных, каждая из которых несет заголовки для колонок. <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> |