11 Таблиці

11.1 Введення в таблиці

Модель таблиць HTML дозволяє авторам впорядковувати дані - текст, форматований текст, зображення, посилання, форми, поля форм, інші таблиці і т.д. - В рядки і стовпці осередків.

З кожною таблицею може бути пов'язаний заголовок (див. Елемент CAPTION ), що надає короткий опис таблиці. Можна також вказати і більш довгий опис (за допомогою атрибута summary ) для зручності людей, що використовують агенти на базі абетки Бройля або мови.

Рядки таблиці можуть групуватися в розділи заголовків, нижніх заголовків і тіла, (за допомогою елементів THEAD , TFOOT і TBODY відповідно). Групи рядків convey додаткову структурну інформацію і можуть генеруватися агентами користувачів різними способами, що відображають цю структуру. Агенти користувачів можуть використовувати підрозділ на заголовки / тіло / нижні заголовки для підтримки прокрутки тіла незалежно від заголовків. При друку довгих таблиць інформація із заголовків може повторюватися на кожній сторінці таблиці.

Автори також можуть групувати стовпці для надання додаткової структурної інформації, яка може використовуватися агентами користувачів. Більш того, автори можуть оголошувати властивості стовпців на початку визначення таблиці (за допомогою елементів COLGROUP і COL ) таким чином, який дозволяє агентам користувачів генерувати таблицю послідовно, а не чекати зчитування всіх даних таблиці перед тим, як почати генерацію.

Стовпчики таблиці можуть містити "заголовок" (див. Елементи TH ) або "дані" (див. Елемент TD ). Осередки можуть поширюватися на кілька рядків або стовпців. Модель таблиць мови HTML 4.0 дозволяє авторам позначати кожну клітинку, так що незриме агентам користувачів буде простіше працювати з інформацією про осередках. Ці механізми не тільки істотно полегшують доступ користувачам з фізичними вадами, а й роблять його обробку таблиць можливої ​​для мультирежимну бездротових браузерів з обмеженими можливостями відображення (наприклад, Web-сумісних пейджерів і телефонів).

Не слід використовувати таблиці тільки як засіб компонування вмісту документа, оскільки це може викликати проблеми при генерації для невізуальних засобів. Крім того, якщо мітки використовувати з графікою, це може привести до того, що користувачам доведеться виконувати горизонтальну прокрутку, щоб переглянути таблицю, створену в системі з великим екраном. Для зменшення можливості цих проблем авторам слід використовувати для компонування документа таблиці стилів , а не таблиці.

Примітка. У цій специфікації більш детальна інформація про таблиці наводиться в розділах про питання застосування і rationale створення таблиць .

Нижче показана проста таблиця, на прикладі якої ілюструються деякі можливості моделі таблиць мови HTML. Наступне визначення:

  <TABLE border = "1"
  summary = "У цій таблиці наводиться деяка статистика про фруктових мухах:
  середня висота і вага, відсоток мух з червоними очима (особин чоловічої і жіночої статі). ">
 <CAPTION> <EM> Тестова таблиця з об'єднаними осередками </ EM> </ CAPTION>
 <TR> <TH rowspan = "2"> <TH colspan = "2"> Середній
  <TH rowspan = "2"> Червоні <BR> очі
 <TR> <TH> висота <TH> вага
 <TR> <TH> чоловіча стать <TD> 1.9 <TD> 0.003 <TD> 40%
 <TR> <TH> жіноча стать <TD> 1.7 <TD> 0.002 <TD> 43%
 </ TABLE>

має генеруватися на терміналі приблизно наступним чином:

  Тестова таблиця з об'єднаними осередками
  / ------------------------------------------------- --------- \
  |  |  середній |  червоні |
  |  | ------------------- |  очі |
  |  |  висота |  вага |  |
  | ------------------------------------------------- --------- |
  |  Чоловіча стать |  1.9 |  0.003 |  40% |  |
  | ------------------------------------------------- --------- |
  |  Жіноча стать |  1.7 |  0.002 |  43% |  |
  \ ------------------------------------------------- --------- /

або в такий спосіб - графічними агентами користувачів:

Таблиця з об'єднаними осередками

11.2 Елементи побудови таблиць

11.2.1 Елемент TABLE

  <! ELEMENT TABLE - -
  (CAPTION ?, (COL * | COLGROUP *), THEAD ?, TFOOT ?, TBODY +)>
 <! ATTLIST TABLE - таблиця -
  % attrs;
  - % Coreattrs , % i18n , % events -
  summary % Text;
  #IMPLIED - Мета / структура для мовного виведення -
  width % Length;
  #IMPLIED - Ширина таблиці -
  border % Pixels;
  #IMPLIED - Товщина рамки навколо таблиці -
  frame % TFrame;
  #IMPLIED - Які частини рамки потрібно генерувати -
  rules % TRules;
  #IMPLIED - Rulings між рядками і стовпцями -
  cellspacing % Length;
  #IMPLIED - Відстань між осередками -
  cellpadding % Length;
  #IMPLIED - Відстань всередині осередків -
  >

Початковий тег: обов'язковий, кінцевий тег: обов'язковий

визначення атрибутів

summary = текст [CS]
Коротка інформація про призначення й структуру таблиці для агентів користувачів, що виконують генерацію для невізуальних засобів, таких як синтезатори мови або азбуки Бройля.
align = left | center | right [CI]
Deprecated. Цей атрибут задає положення таблиці щодо документа. Допустимі значення:
  • left: Таблиця знаходиться в лівій частині документа.
  • center: Таблиця знаходиться в центрі документа.
  • right: Таблиці знаходиться в правій частині документа.
width = довжина [CN]
Цей атрибут визначає необхідну ширину всієї таблиці і призначений для візуальних об'єктів користувачів. Якщо значення вказано у відсотках, це означає частку в відсотках загального обсягу горизонтального простору. Якщо ширина не вказана, вона визначається агентом користувача.

Елемент TABLE містить всі інші елементи, що визначають заголовок, рядки, вміст і форматування.

У наступному списку описано, які операції може виконувати агент користувача при генерації таблиць:

  • Надання користувачеві інформації про таблиці . Авторам слід надавати коротку інформацію про зміст і структуру таблиці, щоб люди, які працюють з невізуальними агентами користувачів, могли краще зрозуміти її.
  • Генерація caption, якщо він визначений.
  • Генерація верхнього заголовка таблиці, якщо він визначений. Генерація нижнього заголовка, якщо він визначений. Агенти користувачів повинні знати, де потрібно генерувати верхній і нижній заголовки. Наприклад, якщо засіб виведення ділиться на сторінки, агенти користувачів можуть поміщати верхній заголовок у верхній частині кожної сторінки, а нижній - внизу. Точно так же, якщо агент користувача надає механізм прокрутки рядків, верхній заголовок може відображатися вгорі прокручуваному області, а нижній - внизу.
  • Обчислення числа стовпців в таблиці. Пам'ятайте, що число рядків в таблиці дорівнює числу елементів TR , що містяться в елементі TABLE .
  • Угруповання стовпців відповідно до специфікацій груп стовпців .
  • Построчная генерація осередків і угруповання в стовпці між верхнім і нижнім заголовками. Візуальні агенти користувачів повинні форматувати таблиці відповідно до атрибутами HTML і специфікаціями таблиць стилів.

Модель таблиць HTML розроблена так, щоб за допомогою автора агенти користувачів могли генерувати таблиці послідовно (тобто в міру отримання рядків таблиці), а не чекали отримання всієї таблиці до початку генерації.

Щоб агенти користувачів могли форматувати таблицю за один прохід, автори повинні повідомити агентам користувачів наступну інформацію:

Більш точно агент користувача може згенерувати таблицю за один прохід, коли ширина стовпців вказана з використанням комбінації елементів COLGROUP і COL . Якщо для будь-якого стовпчика вказана відносна ширина або ширина в процентах (див. Розділ про підрахунку ширини стовпців ), автори повинні також вказати ширину самої таблиці.

напрямок таблиць  

