Таблиці в HTML-документах

width = length [CN]

Не рекомендується. Повідомляє в ПА рекомендовану ширину осередку.

height = length [CN]

Не рекомендується. Повідомляє в ПА рекомендовану висоту комірки.

 

Атрибути, визначені в  іншому місці

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (заголовок элемента)
• style (инлайн-стиль)
• onclick, ondblclick,  onmousedown, onmouseup,  onmouseover, onmousemove,  onmouseout, onkeypress,  onkeydown, onkeyup (внутренние события)
• bgcolor (цвет фона)
• align, char, charoff, valign (выравнивание в ячейке)

 

Осередки таблиці можуть містити інформацію двох типів: заголовну  інформацію і дані. Такий поділ  дає ПА можливість по різному виводити осередку заголовків і даних навіть при відсутності таблиць стилів. Наприклад, візуальні ПА можуть представляти текст заголовної осередку напівжирним  шрифтом. Голосові синтезатори можуть представляти інформацію заголовка  іншою інтонацією.

Елемент 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>

 

Висновок ПА цієї таблиці  для пристрою 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>

 

2. Подання таблиць невізуальними ПА
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>&pound;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>&pound;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>&pound;18</TD>

  </TR>

</TABLE>

 

Графічний ПА може вивести  це так:

 

Зверніть увагу на використання атрибуту scope зі значенням "row". Хоча перша осередок кожного ряду містить дані, а не заголовну інформацію, атрибут scope визначає таку ж поведінку осередків даних, як для заголовних осередків ряду. Це дозволяє мовним синтезаторам представляти відповідне course name за запитом або виставляти його безпосередньо перед вмістом кожного осередку.