Для установки меж осередків таблиці в CSS використовуються дві моделі. Перша модель найбільше підходить для так званих окремих кордонів навколо певних осередків, інша застосовується до кордонів, які проходять від одного краю таблиці до іншого. Будь-яка з цих моделей дозволяє створити безліч різних стилів кордонів, тому вибір моделі визначається виключно смаком творця таблиці.
Значення: collapse | separate | inherit
Початкове значення: collapse
Область застосування: елементи 'table' і 'inline-table'
Спадкування: так
Процентні значення: N / A
Пристрої: візуальні
Це властивість дозволяє вибрати модель кордонів таблиці. Значення 'separate' означає модель з окремими межами. Значення 'collapse' задає модель з пересічними межами. Ці моделі описані нижче.
Модель окремих кордонів
значення:
Початкове значення: 0
Область застосування: елементи 'table' і 'inline-table'
Спадкування: так
Процентне завдання: не визначено
Пристрої: візуальні
Якщо задана довжина, то вона позначає відстань між кордонами сусідніх комірок. Якщо задана одна довжина, вона визначає відстань по горизонталі і по вертикалі. Якщо вказані обидва значення, перше визначає відстань по горизонталі, а друга - по вертикалі. Довжини не можуть бути негативними.
У цій моделі кожна клітинка має власні кордони. Властивість 'border-spacing' визначає відстань між кордонами сусідніх комірок. Це відстань заповнюється фоном елемента таблиці. У рядків, стовпців, груп рядків і груп стовпців не може бути кордонів (тобто агенти користувачів повинні ігнорувати властивості кордонів для даних елементів).
Таблицю, представлену на малюнку нижче, можна створити за допомогою такої таблиці стилів:
Таблиця, в якій для властивості 'border-spacing' встановлено певне значення. Зверніть увагу, що у кожного осередку є власна межа, а у таблиці окрема межа.
Межі навколо порожніх клітинок: властивість 'empty-cells'
Значення: show | hide | inherit
Початкове значення: show
Область застосування: елементи 'table-cell'
Спадкування: так
Процентне завдання: не визначено
Пристрої: візуальні
У моделі з окремими межами це властивість управляє поданням кордонів навколо осередків, які не мають видимого вмісту. Вважається, що видимого вмісту немає в порожніх клітинках і осередках, для яких властивості 'visibility' присвоєно значення 'hidden'. символи " "Та інші символи, що представляють порожній простір за винятком символів ASCII CR (" D "), LF (" A "), tab (" 9 ") і пробілу (" 20 "), вважаються видимим вмістом.
Якщо для цієї властивості встановлено значення 'show', навколо порожніх клітинок відображається межа (як навколо звичайних осередків).
Значення 'hide' означає, що навколо порожніх вічок не буде меж. Більш того, якщо у всіх осередків в рядку це властивість має значення 'hide', і осередки не мають видимого вмісту, вся рядок буде виконуватися згідно з значенням 'display: none'.
Згідно наступним правилом кордону матимуть всі осередки:
Модель з пересічними межами
У моделі з пересічними межами можна вказувати кордону, які оточують осередок, рядок, групу рядків, стовпець або групу стовпців повністю або частково. Таким чином можна встановити межі для атрибута HTML "rule".
Межі вирівняні по центру сітки між осередками. У разі непарного числа або дискретних одиниць (пікселі, точки принтера) агенти користувачів повинні вибрати відповідну лінію кордону.
На малюнку нижче показано взаємозв'язок ширини таблиці, ширини кордонів, поля всередині осередків і ширини осередку. Цей взаємозв'язок представляється наступним рівнянням, яке може бути застосовано до кожного рядка таблиці:
шіріна_строкі = (0.5 * шіріна_граніци0) + левое_поле_внутрі_табліци1
+ шіріна1 + правое_поле_внутрі_табліци1 + шіріна_граніци1 +
левое_поле_внутрі_табліци2 +. + Правое_поле_внутрі_табліциn +
(0.5 * шіріна_граніциn)
Тут n - кількість осередків в рядку, а ширина-граніциi - межа між осередками i і i + 1. Зверніть увагу, що в ширину таблиці включена тільки одна з двох зовнішніх кордонів; інша межа знаходиться в області поля.
Схема ширини осередків, меж і полів всередині осередків.
Зверніть увагу, що в цій моделі ширина таблиці включає половину кордону таблиці. Крім того, в цій моделі у таблиці немає полів всередині (але є поля).
Вирішення конфліктів між кордонами
У моделі з пересічними межами кордону з кожного краю осередки можуть задаватися властивостями різних елементів, розташованих у краю (осередки, рядки, групи рядків, стовпців, групи стовпців і самої таблиці), і ці кордони можуть відрізнятися по ширині, стилю і кольору. В цьому випадку для кожного краю використовується стиль кордону, "приковує погляд", за винятком того, що кордон не відображається, якщо використовується стиль стилю 'hidden'.
Який тип кордону "виграє" в разі конфлікту, визначається наступними правилами:
- Межі, для властивості 'border-style' яких встановлено значення 'hidden', мають пріоритет над усіма іншими конфліктуючим межами. Всі інші кордону в зазначеному місці не відображаються.
- У кордонів, що мають стиль 'none', найнижчий пріоритет. Тільки якщо властивості кордонів всіх елементів, що відносяться до цього краю, мають значення 'none', кордони не буде (але пам'ятайте, що значення 'none' використовується для стилю кордону за замовчуванням.)
- Якщо жоден із стилів не має значення 'hidden' і хоча б один з них має значення, відмінне від 'none', "перемагають" більш широкі межі. Якщо у декількох кордонів властивості 'border-width' мають однакові значення, стилі застосовуються в наступному порядку: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove' і стиль з найнижчим пріоритетом 'inset'.
- Якщо стилі кордонів відрізняються тільки кольором, тоді стиль, заданий для осередку, має пріоритет над стилем рядки, стиль рядка - над стилем групи рядків, стовпці, групи стовпців і таблиці.
У наступному прикладі показано застосування цих правил ієрархії. В результаті використання таблиці стилів:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
| 10 | 11 | 12 |
| 13 | 14 | 15 |
буде представлена приблизно наступна таблиця:
Приклад таблиці з пересічними межами.
У наступному прикладі наведено таблицю з горизонтальними лініями, що розділяють рядки. Для верхньої межі таблиці вказано значення 'hidden', що забезпечує відсутність верхньої межі першого рядка. В результаті буде використовуватися атрибут "rules" HTML 4.0 (rules = "rows").
Таблиця з горизонтальними лініями, що розділяють рядки.
В даному випадку такий же результат можна отримати, чи не вказуючи значення 'hidden' для кордону всій ТАБЛИЦІ, а тільки для першого рядка. Можна використовувати будь-який спосіб.
Ось ще один приклад пересічних кордонів:
Таблиця з двома відсутніми внутрішніми кордонами.
| bar | |
| foo | bar |
стилі кордонів
Сенс деяких значень властивості 'border-style' стосовно таблиці і до інших елементів різний. У наведеному нижче списку такі значення позначені зірочкою.
Аналогічно значенням 'none', але в моделі з пересічними межами має пріоритет над будь-якими іншими межами (див. Розділ про конфлікти між кордонами).
Кордон представляється поруч точок.
Кордон представляється поруч коротких лінійних сегментів.
Кордон представляється єдиним сегментом лінії.
Кордон представляється двома суцільними лініями. Сума товщини двох ліній і
відстані між ними дорівнює значенню 'border-width'.
Кордон виглядає втиснула.
На противагу 'groove', межа виглядає опуклою.
У моделі з окремими межами весь виглядає утисненим. У моделі з пересічними межами це значення дає той же ефект, що і значення 'groove'.
У моделі з окремими межами весь блок виглядає опуклим. У моделі з пересічними межами це значення дає той же ефект, що і значення 'ridge'.