17. Таблиці.

17. Таблиці.
17.5.1. Табличні шари і прозорість.
17.5.2. Алгоритми для ширини таблиці: властивість 'table-layout'.
Фіксована розмітка таблиці.
Автоматична розмітка таблиці.
17.5.3. Алгоритми для висоти таблиці.
17.5.4. Горизонтальне вирівнювання в колонці.
17.5.5. Динамічні ефекти для рядів і колонок.

17. Таблиці.

Подібно до інших елементів мови документа, внутрішні табличні елементи генерують прямокутні блоки з вмістом, відступами і кордонами. Але, вони не мають полів.

Візуальна розмітка цих блоків управляється прямокутником (нерівномірної гратами рядів і колонок). Кожен блок займає все осередки решітки, визначені відповідно до наступних правил. Ці правила не застосовуються для HTML 4.0 або більш ранніх версій; тому HTML використовує свої власні обмеження для рядів і колонок.

Кожен блок рядів займає один ряд осередків решітки. Разом блоки рядів заповнюють таблицю з верху вниз в порядку, який вони займають в документі джерелі (тобто таблиця займає точно стільки рядів решітки, скільки існує елементів рядів).
Група рядів займає ті ж осередку решітки, що і ряди, які вона містить.
Блок колонок займає одну або кілька колонок осередків решітки. Блоки колонок розміщуються послідовно за кожним іншим в порядку, який вони займають. Перший блок колонок може бути або ліворуч, або праворуч, залежно від значення властивості таблиці 'direction'.
Група колонок займає ті ж осередку решітки, що і колонки, які вона містить.
Осередки можуть займати кілька рядів або колонок. (Хоча CSS2 не визначають, як кількість зайнятих рядів або колонок визначаються, пристрій виведення може мати спеціальні відомості про документ джерелі; майбутні версії CSS можливо нададуть спосіб виразити це в синтаксисі). Кожна клітинка є прямокутним блоком з шириною і висотою однієї або декількох осередків решітки. Верхній ряд цього прямокутника знаходиться в ряду, визначеному батьківським елементом осередку. Прямокутник повинен бути якнайдалі вліво, але він не може перекриватися з іншим блоком осередки і повинен бути праворуч від всіх осередків в тому ряду, який знаходиться раніше в документі джерелі. (Це обмеження зберігається, якщо властивість таблиці 'direction' встановлено як 'ltr'; якщо 'direction' - 'rtl', то переставте "ліво" і "право" в попередньому реченні).
Блок комірок не може розширюватися за останній блок рядів таблиці або групи рядів; пристрою виведення повинні вкорочувати його до повної підгонки.

Зверніть увагу. Стовпчики таблиці можуть позиціонуватися щодо і абсолютно. Але, не рекомендується: позиціонування і плаваюче зміщення блоку з його розташування, що впливає на вирівнювання таблиці.

Нижче наведено два приклади. Перший - для HTML-документа:

Друга таблиця форматується, як на малюнку справа. Але, візуалізація HTML-таблиці точно не визначена в HTML, а CSS не намагається визначити її. Пристрої виведення вільні в її візуалізації, наприклад, на малюнку зліва.

D
Зліва - одна можлива візуалізація неправильної таблиці HTML 4.0; праворуч - тільки можливе форматування схожою таблиці, не мовою HTML.

17.5.1. Табличні шари і прозорість.

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

D
Схема табличних шарів.

Самий нижній шар - це площина, що представляє сам табличний блок. Подібно до всіх блокам, він може бути прозорим.
Наступний шар містить групу колонок. Групи колонок такої ж висоти, як і таблиця, але їм не потрібно покривати всю таблицю горизонтально.
На вершині групи колонок знаходяться області, що представляють блоки колонок. Подібно групам колонок, колонки такої ж висоти, як і таблиця, але їм не потрібно покривати всю таблицю горизонтально.
Наступний - це шар, що містить групу рядів. Кожна група рядів має таку ж ширину, що і таблиця. Разом групи рядів повністю покривають таблицю зверху до дна.
Наступний шар містить ряди до самого останнього шару. Ряди теж покривають всю таблицю.
Самий верхній шар містить самі осередки. Як показує малюнок, хоча все ряди містять однакову кількість осередків, але не кожна клітинка має зміст. Ці "порожні" осередки прозорі, і дозволяють нижнім верствам просвічуватися через них.

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

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN">
<HTML>
<HEAD>
<STYLE type = "text / css">
TABLE {background: # ff0; border-collapse: collapse}
TD {background: red; border: double black}
</ STYLE>
</ HEAD>
<BODY>
<P>
<TABLE>
<TR>
<TD> 1
<TD rowspan = "2"> 2
<TD> 3
<TD> 4
</ TR>
<TR> <TD> </ TD> </ TR>
</ TABLE>
</ BODY>
</ HTML>

повинні форматироваться наступним чином:

D
Таблиця з трьома порожніми осередками в нижньому ряду.

17.5.2. Алгоритми для ширини таблиці: властивість 'table-layout'.

CSS не визначають "оптимальної" розмітки для таблиць, оскільки у багатьох випадках оптимальність - це справа смаку. CSS не встановлюють обмеження, які пристрої виведення повинні враховувати, размечая таблиці. Пристрої виведення можуть використовувати будь-які алгоритми, які вони хочуть виконувати, і вони вільні у виборі швидкої візуалізації над точністю, виключаючи випадок, коли обраний "алгоритм фіксованою розмітки".

'table-layout'
Тип значення: auto | fixed | inherit
Початкова величина: auto
Застосовується: до елементів 'table' і 'inline-table'
Спадкування: немає
Процентна база: немає
Медіа: візуальні

Властивість 'table-layout' контролює алгоритм, який використовується для розмітки табличних комірок, рядів і колонок. Значення властивості наступні:

fixed
Використовує алгоритм фіксованою розмітки таблиці.
auto
Використовує алгоритм автоматичної розмітки таблиці.

Обидва алгоритми описані нижче.

Базова лінія - це базова лінія першого сатиричного блоку в осередку. Якщо немає тексту, то базова лінія визначається базовою лінією вводиться в осередок об'єкта, а якщо його немає, то дном блоку осередків. Максимальна відстань між верхом блоку осередку і базовою лінією всіх осередків, які мають 'vertical-align: baseline', використовується для установки базової лінії ряду. Нижче наведено приклад:

D
Діаграма, що показує вплив різних значень 'vertical-align' на елементи таблиці.

Блоки осередків 1 і 2 вирівнюються за своїми базовими лініями. Блок комірок 2 має найбільшу висоту (вище базової лінії), тому він визначає базову лінію ряду. Зверніть увагу на те, що якщо немає блоку осередків, вирівняних по його базової лінії, то ряд не матиме (або вона не потрібна) базової лінії.

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

По-перше, позиціонуються осередки, які вирівнюються по своїй базової лінії. Це буде засновувати базову лінію ряду. Далі, позиціонуються осередки з 'vertical-align: top'.
Тепер ряд має верх, можливо, базову лінію, і попередню висоту, яка є дистанцією від вершини до найнижчого дну осередків, позиціонуються так далеко. (Дивіться умови по відступами осередків нижче.)
Якщо будь-яка з решти осередків вирівняна по низу або по середині, має висоту більше, ніж поточна висота ряду, то висота ряду буде збільшуватися до максимального значення цього осередку, знижуючи низ.
В кінці, позиціонуються залишилися осередки.

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