Напрямок таблиці або успадковується (за замовчуванням використовується напрямок зліва направо), або визначається атрибутом dir елемента TABLE .

Для таблиць, напрямок яких зліва направо, нульовий стовпець знаходиться зліва, а нульова рядок - зверху. Для таблиць, напрямок яких справа наліво, нульовий стовпець знаходиться праворуч, а нульова рядок - зверху.

Якщо агент користувача allots в рядок додаткові осередки (див. Розділ про підрахунку числа стовпців в таблиці ), додаткові осередки рядки додаються в таблицю праворуч для таблиць, що мають напрямок зліва направо, і зліва для таблиць, що мають напрямок справа наліво.

Пам'ятайте, що TABLE - єдиний елемент, для якого атрибут dir звертає візуальний порядок стовпців; не можна змінити порядок одного рядка ( TR ) або групи стовпців ( COLGROUP ).

Якщо для елемента TABLE встановлений атрибут dir , він також впливає на напрям тексту в осередках таблиці (оскільки атрибут dir успадковується елементами рівня блоку).

Щоб визначити таблицю з напрямком справа наліво, встановіть атрибут dir наступним чином:

  <TABLE dir = "RTL">
 ... продовження таблиці ... </ TABLE>

Напрямок тексту в окремих осередках можна змінити, встановивши атрибут dir для елемента, що визначає осередок. Детальніше про питання напряму тексту див. Розділ про двунаправленном тексті .

11.2.2 Captions таблиць: елемент CAPTION

  <! ELEMENT CAPTION - - ( % inline; ) * - caption таблиці ->
 <! ENTITY% CAlign "(top | bottom | left | right)">
 <! ATTLIST CAPTION
  % attrs;
  - % Coreattrs , % i18n , % events -
  >

Початковий тег: обов'язковий, кінцевий тег: обов'язковий

визначення атрибутів

align = top | bottom | left | right [CI]
Небажаний. Для візуальних агентів користувачів цей атрибут вказує положення caption щодо таблиці. Можливі значення:
  • top: caption знаходиться нагорі таблиці. Це значення використовується за умовчанням.
  • bottom: caption знаходиться внизу таблиці.
  • left: caption знаходиться зліва від таблиці.
  • right: caption знаходиться праворуч від таблиці.

Якщо елемент CAPTION присутній, його текст повинен описувати предмет таблиці. Елемент CAPTION може розташовуватися тільки безпосередньо після початкового тега TABLE . Елемент TABLE може включати тільки один елемент CAPTION .

Візуальні агенти користувачів дозволяють sighted people швидко grasp структуру таблиці з заголовків і caption. Наслідком цього є те, що captions не збігатимуться з короткими описами призначення і структури таблиці з точки зору людей, що використовують невізуальні агенти.

Таким чином, автори повинні подбати про надання додаткової інформації, яка описує призначення і структуру таблиці за допомогою атрибуту summary елемента TABLE . Це особливо важливо для таблиць, які не мають captions. На прикладах нижче показано використання атрибуту summary .

Візуальні агенти користувачів повинні уникати clipping будь-якій частині таблиці, включаючи caption, якщо не надано засіб доступу до всіх частин, наприклад, за допомогою горизонтальної або вертикальної прокрутки. Ми рекомендуємо, щоб текст caption розбивався так, щоб мати ту ж ширину, що і таблиця. (Див. Також розділ про рекомендованих алгоритмах компонування .)

11.2.3 Групи рядків: елементи THEAD , TFOOT і TBODY

  <! ELEMENT THEAD - O (TR) + - заголовок таблиці ->
 <! ELEMENT TFOOT - O (TR) + - нижній заголовок таблиці ->

