- 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. селектори стовпців
Підтримуються тільки table-header-group і table-footer-group (5.0) Не підтримуються 2.10.3. Візуальне відображення таблиць
2.10.3.1. Розташування заголовка таблиці: властивість caption-side
синтаксис2.10.3.2. Завдання ширини стовпців: властивість table-layout
синтаксисauto Автоматичне обчислення ширини стовпців. fixed Фіксована ширина стовпців.
- Якщо для стовпця задано властивість width і його значення відмінне від auto, то воно задає ширину шпальти.
- В іншому випадку, якщо для осередку в першому рядку таблиці задано властивість width і його значення відмінне від auto, то воно задає ширину шпальти.
- Між рештою стовпцями порівну ділиться простір, що залишився таблиці по горизонталі.
У наступному прикладі ширина стовпців таблиці фіксована і дорівнює 100px, 300px і 200px відповідно:
2.10.3.3. Динамічні ефекти при відображенні таблиць
2.10.4. Відображення рамок таблиць
2.10.4.1. Завдання типу рамок: властивість border-collapse
синтаксис- Рамки зі значенням border-style , Рівним hidden, мають пріоритет над іншими конфліктуючими рамками. Будь-яка рамка цього стилю пригнічує будь-які межі в даному місці таблиці.
- Рамки зі стилем none мають найменший пріоритет. Рамка не буде доступний широкому тільки тоді, коли всі елементи, розташовані в даному місці, мають цей стиль рамки.
- В інших випадках більш широкі рамки мають пріоритет перед вужчими. Якщо ж кілька рамок мають одне значення border-width , То стилі рамок в порядку убування пріоритетів такі: double, solid, dashed, dotted, ridge, outset, groove, inset.
- Якщо рамки відрізняються тільки квітами, то порядок убування пріоритетів такий: рамка комірки, рамка рядка, рамка групи рядків, рамка стовпчика, рамка групи стовпців, рамка таблиці.
2.10.4.2. Відстань між рамками: властивість border-spacing
синтаксисTABLE {border: outset 10pt; border-collapse: separate; border-spacing: 15pt}
2.10.4.3. Рамки навколо порожніх клітинок: властивість empty-cells
синтаксисTABLE {border-collapse: separate; empty-cells: show}
