- 2.10.1. Загальний опис Таблиці забезпечують можливість розташування багатовимірних даних по рядках...
- 2.10.3. Візуальне відображення таблиць
- 2.10.3.2. Завдання ширини стовпців: властивість table-layout
- 2.10.3.3. Динамічні ефекти при відображенні таблиць
- 2.10.4. Відображення рамок таблиць
- 2.10.4.2. Відстань між рамками: властивість border-spacing
- 2.10.4.3. Рамки навколо порожніх клітинок: властивість empty-cells
- 2.10.5. Звуковий відображення таблиць: властивість speak-header
2.10.1. Загальний опис Таблиці забезпечують можливість розташування багатовимірних даних по рядках і стовпцях. Структура і зміст таблиці описуються на мові документа, а CSS дозволяє описати правила її відображення - або візуального, або звукового.
Візуальне відображення таблиць полягає в завданні правил відображення заголовків і осередків таблиці, їх вирівнювання відносно один одного, зображення рамок навколо них і т. Д. При звуковому відображенні таблиці задаються правила того, як повинні вимовлятися заголовки і вміст комірок.
Будова таблиць в CSS засноване на будову таблиць в HTML і успадковує всі їх складові. Кожна таблиця може мати заголовок, що містить її короткий опис. Крім того, вона може мати наздаголовок і підзаголовок. Тіло таблиці складається з рядків, в свою чергу, складаються з осередків. Стовпці таблиць явно не описуються, а визначаються будовою рядків: перша осередок кожного рядка ставиться до на одну, друга до другого і т. Д. Рядки і стовпці можуть об'єднуватися в групи, які можуть мати свої особливості відображення.
CSS не вимагає, щоб мова документа включав в себе елементи для кожної з перерахованих складових таблиць. Наприклад, XML-програми не містять зумовлених табличних структур. Проте, автори можуть відобразити елементи на таблиці за допомогою властивості display . Для присвоєння табличній семантики довільним елементам мови документа використовуються наступні значення цієї властивості:
Значення Елемент HTML Опис table TABLE Блокова таблиця. Елемент повинен відображатися як блоковий. inline-table TABLE Текстова таблиця. Елемент повинен відображатися як текстовий. table-row TR Елемент повинен відображатися як рядок таблиці. table-row-group TBODY Елемент описує групу рядків таблиці. table-header-group THEAD Елемент повинен відображатися як група надзаголовков таблиці. Відображається перед усіма іншими групами рядків таблиці. При виведенні на принтер може використовуватися в якості надзаголовка при друку кожної сторінки таблиці. table-footer-group TFOOT Елемент повинен відображатися як група підзаголовків таблиці. Відображається після всіх інших груп рядків таблиці. При виведенні на принтер може використовуватися як підзаголовок при друку кожної сторінки таблиці. table-column-group COLGROUP Елемент описує групу стовпців таблиці. Чи не відображається, але може впливати на відображення стовпців даної групи. table-column COL Елемент описує стовпець таблиці. Чи не відображається, але може впливати на відображення осередків даного стовпця. table-cell TD , TH Елемент повинен відображатися як елемент таблиці. table-caption CAPTION Елемент повинен відображатися як заголовок таблиці.
Таблиця стилів для HTML за замовчуванням задає такі властивості елементів:
TABLE {display: table} TR {display: table-row} THEAD {display: table-header-group} TBODY {display: table-row-group} TFOOT {display: table-footer-group} COL {display: table- column} COLGROUP {display: table-column-group} TD, TH {display: table-cell} CAPTION {display: table-caption} Підтримка: 
Підтримуються тільки table-header-group і table-footer-group (5.0) 
Не підтримуються
2.10.2. селектори стовпців
Осередки таблиць належать одночасно до двох контекстів: рядках і стовпцях. При цьому в тексті документа осередки є нащадками рядків, але не стовпців. Проте, завдання певних властивостей стовпців або їх груп впливає на відображення осередків. Такими властивостями є:
border
Властивості рамок застосовуються до стовпців тільки тоді, коли таблиця має злилися рамки . В цьому випадку оглядач вибирає рамку для кожної кордону осередки з урахуванням рамок стовпців, як описано в п. 2.10.4.1 . background Властивості фону стовпчика застосовуються до його осередкам тільки в тому випадку, коли і рядок, і сама осередок мають прозорий фон. width Це властивість задає мінімальну ширину шпальти. visibility Якщо це властивість для стовпця має значення collapse, то осередки цього стовпчика не відображаються, а ті осередки, які поширюються на декілька стовпців, обрізаються. Крім того, ширина таблиці зменшується на ширину даного стовпчика. Подробиці див. Нижче в описі динамічних ефектів . Інші значення цієї властивості ігноруються.
Наведемо два приклади:
TABLE {border-style: hidden} COL {border-style: none solid} TABLE {table-layout: fixed} COL.total {width: 5em}
У першому прикладі показано, як реалізувати на мові CSS значення cols атрибута rules таблиць HTML (виділення рамкою тільки кордонів стовпців). Другий приклад показує, як поставити фіксовану ширину шпальти.
2.10.3. Візуальне відображення таблиць
2.10.3.1. Розташування заголовка таблиці: властивість caption-side
синтаксис : Caption-side: top | bottom | left | right | inherit Початково: top Стосується: до елементів типу table-caption успадкованого: так Відсотки: не використовуються Пристрої: візуальні підтримка: Не підтримується Не підтримується
Властивість caption-side визначає розташування заголовка таблиці щодо тіла таблиці при її відображенні. Воно може набувати таких значень:
top Тема відображається над тілом таблиці. bottom Тема відображається під тілом таблиці. left Тема відображається зліва від тіла таблиці. right Тема відображається праворуч від тіла таблиці.
Відображення заголовка над або під тілом таблиці проводиться так само, як відображення двох послідовно розташованих блокових елементів. При відображенні заголовка ліворуч або праворуч від тіла таблиці слід явно задавати його ширину властивістю width , Т. К. Не ясно, що в даному випадку означає значення auto, прийняте за умовчанням. Горизонтальне вирівнювання заголовка задається властивістю text-align , А вертикальне - властивістю vertical-align , Яке повинно мати значення top, middle або bottom.
У наступному прикладі заголовок таблиці розміщується зліва від неї, сама таблиця центрируется (завданням лівої і правої кордонів значення auto), і весь прямокутник, осяжний заголовок і тіло таблиці, зсувається вліво на ширину заголовка.
BODY {margin-left: 10em} TABLE {margin-left: auto; margin-right: auto} CAPTION {caption-side: left; margin-left: -10em; width: 10em; text-align: right; vertical-align: bottom}
2.10.3.2. Завдання ширини стовпців: властивість table-layout
синтаксис : Table-layout: auto | fixed | inherit Початково: auto Стосується: до елементів типу table і inline-table успадкованого: немає Відсотки: не використовуються Пристрої: візуальні підтримка: Відповідає стандарту (5.0) Не підтримується
Властивість table-layout визначає спосіб обчислення ширини стовпців таблиці при її відображенні. Воно може набувати таких значень:
auto Автоматичне обчислення ширини стовпців. fixed Фіксована ширина стовпців.
Завдання фіксованої ширини стовпців означає наступне. Оглядач аналізує перший рядок таблиці, і на основі цього аналізу обчислює ширини всіх стовпців (наступні рядки не враховуються, тому цей алгоритм забезпечує більш швидке відображення таблиці, ніж автоматичний розрахунок ширини стовпців). У цьому випадку ширина таблиці повинна бути задана явно властивістю width , Інакше проводиться автоматичний розрахунок ширини. Обчислення фіксованої ширини стовпців проводиться так:
- Якщо для стовпця задано властивість width і його значення відмінне від auto, то воно задає ширину шпальти.
- В іншому випадку, якщо для осередку в першому рядку таблиці задано властивість width і його значення відмінне від auto, то воно задає ширину шпальти.
- Між рештою стовпцями порівну ділиться простір, що залишився таблиці по горизонталі.
Якщо при відображенні наступних рядків таблиці виявиться, що вміст будь-якої комірки не поміщається в стовпець, то воно може бути обрізане. Обрізанням вмісту осередків управляє властивість overflow .
Автоматичне обчислення ширини стовпців займає більше часу, так як вимагає перегляду всієї таблиці, але дає більш акуратні результати. Воно засноване на тому, що для кожного стовпця проглядаються всі його осередки, і ширина стовпчика визначається шириною найбільшої частини осередку, який не може бути розірвана переходом на новий рядок. Якщо при цьому для стовпця задано властивість width і його значення відмінне від auto, то воно задає мінімальну ширину шпальти. Завдання цього значення в процентах означає відсоток від ширини всієї таблиці.
У наступному прикладі ширина стовпців таблиці фіксована і дорівнює 100px, 300px і 200px відповідно:
<TABLE style = "table-layout: fixed; width: 600px> <COL style =" width: 100px "> <COL style =" width: 300px "> <COL style =" width: 200px "> ... </ TABLE>
2.10.3.3. Динамічні ефекти при відображенні таблиць
властивість visibility може приймати значення collapse для рядків, груп рядків, стовпців і груп стовпців. Це значення призводить до того, що рядок або стовпець таблиці повністю зникають з екрана, а простір, яке вони займали, стає доступним для відображення іншого змісту. Однак, придушення відображення термін або стовпців не викликає перерахунку висот і ширини осередків таблиці. Завдяки цьому стає можливим динамічно видаляти рядки і стовпці таблиці, не змінюючи в іншому її зовнішнього вигляду.
2.10.4. Відображення рамок таблиць
2.10.4.1. Завдання типу рамок: властивість border-collapse
синтаксис : Border-collapse: collapse | separate | inherit Початково: collapse Стосується: до елементів типу table і inline-table успадкованого: так Відсотки: не використовуються Пристрої: візуальні підтримка: Відповідає стандарту (5.0) Не підтримується
Властивість border-collapse задає тип рамок таблиці. CSS підтримує для таблиць два типи рамок: злилися рамки (collapse) і роздільні рамки (separate). Роздільні рамки відповідають стандарту HTML; злилися рамки відрізняються тим, що сусідні рамки зливаються в єдину рамку. Різниця між ними наочно демонструється наступним прикладом (Netscape Navigator відображає його невірно!):
Злилися рамки Осередок Осередок Осередок Осередок Осередок Осередок Осередок Осередок Осередок Роздільні рамки Осередок Осередок Осередок Осередок Осередок Осередок Осередок Осередок Осередок
Тип рамки таблиці визначає і те, які властивості рамки застосовні до даної таблиці, і то, як саме відображається той чи інший стиль рамки.
У таблиці з роздільними рамками кожна клітинка має власну рамку, тому завдання рамок для рядків, стовпців, груп рядків і груп стовпців ігнорується оглядачем. До таблиці з роздільними рамками застосовні властивості border-spacing і empty-cells ; для таблиць зі злилися рамками вони ігноруються.
У таблиці зі які злилися рамками можна задавати рамки як для осередків, так і для рядків, стовпців, груп рядків і груп стовпців. Якщо рамки окремих складових суперечать один одному, то використовується наступний алгоритм вирішення конфліктів:
- Рамки зі значенням border-style , Рівним hidden, мають пріоритет над іншими конфліктуючими рамками. Будь-яка рамка цього стилю пригнічує будь-які межі в даному місці таблиці.
- Рамки зі стилем none мають найменший пріоритет. Рамка не буде доступний широкому тільки тоді, коли всі елементи, розташовані в даному місці, мають цей стиль рамки.
- В інших випадках більш широкі рамки мають пріоритет перед вужчими. Якщо ж кілька рамок мають одне значення border-width , То стилі рамок в порядку убування пріоритетів такі: double, solid, dashed, dotted, ridge, outset, groove, inset.
- Якщо рамки відрізняються тільки квітами, то порядок убування пріоритетів такий: рамка комірки, рамка рядка, рамка групи рядків, рамка стовпчика, рамка групи стовпців, рамка таблиці.
відображення деяких стилів рамок для таблиць також залежить від типу рамки і кілька відмінно від звичайного, а саме:
hidden Прихована рамка. Те ж, що none, але для злилися рамок пригнічує всі інші рамки. inset Для роздільних рамок зображується у вигляді тривимірної врізки; для злилися рамок збігається з groove. outset Для роздільних рамок зображується у вигляді тривимірної вирізки; для злилися рамок збігається з ridge.
2.10.4.2. Відстань між рамками: властивість border-spacing
синтаксис : Border-spacing: <Розмір> <Розмір> ? | inherit Початково: 0 Застосовується: до елементів типу table і inline-table успадкованого: так Відсотки: не використовуються Пристрої: візуальні підтримка: Не підтримується Не підтримується
Властивість border-spacing задає відстань між сусідніми рамками таблиці в тому випадку, коли таблиця має роздільні рамки. Якщо вказано тільки один розмір, то він задає відстань між рамками і по вертикалі, і по горизонталі. Якщо вказані два розміри, то перший задає відстань між рамками по горизонталі, а другий - по вертикалі. Відстані не можуть бути негативними. приклад:
TABLE {border: outset 10pt; border-collapse: separate; border-spacing: 15pt}
2.10.4.3. Рамки навколо порожніх клітинок: властивість empty-cells
синтаксис : Empty-cells: show | hide | inherit Початково: show Стосується: до елементів типу table-cell успадкованого: так Відсотки: не використовуються Пристрої: візуальні підтримка: Не підтримується Не підтримується
Властивість empty-cells управляє відображенням рамок навколо порожніх клітинок в тому випадку, коли таблиця має роздільні рамки. Осередок таблиці вважається порожній, якщо не містить нічого, крім пробілів ( "\ 20"), табуляцій ( "\ 09"), перекладів рядка ( "\ 0D") і повернень каретки ( "\ 0A"). Крім того, порожніми вважаються осередки, у яких значення властивості visibility одно hidden.
Якщо ця властивість має значення show, то рамки навколо порожніх клітинок відображаються звичайним чином. Якщо воно має значення hide, то рамки навколо порожніх клітинок не відображаються; більш того, якщо вся рядок таблиці складається з порожніх клітинок, то вона поводиться так, як якщо б мала властивість display зі значенням none. приклад:
TABLE {border-collapse: separate; empty-cells: show}
2.10.5. Звуковий відображення таблиць: властивість speak-header
синтаксис : Speak-header: once | always | inherit Початково: once Стосується: до елементів, що містить заголовки таблиць успадкованого: так Відсотки: не використовуються Пристрої: звукові підтримка: Не підтримується Не підтримується
Якщо таблиця вимовляється синтезатором мови, то взаємини між осередками даних і осередками заголовків виражаються інакше, ніж при візуальному відображенні таблиці. Властивість speak-header дозволяє нам вказати, в який момент повинні вимовлятися заголовки. Воно може набувати таких значень:
once Тема вимовляється один раз, перед серією осередків. always Тема вимовляється перед кожною клітинкою, до якої він належить.
Спосіб завдання заголовків залежить від мови документа. Зокрема, HTML містить три атрибути елементів TD і TH (Headers, scope і axis), які дозволяють пов'язати з кожною клітинкою таблиці відповідний заголовок.
приклад:
TH.totals {speak-header: always}
Підтримуються тільки table-header-group і table-footer-group (5.0) Не підтримуються Не підтримується Не підтримується Відповідає стандарту (5.0) Не підтримується Відповідає стандарту (5.0) Не підтримується Не підтримується Не підтримується Не підтримується Не підтримується Не підтримується Не підтримується 