Початковий тег: обов'язковий, кінцевий тег: необов'язковий

  <! ELEMENT TBODY OO (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 , щоб агенти користувачів могли генерувати нижній заголовок до отримання всіх (можливо, численних) рядків даних. Нижче наводиться зведення обов'язкових тегів і тегів, які можна опустити:

  • Початковий тег TBODY завжди обов'язковий, якщо тільки таблиця не містить єдиного тіла без верхніх і нижніх заголовків. Кінцевий тег TBODY завжди можна опускати.
  • Початкові теги для елементів THEAD і TFOOT обов'язкові, якщо в таблиці присутні верхній і нижній заголовки, але відповідні кінцеві теги можна опускати.

Відповідний специфікації агент користувача при розборі повинен obey ці правила з міркувань сумісності з попередніми версіями.

Таблицю з попереднього прикладу можна скоротити, видаливши кінцеві теги, як показано нижче:

  <TABLE>
 <THEAD>
  <TR> ... верхній заголовок ... <TFOOT>
  <TR> ... нижній заголовок ... <TBODY>
  <TR> ... перший рядок даних блоку 1 ... <TR> ... другий рядок даних блоку 1 ... <TBODY>
  <TR> ... перший рядок даних блоку 2 ... <TR> ... другий рядок даних блоку 2 ... <TR> ... третій рядок даних блоку 2 ... </ TABLE>

Розділи THEAD , TFOOT і TBODY повинні містити однакову кількість стовпців.

11.2.4 Групи стовпців: елементи COLGROUP і COL

Групи стовпців дозволяють створювати структурні підрозділи всередині таблиці. Автори можуть виділяти таку структуру за допомогою таблиць стилів або атрибутів HTML (наприклад, атрибут rules для елемента TABLE ). Приклад візуального представлення групи стовпців см. В прикладі таблиці .

Таблиця може містити одну неявну групу стовпців (елемент COLGROUP не поділяє стовпці) або будь-яке число явних груп стовпців (кожна з яких відокремлюється одним екземпляром елемента COLGROUP ).

Елемент COL дозволяє авторам використовувати одні і ті ж атрибути в різних стовпчиках, не використовуючи структурної угруповання. "span" елемента COL - це число стовпців, що використовують атрибути цього елемента.

елемент COLGROUP  

  <! ELEMENT COLGROUP - O (col) * - група стовпців таблиці ->
 <! ATTLIST COLGROUP
  % attrs;
  - % Coreattrs , % i18n , % events - span NUMBER 1 - число стовпців в групі, що використовується за умовчанням - width % MultiLength;
  #IMPLIED - Ширина для вкладених елементів COL, використовувана за замовчуванням - % cellhalign;
  - Горизонтальне вирівнювання в осередках - % cellvalign;
  - Вертикальне вирівнювання в осередках ->

Початковий тег: обов'язковий, Кінцевий тег: необов'язковий

визначення атрибутів

span = число [CN]
Цей атрибут, значенням якого має бути ціле число більше нуля, визначає число стовпців в групі. Значення означають наступне:
  • При відсутності атрибута span кожен елемент COLGROUP визначає групу стовпців, що складається з одного стовпця.
  • Якщо для атрибута span встановлено значення N> 0, поточний елемент COLGROUP визначає групу, яка містить N стовпців.

Агенти користувачів повинні ігнорувати цей атрибут, якщо елемент COLGROUP містить один або кілька елементів COL .

width = multi-length [CN]

Цей атрибут визначає ширину кожного стовпця в поточній групі, яка використовується за замовчуванням. Крім стандартних значень в пікселах, відсотках і відносних значень, в цьому атрибуті може використовуватися спеціальна форма "0 *" (нуль із зірочкою), яка означає, що ширина кожного стовпця в групі повинна бути мінімальною, необхідною для розміщення вмісту стовпчика. Мається на увазі, що вміст стовпчика відомо до того, як можна буде коректно обчислити його ширину. Автори повинні знати, що використання "0 *" не дозволить агентам користувачів генерувати таблицю послідовно.

Цей атрибут переопределяется для будь-якого стовпчика з групи, для якого значення атрибута width задано в елементі COL .

Елемент COLGROUP створює явну групу стовпців. Число стовпців в групі може бути зазначено двома взаємовиключними способами:

  1. Атрибут span елемента (значення за замовчуванням - 1) задає число стовпців в групі.
  2. Кожен елемент COL в COLGROUP представляє один або декілька стовпців в групі.

Перевагою використання атрибута span є те, що автори можуть групувати інформацію про ширину стовпців. Таким чином, якщо в таблиці міститься сорок стовпців, кожен з яких має ширину 20 пікселів, простіше написати:

  <COLGROUP span = "40" width = "20">
  </ COLGROUP>

ніж:

  <COLGROUP>
  <COL width = "20">
  <COL width = "20">
  ... все сорок елементів COL ... </ COLGROUP>

Якщо необхідно виділити стовпець (наприклад, для інформації про стиль, для вказівки інформації про ширину і т.д.) в групі, автори повинні визначити цей стовпець з допомогою елемента COL . Таким чином, щоб застосувати спеціальну інформацію про стилі до останнього стовпцю попередньої таблиці, ми виділяємо його наступним чином:

  <COLGROUP width = "20">
  <COL span = "39">
  <COL id = "format-me-specially">
  </ COLGROUP>

Атрибут width елемента COLGROUP успадковують всі сорок стовпців. Перший елемент 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 - стовпець таблиці ->
 <! ATTLIST COL - групи і властивості стовпців - % attrs;
  - % Coreattrs , % i18n , % events - span NUMBER 1 - атрибут COL впливає на N стовпців - width % MultiLength;
  #IMPLIED - Ширина стовпця - % cellhalign;
  - Горизонтальне вирівнювання в осередках - % cellvalign;
  - Вертикальне вирівнювання в осередках ->

Початковий тег: обов'язковий, Кінцевий тег: заборонений

визначення атрибутів

span = число [CN]
Цей атрибут, значенням якого має бути ціле число більше нуля, визначає число стовпців, "spanned" елементом COL ; атрибути елемента COL поширюються на всі стовпці, які він spans. Значення за замовчуванням для цього атрибута - 1 (тобто елемент COL означає один стовпець). Якщо для атрибута span встановлено значення N> 1, атрибути поточного елемента COL поширюються на наступні N-1 стовпець.
width = multi-length [CN]
Цей атрибут визначає ширину кожного стовпця, spanned поточним елементом COL за умовчанням. Він має те ж значення, що і атрибут width для елемента COLGROUP і має над ним пріоритет.

Елемент COL дозволяє авторам групувати визначення атрибутів для стовпців таблиці. Атрибут COL НЕ групує стовпці структурно - цю роль грає елемент COLGROUP . Елементи COL є порожніми і служать тільки для підтримки атрибутів. Вони можуть знаходитися всередині або поза явною групи стовпців (тобто елементу COLGROUP ).

Атрибут width для елемента COL означає ширину кожного стовпця в span елемента.

Підрахунок числа стовпців в таблиці  

Є два способи визначення числа стовпців в таблиці (в порядку старшинства):

  1. Якщо елемент TABLE включає елементи COLGROUP або COL , агенти користувачів повинні підраховувати число стовпців, підсумовуючи наступні цифри:
    • Для кожного елемента COL - значення його атрибуту span (за замовчуванням 1).
    • Для кожного елемента COLGROUP , що містить принаймні один елемент COL - ігнорувати атрибут span для елемента COLGROUP . Для кожного елемента COL виконати обчислення з кроку 1.
    • Для кожного порожнього елемента COLGROUP - значення його атрибуту span (за замовчуванням 1).
  2. В іншому випадку, якщо елемент TABLE не містить елементів COLGROUP або COL , агенти користувачів визначати число стовпців з того, що необхідно для рядків. Число стовпців одно число стовпців, необхідних рядку з найбільшим числом стовпців, включаючи осередки, span декілька стовпців. Для будь-якого рядка, число стовпців в якій менше, кінець цього рядка буде доповнюватися порожніми осередками. "Кінець" рядки залежить від напрямку таблиці .

Якщо таблиця містить елементи 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>

Підрахунок ширини стовпців  

Автори можуть вказувати ширину стовпців трьома способами:

фіксована
Вказівка фіксованої ширини дається в пікселах (наприклад, width = "30"). Використання фіксованої ширини дозволяє використовувати послідовну генерацію.
В процентах
Вказівка ширини в процентах (наприклад, width = "20%") означає відсоток горизонтального простору, доступного для таблиці (між поточним лівим і правим полями, включаючи floats). Пам'ятайте, що цей простір не залежить від самої таблиці, тому вказівка ​​ширини в процентах дозволяє використовувати послідовну генерацію.
пропорційна
Вказівка пропорційної ширини (наприклад, width = "3 *") означає число частин горизонтального простору, необхідного для таблиці. Якщо ширина таблиці визначається як фіксоване значення (за допомогою атрибута width елемента 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> ... ... рядки ... </ 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>

Перші десять стовпців мають ширину 15 пікселів кожен. Останні два стовпці отримують по половині з решти 50 пікселів. Пам'ятайте, що елемент COL розташований так, що значення id можна вказати тільки для останніх двох стовпців.

Примітка. Хоча атрибут width елемента TABLE не є небажаним, авторам рекомендується використовувати для вказівки ширини таблиці стилів.

11.2.5 Рядки таблиці: елемент TR

  <! ELEMENT TR - O (TH | TD) + - рядок таблиці ->
 <! ATTLIST TR - рядок таблиці - % attrs;
  - % Coreattrs , % i18n , % events - % cellhalign;
  - Горизонтальне вирівнювання в осередках - % cellvalign;
  - Вертикальне вирівнювання в осередках ->

Початковий тег: обов'язковий, Кінцевий тег: не обов'язково

Елементи TR служать контейнерами для рядка елементів таблиці. Кінцевий тег можна опустити.

Ця проста таблиця складається з трьох рядків, кожна з яких починається з елемента TR :

  <TABLE summary = "У цій таблиці показано графік числа
  чашок кави, що випиваються кожним сенатором, тип
  кави (без кофеїну або звичайний) і наявність цукру. ">
 <CAPTION> Скільки чашок кави випиває кожен сенатор </ CAPTION>
 <TR> ... Рядок заголовка ... <TR> ... Перший рядок даних ... <TR> ... Другий рядок даних ... ... продовження таблиці ... </ TABLE>

11.2.6 Осередки таблиці: елементи TH і TD

  <! ELEMENT ( TH | TD ) - O ( % flow; ) * - осередок заголовка таблиці, осередок даних таблиці ->
 <! - Для більшості таблиць атрибут scope простіше, ніж атрибут axes ->
 <! ENTITY% Scope "(row | col | rowgroup | colgroup)">
 <! - TH використовується для заголовків, TD - для даних, але для осередків, службовців і тим, і іншим використовуйте TD ->
 <! ATTLIST (TH | TD) - заголовок осередку даних - % attrs;
  - % Coreattrs , % i18n , % events - abbr % Text;
  #IMPLIED - Скорочення для осередку заголовка - axis CDATA #IMPLIED - групи імен пов'язаних заголовків - headers IDREFS #IMPLIED - список id для осередків заголовків - scope % Scope;
  #IMPLIED - Область осередків заголовків - rowspan NUMBER 1 - число рядків, spanned осередком - colspan NUMBER 1 - число стовпців, spanned осередком - % cellhalign;
  - Горизонтальне вирівнювання в осередках - % cellvalign;
  - Вертикальне вирівнювання в осередках -
  >

Початковий тег: обов'язковий, Кінцевий тег: не обов'язково

визначення атрибутів

headers = idrefs [CS]
У цьому атрибуті вказується список осередків заголовків, які надають заголовну інформацію для поточної комірки даних. Значення цього атрибута є розділений пробілами список назв осередків; імена осередкам повинні даватися за допомогою атрибута id . Автори зазвичай використовують атрибут headers з метою допомогти невізуальні агентам користувачів в генерації заголовків осередків даних (наприклад, заголовок вимовляється перед прочитанням даних осередку), але цей атрибут може також використовуватися разом з таблицями стилів. Див. Також атрибут scope .
scope = ім'я області дії [CI]
Цей атрибут визначає набір осередків даних, для яких заголовна інформація задається поточним заголовком. Цей атрибут може використовуватися замість атрибута a href = "tables.shtml # adef-headers" class = "noxref"> headers, особливо в простих таблицях. Якщо цей атрибут використовується, він повинен мати одне з наступних значень:
  • row: В осередку представлена заголовна інформація для решти рядки, в якій міститься ця комірка (див. також розділ про напрямку таблиць ).
  • col: У поточному осередку представлена заголовна інформація для решти стовпчика, в якому міститься ця комірка.
  • rowgroup: В осередку представлена заголовна інформація для залишилася групи рядків , в якій міститься ця комірка.
  • colgroup: В осередку представлена заголовна інформація для залишилася групи стовпців , в якій міститься ця комірка.
abbr = текст [CS]
Цей атрибут слід використовувати для подання скороченої форми вмісту комірки; він може генеруватися агентами користувачів в підходящий момент замість вмісту комірки. Скорочені імена повинні бути коротше, і агенти користувачів можуть повторювати їх. Наприклад, синтезатори мови можуть генерувати скорочені заголовки, які стосуються певної осередку, перед генерацією вмісту комірки.
axis = cdata [CI]
Цей атрибут може використовуватися замість осередки в концептуальних категоріях, яка може використовуватися для формування axes в n-вимірному просторі. Агенти користувачів можуть давати користувачам доступ до цих категорій (наприклад, користувач може запитувати у агента все осередки, що належать до певної категорії, агент користувача може представляти таблицю в формі змісту і т.д.). Детальніше див. У розділі про категоризації осередків . Значення цього атрибута є список імен категорій, розділених комами.
rowspan = число [CN]
Цей атрибут визначає число рядків, spanned поточної осередком. За замовчуванням використовується значення один ( "1"). Значення нуль ( "0") означає, що осередок spans всі рядки від поточної до останнього рядка таблиці.
colspan = число [CN]
Цей атрибут визначає число стовпців, spanned поточної осередком. За замовчуванням використовується значення один ( "1"). Значення нуль ( "0") означає, що осередок spans всі стовпці від поточного до останнього стовпчика таблиці.
nowrap [CI]
Небажаний. Якщо цей логічний атрибут використовується, він повідомляє візуальним агентам користувачів про необхідність відключити автоматичне розбиття тексту для цього осередку. Для розбиття рядків замість цього атрибута повинні використовуватися таблиці стилів . Примітка. при неуважному використанні цей атрибут може привести до того, що осередки будуть дуже широкими.
width = пікселі [CN]
Небажаний. Цей атрибут дає агентам користувачів рекомендовану ширину осередку.
height = пікселі [CN]
Небажаний. Цей атрибут дає агентам користувачів рекомендовану висоту комірки.

Стовпчики таблиці можуть містити інформацію двох типів: заголовну інформацію і дані. Ця різниця дозволяє агентам користувачів генерувати осередки заголовків і даних по-різному навіть при відсутності таблиць стилів. Наприклад, візуальні агенти користувачів можуть представляти текст осередків заголовків жирним шрифтом. Синтезатори мови можуть виділяти заголовну інформацію голосом.

Елемент TH визначає осередок, що містить інформацію заголовка. Агентам користувачів доступні дві частини заголовної інформації: вміст елемента TH і значення атрибута abbr . Агенти користувачів повинні генерувати вміст комірки або значення атрибута abbr . Для візуальних пристроїв воно може мати сенс, якщо простору для генерації повного вмісту комірки недостатньо. Для невізуальних пристроїв abbr може використовуватися в якості скорочення для заголовків таблиць, коли вони генеруються разом з вмістом клітинок, до яких вони належать.

Атрибути headers і scope також дозволяють авторам допомогти невізуальні агентам користувачів в обробці інформації заголовка. Детальну інформацію та приклади див. Розділ про позначці осередків для невізуальних агентів користувачів .

Елемент TD визначає осередок, що містить дані.

Осередок може бути порожньою (тобто не містити даних).

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

 <TABLE summary="В этой таблице показан график числа
 чашек кофе, выпиваемых каждым сенатором, тип
 кофе (без кофеина или обычный) и наличие сахара.">
<CAPTION>Сколько чашек кофе выпивает каждый сенатор</CAPTION>
<TR>
 <TH>Имя</TH>
 <TH>Число чашек</TH>
 <TH>Тип кофе</TH>
 <TH>Сахар?</TH>
<TR>
 <TD>Т. Секстон</TD>
 <TD>10</TD>
 <TD>Эспрессо</TD>
 <TD>Нет</TD>
<TR>
 <TD>Дж. Диннен</TD>
 <TD>5</TD>
 <TD>Без кофеина</TD>
 <TD>Да</TD>
</TABLE>

Агент пользователя, выполняющий генерацию для терминала, может отобразить это следующим образом:

 Имя Число чашек Тип кофе Сахар?
Т. Секстон 10 Эспрессо Нет
Дж. Диннен 5 Без кофеина Да

Ячейки, span несколько строк или столбцов  

Ячейки могут span несколько строк или столбцов. Число строк или столбцов, spanned ячейкой, устанавливается с помощью атрибутов rowspan и colspan элементов TH и TD .

В этом определении таблицы мы указываем, что ячейка в четвертой строке во втором столбце span все три столбца, включая текущий.

 <TABLE border="1">
<CAPTION> Сколько чашек кофе выпивает каждый сенатор </CAPTION>
<TR><TH>Имя<TH>Число чашек<TH>Тип кофе<TH>Сахар?
<TR><TD>Т. Секстон<TD>10<TD>Эспрессо<TD>Нет
<TR><TD>Дж. Диннен<TD>5<TD>Без кофеина<TD>Да
<TR><TD>А. Сориа<TD colspan="3"><em>Нет данных</em>
</TABLE>

На терминале эта таблица может генерироваться следующим образом:

 Скільки чашок кави випиває кожен сенатор -------------------------------------------- - |  Ім'я | Число чашок | Тип кави | Цукор? |  ---------------------------------------------- | Т.  Секстон | 10 | Еспрессо | Ні |  ---------------------------------------------- | Дж.  Діннен | 5 | Без кофеїну | Так |  ---------------------------------------------- | А.  Соріано | відсутня |  ---------------------------------------------- 

У наступному прикладі показано (за допомогою кордонів таблиці), як визначення осередків, span кілька рядків або стовпців, впливають на визначення наступних осередків. Розгляньте наступне визначення таблиці:

  <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" spans першу і другу рядки, визначення другого рядка буде прийнято до уваги. Таким чином, другий елемент TD в рядку два насправді визначає третій осередок рядка. Візуально на терміналі таблиця може генеруватися в такий спосіб:

  -------------
 |  1 |  2 |  3 | 
 ---- |  | ----
 |  4 |  |  6 |
 ---- | --- | ----
 |  7 |  8 |  9 |
 -------------

а графічний агент користувача може уявити її так:

Таблиця з rowspan = 2

Пам'ятайте, що, якщо елемент 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" spans два стовпці, так що другий елемент TD в рядку насправді визначає третій осередок ( "6"):

  -------------
 |  1 |  2 |  3 | 
 -------- | ----
 |  4 |  6 |
 -------- | ----
 |  7 |  8 |  9 |
 -------------

Графічний агент користувача може уявити це в такий спосіб:

Таблиця з colspan = 2

Визначення перекриваються осередків є помилкою. Агенти користувачів можуть по-різному обробляти цю помилку (наприклад, вони можуть по-різному генерувати такі таблиці).

У наступному прикладі неприпустимого використання показано, як можна створити перекриваються осередки. У цій таблиці осередок "5" spans два рядки, а осередок "7" spans два стовпці, так що вони обидві використовують клітинку між "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>

11.3 Форматування таблиць візуальними агентами користувачів

Примітка. У наступних розділах описуються атрибути таблиць HTML, що відносяться до візуального форматування. Хоча таблиці стилів пропонують кращі можливості управління візуальним форматуванням таблиць, під час написання цієї специфікації в [CSS1] не було механізмів для управління всіма аспектами візуального форматування таблиць.

У HTML 4.0 є механізми для управління:

11.3.1 Межі і rules

Наступні атрибути впливають на внутрішні кадри і внутрішні rules таблиці.

визначення атрибутів

frame = void | above | below | hsides | lhs | rhs | vsides | box | border [CI]
Цей атрибут вказує, які сторони кадру, навколишнього таблицю, будуть видимі. Можливі значення:
  • void: Сторін немає. Це значення використовується за умовчанням.
  • above: Тільки верхня частина.
  • below: Тільки нижня частина.
  • hsides: Тільки верхня і нижня частина.
  • vsides: Тільки ліва і права частини.
  • lhs: Тільки ліва частина.
  • rhs: Тільки права частина.
  • box: Всі чотири частини.
  • border: Всі чотири частини.
rules = none | groups | rows | cols | all [CI]
Цей атрибут вказує, які rules будуть відображатися між осередками. Генерація rules залежить від агента користувача. Можливі значення:
  • none: Немає rules. Це значення використовується за умовчанням.
  • groups: Rules відображаються тільки між групами рядків (див. THEAD , TFOOT , and TBODY ) і групами стовпців (див. COLGROUP and COL ).
  • rows: Rules відображаються тільки між рядками.
  • cols: Rules відображаються тільки між стовпцями.
  • all: Rules відображаються між рядками і стовпцями.
border = пікселі [CN]
Цей атрибут задає ширину (тільки в пікселах) кадру навколо таблиці (докладніше про це атрибуті см. В Примітці нижче).

Для простоти відмінності осередків в таблиці ми можемо встановлювати атрибут border елемента TABLE . Розглянемо попередній приклад:

  <TABLE border = "1" 
  summary = "У цій таблиці наведено дані
  про кількість чашок кави, споживаної кожним 
  сенатором, типі кави (без кофеїну або звичайний) 
  і наявності цукру. ">
 <CAPTION> Скільки чашок кави випиває кожен сенатор </ CAPTION>
 <TR>
  <TH> Ім'я </ TH>
  <TH> Число чашок </ TH>
  <TH> Тип кави </ TH>
  <TH> Цукор? </ TH>
 <TR>
  <TD> Т.  Секстон </ TD>
  <TD> 10 </ TD>
  <TD> Еспрессо </ TD>
  <TD> Ні </ TD>
 <TR>
  <TD> Дж.  Діннен </ TD>
  <TD> 5 </ TD>
  <TD> Без кофеїну </ TD>
  <TD> Так </ TD>
 </ TABLE>

У наступному прикладі агент користувача повинен відобразити кордон шириною в п'ять пікселів зліва і праворуч від таблиці і rules між стовпцями.

  <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>

Наступні настройки повинні розглядатися агентами користувачів для забезпечення сумісності з попередніми версіями.

  • Налаштування border = "0" має на увазі frame = "void" і, якщо не вказано інше, rules = "none".
  • Інші значення border припускають frame = "border" і, якщо не вказано інше, rules = "all".
  • Значення "border" в початковому тегу елемента TABLE тлумачитиметься як значення атрибута frame . Передбачається, що rules = "all" і використовується деякий стандартне значення (не нульовий) для атрибута border .

Наприклад, такі визначення еквівалентні:

  <TABLE border = "2">
 <TABLE border = "2" frame = "border" rules = "all">

наступним:

  <TABLE border>
 <TABLE frame = "border" rules = "all">

Примітка. Атрибут border також визначає відображення кордону для елементів OBJECT і IMG , але приймає для цих елементів різні значення.

11.3.2 Горизонтальний і вертикальний вирівнювання

Для різних елементів таблиці можна встановити наступні атрибути (див. Їх визначення).

  <! - Атрибути горизонтального вирівнювання вмісту осередку ->
 <! ENTITY% cellhalign " align (left | center | right | justify | char ) #IMPLIED char % Character; #IMPLIED - символи вирівнювання, наприклад char = ':' - charoff % Length; #IMPLIED - відступ символу вирівнювання - "> <! - атрибути вертикального вирівнювання вмісту осередку -> <! ENTITY% cellvalign" valign (top | middle | bottom | baseline) #IMPLIED ">

визначення атрибутів

align = left | center | right | justify | char [CI]
Цей атрибут задає вирівнювання даних і вимкнення тексту в осередку. Можливі значення:
  • left: Вирівнювання даних по лівому краю / випрямлення тексту вліво. Це значення використовується за умовчанням.
  • center: Вирівнювання даних по центру / випрямлення тексту по центру. Це значення використовується за умовчанням в заголовках таблиць.
  • right: Вирівнювання даних по правому краю / випрямлення тексту вправо.
  • justify: Вирівнювання по обох краях.
  • char: Вирівнювання тексту навколо зазначеного символу.
valign = top | middle | bottom | baseline [CI]
Цей атрибут задає вертикальне положення даних в осередку. Можливі значення:
  • top: Дані осередки зсуваються вгору.
  • middle: Дані осередки центруються вертикально. Це значення використовується за умовчанням.
  • bottom: Дані в осередку зсуваються вниз.
  • baseline: У всіх осередках рядка, в якій знаходиться осередок, для якої встановлено атрибут valign, текст повинен розташовуватися так, щоб перший рядок виявлялася на базовій лінії, загальною для всіх осередків в рядку. Це обмеження не застосовується до наступних текстовим рядках в цьому осередку.
char = символ [CN]
Цей атрибут визначає окремий символ у фрагменті тексту, що служить віссю для вирівнювання. За замовчуванням в якості значення цього атрибута використовується символ десяткового дробу для поточної мови, встановленого відповідно до атрибутом lang (наприклад, точка ( ".") В англійській мові і кома ( ",") у французькому). Агенти користувача не обов'язково повинні підтримувати цей атрибут.
charoff = довжина [CN]
Якщо цей атрибут заданий, він визначає відступ першого примірника символу вирівнювання в кожному рядку. Якщо в будівництв немає символу вирівнювання, вона горизонтально зсувається до кінця в позиції вирівнювання.

Якщо для встановлення зміщення символу вирівнювання використовується атрибут charoff , напрямок зміщення визначається поточним текстом невірно (встановлюються атрибутом dir ). В тексту, спрямованих зліва направо (за замовчуванням), зміщення проводиться від лівого поля. У текстах, спрямованих справа наліво, зміщення проводиться від правого поля. Агенти користувачів не обов'язково повинні підтримувати цей атрибут.

У цьому прикладі грошові одиниці вирівняні по десятковій крапці. Ми явно встановили вирівнювання по символу ".".

  <TABLE border = "1">
 <COLGROUP>
 <COL> <COL align = "char" char = ".">
 <THEAD>
 <TR> <TH> Овочі <TH> Ціна за кг
 <TBODY>
 <TR> <TD> Lettuce <TD> $ 1
 <TR> <TD> Silver carrots <TD> $ 10.50
 <TR> <TD> Golden turnips <TD> $ 100.30
 </ TABLE>

Відформатована таблиця може виглядати наступним чином:

  ------------------------------
 |  Овочі | Ціна за кг |
 | -------------- | ------------- |
 | Lettuce |  $ 1 |
 | -------------- | ------------- |
 | Silver carrots |  $ 10.50 |
 | -------------- | ------------- |
 | Golden turnips |  $ 100.30 |
 ------------------------------

Якщо в комірці міститься кілька примірників символів вирівнювання, заданих в атрибуті char , і вміст комірки переноситься на інший рядок, поведінка агента користувача не визначено. Тому автори повинні уважно використовувати атрибут char .

Примітка. Візуальні агенти користувачів зазвичай генерують елементи TH вирівняними вертикально і горизонтально по центру з використанням напівжирного шрифту.

Спадкування параметрів вирівнювання  

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

Пріоритет (від вищого до нижчого) атрибутів align , char і charoff наступний:

  1. Атрибут вирівнювання, встановлений для елемента в даних осередку (наприклад, P ).
  2. Атрибут вирівнювання, встановлений в осередку ( TH і TD ).
  3. Атрибут вирівнювання, встановлений в елементі угрупування стовпців ( COL і COLGROUP ). Якщо осередок є частиною span з декількох стовпців, властивість вирівнювання успадковується від визначення осередку на початку span.
  4. Атрибут вирівнювання, встановлений в елементі рядка або угруповання рядків ( TR , THEAD , TFOOT і TBODY ). Якщо осередок є частиною span з кількох рядків, властивість вирівнювання успадковується від визначення осередку на початку span.
  5. Атрибут вирівнювання, встановлений в таблиці ( TABLE ).
  6. Значення вирівнювання за замовчуванням.

Пріоритет (від вищого до нижчого) атрибута valign (а також інших успадкованих атрибутів lang , dir і style ) наступний:

  1. Атрибут, встановлений для елемента в даних осередку (наприклад, P ).
  2. Атрибут, встановлений для осередку ( TH і TD ).
  3. Атрибут, встановлений для елемента рядка або угруповання рядків ( TR , THEAD , TFOOT і TBODY ). Якщо осередок є частиною span з багатьох рядків, значення атрибута успадковується від визначення осередку на початку span.
  4. Атрибут, встановлений для елемента угруповання стовпців ( COL і COLGROUP ). Якщо осередок є частиною span з багатьох стовпців, значення атрибута успадковується від визначення осередку на початку span.
  5. Атрибут, встановлений для таблиці ( TABLE ).
  6. Значення атрибута за замовчуванням.

Крім того, при генерації осередків горизонтальне вирівнювання визначається спочатку для стовпців, а потім для рядків, а вертикальне вирівнювання - для рядків, а потім для стовпців.

Вирівнювання осередків за замовчуванням залежить від агента користувача. Однак агенти користувача повинні підставляти атрибут за умовчанням відповідно поточному напрямку (тобто не просто "left" у всіх випадках).

Агенти користувача, які не підтримують значення "justify" атрибута align повинні використовувати значення, відповідне напрямку.

Примітка. Пам'ятайте, що осередок може успадковувати атрибут немає від батька, а від першого осередку в span. Це є винятком із загальних правил спадкування атрибутів.

11.3.3 Поля осередку

визначення атрибутів

cellspacing = довжина [CN]
Цей атрибут визначає простір, яке агент користувача повинен залишити між лівою стороною таблиці і лівим краєм крайнього лівого стовпця, верхньою межею таблиці і верхнім краєм самої верхньої рядки і так далі для правої і нижньої меж таблиці. Цей атрибут також визначає простір між осередками.
cellpadding = довжина [CN]
Цей атрибут визначає простір між кордоном осередки і її вмістом. Якщо значення цього атрибута вказано в пікселах, всі чотири поля повинні мати цей розмір. Якщо значення атрибута вказано у відсотках, верхнє і нижнє поля повинні бути відокремлені від вмісту на однаковий відсоток доступного вертикального простору, а ліве і праве поля повинні бути відокремлені від вмісту на однаковий відсоток доступного горизонтального простору.

Ці два атрибути керують відстанню між осередками і всередині них. Вони пояснюються на наступній ілюстрації:

Атрибути cellspacing і cellpadding.

У наступному прикладі атрибут cellspacing задає відстань в двадцять пікселів між осередками і від краю таблиці. Атрибут cellpadding визначає, що верхнє і нижнє поля осередку відокремлюються від вмісту комірки на 10% доступного вертикального простору (всього 20%). Точно так же, ліве і праве поле осередки будуть відокремлені від вмісту на 10% доступного горизонтального простору (всього 20%).

  <TABLE cellspacing = "20" cellpadding = "20%">
 <TR> <TD> Данние1 <TD> Данние2 <TD> Данние3
 </ TABLE>

Якщо таблиця або даний стовпець має фіксовану ширину, cellspacing і cellpadding можуть займати більше простору, ніж призначено. Агенти користувачів можуть давати цим атрибутам пріоритет над атрибутом width в разі конфлікту, але вони не обов'язково повинні це робити.

11.4 Генерація таблиць невізуальними агентами користувачів

11.4.1 Зв'язок інформації заголовка з осередками даних

Невізуальні агенти користувачів, такі як синтезатори мови і пристрої на базі абетки Бройля, можуть використовувати такі атрибути елементів TD і TH для більш intuitive генерації елементів таблиці:

  • Для даного осередку даних в атрибуті headers перераховано, в яких осередках знаходиться pertinent інформація заголовка. З цією метою кожна клітинка заголовка повинна отримати ім'я з використанням атрибута id . Пам'ятайте, що не завжди можливо явно розділити осередки на заголовки і дані. У таких осередок слід використовувати елемент TD разом з атрибутами id або scope .
  • Для даного осередку заголовка атрибут scope повідомляє агенту користувача осередки даних, інформація для яких вказується цим заголовком. Автори можуть використовувати цей атрибут замість headers в залежності від того, що більш зручно; ці два атрибути мають одну і ту ж функцію. Атрибут headers зазвичай потрібен, якщо заголовки поміщаються в нестандартному положенні по відношенню до даних, до яких вони застосовуються.
  • Атрибут abbr задає скорочений заголовок для осередків заголовків, так що агенти користувача можуть швидше генерувати інформацію заголовка.

У наступному прикладі ми призначаємо інформацію заголовка осередкам, встановлюючи атрибут headers . Кожна клітинка в одному і тому ж стовпці відноситься до однієї і тієї ж осередку заголовка (за допомогою атрибута id ).

  <TABLE border = "1" 
  summary = "У цій таблиці наводиться інформація про те, скільки
  чашок кави випиває кожен сенатор, про типу кави
  (Без кофеїну або звичайний) і про цукор. ">
 <CAPTION> Скільки чашок кави випиває кожен сенатор </ CAPTION>
 <TR>
  <TH id = "t1"> Ім'я </ TH>
  <TH id = "t2"> Скільки </ TH>
  <TH id = "t3" abbr = "Тип"> Тип кави </ TH>
  <TH id = "t4"> Цукор? </ TH>
 <TR>
  <TD headers = "t1"> Т.  Секстон </ TD>
  <TD headers = "t2"> 10 </ TD>
  <TD headers = "t3"> Еспрессо </ TD>
  <TD headers = "t4"> Ні </ TD>
 <TR>
  <TD headers = "t1"> Дж.  Діннен </ TD>
  <TD headers = "t2"> 5 </ TD>
  <TD headers = "t3"> Без кофеїну </ TD>
  <TD headers = "t4"> Так </ TD>
 </ TABLE>

Синтезатор мови може генерувати цю таблицю наступним чином:

  Тема: Скільки чашок кави випиває кожен сенатор
 Summary: У цій таблиці наводиться інформація про те, скільки
  чашок кави випиває кожен сенатор, про типу кави
  (Без кофеїну або звичайний) і про цукор.
 Ім'я: Т. Секстон, Скільки: 10, Тип: Еспрессо, Цукор: Немає
 Ім'я: Дж. Діннен, Скільки: 5, Тип: Без кофеїну, Цукор: Так

Зауважте, що заголовок "Тип кави" скорочується до "Тип" за допомогою атрибута abbr .

Ось той же приклад, який використовує атрибут scope замість атрибута headers . Зверніть увагу на значення "col" для атрибута scope , що означає "все осередки в поточному стовпці":

  <TABLE border = "1" 
  summary = "У цій таблиці наводиться інформація про те, скільки
  чашок кави випиває кожен сенатор, про типу кави
  (Без кофеїну або звичайний) і про цукор. ">
 <CAPTION> Скільки чашок кави випиває кожен сенатор </ CAPTION>
 <TR>
  <TH scope = "col"> Ім'я </ TH>
  <TH scope = "col"> Скільки </ TH>
  <TH scope = "col" abbr = "Тип"> Тип кави </ TH>
  <TH scope = "col"> Цукор? </ TH>
 <TR>
  <TD> Т.  Секстон </ TD>
  <TD> 10 </ TD>
  <TD> Еспрессо </ TD>
  <TD> Ні </ TD>
 <TR>
  <TD> Дж.  Діннен </ TD>
  <TD> 5 </ TD>
  <TD> Без кофеїну </ TD>
  <TD> Так </ TD>
 </ TABLE>

Нижче наводиться дещо складніший приклад, в якому показані інші значення атрибута scope :

 <TABLE border = "1" cellpadding = "5" cellspacing = "2"
  summary = "Історичні курси, пропоновані округу Бат,
  впорядковані за назвою, викладачеві, опису, 
  коду та вартості ">
  <TR>
  <TH colspan = "5" scope = "colgroup"> Курси - Бат, осінь 1997 г. </ TH>
  </ TR>
  <TR>
  <TH scope = "col" abbr = "Назва"> Назва курсу </ TH>
  <TH scope = "col" abbr = "Викладач"> Викладач курсу </ TH>
  <TH scope = "col"> Опис </ TH>
  <TH scope = "col"> Код </ TH>
  <TH scope = "col"> Вартість </ TH>
  </ TR>
  <TR>
  <TD scope = "row"> Після Громадянської війни </ TD>
  <TD> Доктор Джон Раутон </ TD>
  <TD>
  В цьому курсі вивчаються turbulent роки в Англії після 1646 року.
  <EM> 6 щотижневих занять, починаючи з понеділка, 13 жовтня. </ EM>
  </ TD>
  <TD> H27 </ TD>
  <TD> & pound; 32 </ TD>
  </ TR>
  <TR>
  <TD scope = "row"> Англо-саксонська Англія - ​​введення </ TD>
  <TD> Марк Коттл </ TD>
  <TD>
  Одноденний курс - введення в ранньосередньовічної період
  Реконструкції англо-саксонського суспільства.  <EM> П'ятниця, 18
  жовтня. </ EM>
  </ TD>
  <TD> H28 </ TD>
  <TD> & pound; 18 </ TD>
  </ TR>
  <TR>
  <TD scope = "row"> Греція </ TD>
  <TD> Валері Лоренц </ TD>
  <TD>
  Колиска демократії, філософії, серце театру, батьківщина аргументу.  Це могли зробити римляни, якби греки не випередили їх.  <EM> Суботня школа 25 жовтня 1997 року </ EM>
  </ TD>
  <TD> H30 </ TD>
  <TD> & pound; 18 </ TD>
  </ TR>
 </ TABLE>

Графічний агент користувача може згенерувати це наступним чином:

Таблиця з об'єднаними осередками

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

11.4.2 Категоризація осередків

Можливо, користувачі під час перегляду цього таблицю з використанням мовних агентів, захочуть почути пояснення до вмістом осередки на додаток до самої інформації. Один із способів, яким агент користувача може забезпечити пояснення, - вимовляти відповідну заголовну інформацію перед проголошенням інформації, що є вмістом комірки (див. Розділ про зв'язку заголовної інформації з осередками даних ).

Користувачам може також знадобитися інформація про кількох осередках, і в цьому випадку заголовна інформація, задана на рівні осередку (з допомогою headers , scope , і abbr ) може не відповідати контексту. Розглянемо наступну таблицю з класифікацією видатків на їжу, готелі і транспорт в двох пунктах (Сан-Хосе і Сіетлі) за кілька днів:

Таблиця з переліком витрат на відрядження в два пункти: Сан-Хосе і Сіетл, за датою і категорії (їжа, готель і транспорт), показана з підзаголовками

Користувачам знадобиться витягти інформацію з таблиці в формі запитів:

  • "Скільки всього грошей я витратив на їжу?"
  • "Скільки я витратив на їжу 25 серпня?"
  • "Скільки всього грошей я витратив в Сан-Хосе?"

Кожен запит має на увазі обчислення, що виконуються агентом користувача, які можуть зачіпати кілька або жодної клітинки. Щоб визначити, наприклад, витрати на їжу 25 серпня, агент користувача повинен знати, які елементи таблиці відносяться до "Єди" (всі ці осередки), а яка до "дат" (25 серпня), і знайти перетин цих двох наборів.

Для прийняття запиту такого типу модель таблиць HTML 4.0 дозволяє авторам поміщати заголовки і дані осередків в категорії. Наприклад, в таблиці витрат на відрядження автор може згрупувати осередки заголовків "Сан-Хосе" і "Сіетл" в категорію "Пункт", заголовки "Їжа", "Готелі" та "Транспорт" в категорію "Витрати", а чотири дні в категорію "Дата". Тоді попередні три питання матимуть таке значення:

  • "Скільки всього грошей я витратив на їжу?" означає "Все осередки даних з категорії" Витрати = Їжа "?
  • "Скільки я витратив на їжу 25 серпня?" означає "Все осередки даних з категорій" Витрати = Їжа "і" Дата = 25-серпні-1997 "?
  • "Скільки всього грошей я витратив в Сан-Хосе?" означає "Все осередки даних з категорій" Витрати = Їжа, Готелі, Транспорт "і" Пункт = Сан-Хосе "?

Автори визначають категорії заголовків або осередків даних, встановлюючи для осередку атрибут axis . Наприклад, в таблиці витрат на відрядження осередок, що містить інформацію "Сан-Хосе" може бути поміщена в категорію "Пункт" в такий спосіб:

  <TH id = "a6" axis = "пункт"> Сан-Хосе </ TH>

Кожна осередок, що містить інформацію, що відноситься до "Сан-Хосе", повинна посилатися на цей осередок заголовка за допомогою атрибута headers або scope . Таким чином, витрати на їжу 25-серпні-1997 повинні мати посилання на атрибут id (значення якого тут - "a6") осередки заголовка "Сан-Хосе":

 
  <TD headers = "a6"> 37.74 </ TD>

Кожен атрибут headers містить список посилань id . Автори таким чином можуть визначати категорії для даної комірки за допомогою даного ряду способів (або along any number of "headers", hence the name).

Нижче в таблиці витрат на відрядження вказана інформація про категорії:

  <TABLE border = "1"
  summary = "У цій таблиці наводяться відомості про 
  витрати на відрядження в серпні 
  в Сан-Хосе і Сіетлі ">
 <CAPTION>
  Звіт про витрати на відрядження
 </ CAPTION>
 <TR>
  <TH> </ TH>
  <TH id = "a2" axis = "витрати"> Їжа </ TH>
  <TH id = "a3" axis = "витрати"> Готелі </ TH>
  <TH id = "a4" axis = "витрати"> Транспорт </ TH>
  <TD> разом </ TD>
 </ TR>
 <TR>
  <TH id = "a6" axis = "пункт"> Сан-Хосе </ TH>
  <TH> </ TH>
  <TH> </ TH>
  <TH> </ TH>
  <TD> </ TD>
 </ TR>
 <TR>
  <TD id = "a7" axis = "дата"> 25-серпні-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 = "дата"> 26-серпні-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> разом </ TD>
  <TD> 65.02 </ TD>
  <TD> 224.00 </ TD>
  <TD> 90.00 </ TD>
  <TD> 379.02 </ TD>
 </ TR>
 <TR>
  <TH id = "a10" axis = "пункт"> Сіетл </ TH>
  <TH> </ TH>
  <TH> </ TH>
  <TH> </ TH>
  <TD> </ TD>
 </ TR>
 <TR>
  <TD id = "a11" axis = "дата"> 27-серпні-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 = "дата"> 28-Серпня-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> разом </ TD>
  <TD> 131.25 </ TD>
  <TD> 218.00 </ TD>
  <TD> 72.00 </ TD>
  <TD> 421.25 </ TD>
 </ TR>
 <TR>
  <TH> Всього </ TH>
  <TD> 196.27 </ TD>
  <TD> 442.00 </ TD>
  <TD> 162.00 </ TD>
  <TD> 800.27 </ TD>
 </ TR>
 </ TABLE>

Зверніть увагу на те, що така розмітка таблиці також дозволяє агентам користувачів не збивати користувачів з пантелику непотрібною інформацією. Наприклад, якщо синтезатор мови повинен був вимовити все цифри з шпальти "Їжа" цієї таблиці в відповідь на запит "Всі витрати на їжу?", Користувач не зміг би відрізнити денні витрати від підсумкової суми. За допомогою ретельної категоризації даних автори дозволяють агентам користувачів робити важливі семантичні відмінності при генерації.

Звичайно, автори не обмежені в категоризації інформації в таблиці. У таблиці витрат на відрядження, наприклад, ми можемо ввести додаткові категорії "разом" і "всього".

Дана специфікація не виставляє вимогу до агентам користувачів по обробці інформації, що надається атрибутом axis , а також не дає ніяких рекомендацій щодо подання агентами користувачів інформації з атрибута axis або специфікації запитів користувачами цієї інформації у агентів.

Однак агенти користувачів, особливо синтезатори мови, можуть виділяти інформацію, загальну для декількох осередків, які є результатами запиту. Наприклад, якщо користувач запитує "Скільки всього грошей я витратив на їжу в Сан-Хосе?", Агент користувача повинен визначити відповідні осередки (25-Серпня-1997: 37.74, 26-Серпня-1997: 27.28), а потім згенерувати інформацію. Агент користувача може вимовити наступну інформацію:

  Пункт: Сан-Хосе.  Дата: 25-серпні-1 997.  Витрати, Їжа: 37.74
  Пункт: Сан-Хосе.  Дата: 26-серпні-1 997.  Витрати, Їжа: 27.28

або більш компактно:

  Сан-Хосе, 25-серпні-1997, Їжа: 37.74
  Сан-Хосе, 26-серпні-1997, Їжа: 27.28

Ще більш економічна генерація може виділити ще більш загальну інформацію і змінити таким чином її:

  Сан-Хосе, Їжа, 25-серпні-1997: Додати 37.74
  26-серпні-1997: Додати 27.28

Агенти користувачів, які підтримують генерацію такого типу, повинні забезпечувати можливості налаштування генерації (наприклад, за допомогою таблиць стилів).

11.4.3 Алгоритм пошуку заголовної інформації

У відсутності заголовної інформації в атрибуті scope або headers агенти користувачів можуть становити цю інформацію у відповідності з наступним алгоритмом. Метою алгоритму є знаходження впорядкованого списку заголовків. (В наступному описі алгоритму прийнято напрямок таблиці зліва направо.)

  • Спочатку виконується пошук вліво від позиції комірки для визначення осередку заголовка рядка. Потім виконується пошук вгору для визначення осередку заголовка стовпчика. Пошук в заданому напрямку припиняється, якщо досягнуто край таблиці або виявлена ​​осередок даних після осередки заголовка.
  • Заголовки рядків поміщаються в список в тому порядку, в якому вони розташовані в таблиці. Для таблиць, спрямованих зліва направо, заголовки поміщаються зліва направо.
  • Заголовки стовпців поміщаються після заголовків рядків, в тому порядку, в якому вони розташовані в таблиці, зверху вниз.
  • Якщо для комірки заголовка встановлений атрибут headers , заголовки, на які посилається цей атрибут, поміщаються в список, і пошук для поточного напрямку припиняється.
  • Осередки TD , в яких встановлюється атрибут axis , обробляються так само, як і осередку заголовків.

11.5 Приклад таблиці

У цьому прикладі показані згруповані рядки і стовпці. Приклад взятий з книги "Розробка інтернаціонального програмного забезпечення" Надін Кено.

В "форматі ascii" наступна таблиця:

  <TABLE border = "2" frame = "hsides" rules = "groups"
  summary = "Підтримка кодових сторінок в різних версіях MS Windows.">
 <CAPTION> ПІДТРИМКА КОДОВИХ СТОРІНОК В MICROSOFT WINDOWS </ CAPTION>
 <COLGROUP align = "center">
 <COLGROUP align = "left">
 <COLGROUP align = "center" span = "2">
 <COLGROUP align = "center" span = "3">
 <THEAD valign = "top">
 <TR>
 <TH> ВД кодової <BR> сторінки
 <TH> Назва
 <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 Східноєвропейська <TD> X <TD> <TD> X <TD> X <TD> X
 <TR> <TD> тисяча двісті п'ятьдесят один <TD> Windows 3.1 Кирилиця <TD> X <TD> <TD> X <TD> X <TD> X
 <TR> <TD> тисяча двісті п'ятьдесят-дві <TD> Windows 3.1 США (ANSI) <TD> X <TD> <TD> X <TD> X <TD> X
 <TR> <TD> тисячу двісті п'ятьдесят-три <TD> Windows 3.1 Грецька <TD> X <TD> <TD> X <TD> X <TD> X
 <TR> <TD> 1254 <TD> Windows 3.1 Турецька <TD> X <TD> <TD> X <TD> X <TD> X
 <TR> <TD> 1255 <TD> Іврит <TD> X <TD> <TD> <TD> <TD> X
 <TR> <TD> тисяча двісті п'ятьдесят шість <TD> Арабська <TD> X <TD> <TD> <TD> <TD> X
 <TR> <TD> тисячі двісті п'ятьдесят-сім <TD> Балтійська <TD> X <TD> <TD> <TD> <TD> X
 <TR> <TD> одна тисяча триста шістьдесят одна <TD> Корейська (Johab) <TD> X <TD> <TD> <TD> ** <TD> X
 <TBODY>
 <TR> <TD> 437 <TD> США MS-DOS <TD> <TD> X <TD> X <TD> X <TD> X
 <TR> <TD> 708 <TD> Арабська (ASMO 708) <TD> <TD> X <TD> <TD> <TD> X
 <TR> <TD> 709 <TD> Арабська (ASMO 449+, BCON V4) <TD> <TD> X <TD> <TD> <TD> X
 <TR> <TD> 710 <TD> Арабська (Прозора арабська) <TD> <TD> X <TD> <TD> <TD> X
 <TR> <TD> 720 <TD> Арабська (Прозора ASMO) <TD> <TD> X <TD> <TD> <TD> X
 </ TABLE>

може бути згенерована наступним чином:

  ПІДТРИМКА КОДОВИХ СТОРІНОК В MICROSOFT WINDOWS 
 ================================================== ===============================
 ВД кодової |  Назва |  ACP OEMCP |  Windows Windows Windows
 сторінки |  |  |  NT 3.1 NT 3.51 95
 -------------------------------------------------- -------------------------------
  1200 |  Unicode (BMP of ISO 10646) |  |  XX *
  1250 |  Windows 3.1 Східноєвропейська |  X |  XXX
  1251 |  Windows 3.1 Кирилиця |  X |  XXX
  тисяча двісті п'ятьдесят дві |  Windows 3.1 США (ANSI) |  X |  XXX
  тисяча двісті п'ятьдесят три |  Windows 3.1 Грецька |  X |  XXX
  1 254 |  Windows 3.1 Турецька |  X |  XXX
  тисяча двісті п'ятьдесят-п'ять |  іврит |  X |  X
  1256 |  Арабська |  X |  X
  1 257 |  Балтійська |  X |  X
  1361 |  Корейська (Johab) |  X |  ** X
 -------------------------------------------------- -----------------------------
  437 |  США MS-DOS |  X |  XXX
  708 |  Арабська (ASMO 708) |  X |  X
  709 |  Арабська (ASMO 449+, BCON V4) |  X |  X
  710 |  Арабська (Прозора арабська) |  X |  X
  720 |  Арабська (Прозора ASMO) |  X |  X
 ================================================== =============================

Графічний агент користувача може згенерувати її наступним чином:

Таблиця зі згрупованими рядками і стовпцями

В даному прикладі показано, як можна використовувати COLGROUP для угруповання стовпців і установки вирівнювання стовпців за умовчанням. Точно так же TBODY використовується для угруповання рядків. Атрибути frame і rules повідомляють агенту користувача, які кордону і rules повинні генеруватися.