Ассоциирование заголовочной информации с ячейками данных

11.4.1 Ассоциирование заголовочной информации с ячейками данных

Невизуальные ПА, такие как голосовые синтезаторы и Брайль-устройства, могут использовать следующие атрибуты элементов TD и TH, чтобы выводить таблицу более интуитивно:

Для текущей ячейки данных, атрибут headers содержит список ячеек, предоставляющих заголовочную информацию. Для этого каждая заголовочная ячейка должна быть именована атрибутом id. Обратите внимание, что не всегда возможно провести чёткую грань между данными и заголовками в ячейках. Вы должны использовать элемент TD для таких ячеек вместе с атрибутом id или scope, как удобнее.
Для данной заголовочной ячейки, атрибут scope сообщает ПА о ячейках данных, для которых этот заголовок предоставляет информацию. Авторы могут избрать использование этого атрибута вместо headers в зависимости от того, что более подходит; оба эти атрибута выполняют одну и ту же функцию. Атрибут headers нужен обычно, если заголовки помещены в необычную позицию по отношению к данным, к которым они применяются.
Атрибут abbr определяет сокращённую форму заголовочной ячейки, и ПА может быстрее вывести заголовочную информацию.

В следующем примере мы назначаем заголовочную информацию ячейке установкой атрибута 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 по запросу или выставлять его непосредственно перед содержимым каждой ячейки.

Содержание Назад Вперед