Новости
- коротка інформація
- Синтаксис ?
- позначення
- значення
- Пісочниця
- приклад
- об'єктна модель
- Примітка
- Специфікація ?
- браузери
- Автор і редактори
Встановлює, як відображати межі навколо осередків таблиці. Це властивість грає роль, коли для осередків встановлена рамка, тоді в місці стику осередків вийде лінія подвійної товщини (рис. 1а). Значення collapse змушує браузер аналізувати подібні місця в таблиці і прибирати в ній подвійні лінії (рис. 1б). При цьому між осередками залишається тільки одна межа, одночасно належить обом осередкам. Те ж правило дотримується і для зовнішніх кордонів, коли навколо самої таблиці додається рамка.
Мал. 1. Вид таблиці при використанні властивості border-collapse
коротка інформація
Значення за замовчуванням separate Успадковується Так Застосовується До елементу <table> або до елементів, у яких значення display встановлено як table або inline-table анімуйте Немає
Синтаксис ?
border-collapse: collapse | separate
позначення
Опис Приклад <тип> Вказує тип значення. <Розмір> A && B Значення повинні виводитися в зазначеному порядку. <Розмір> && <колір> A | B Вказує, що треба вибрати тільки одне значення із запропонованих (A або B). normal | small-caps A || B Кожне значення може використовуватися самостійно або спільно з іншими в довільному порядку. width || count [] групуються значення. [Crop || cross] * Повторювати нуль або більше разів. [, <Час>] * + Повторювати один або більше разів. <Число> +? Зазначений тип, слово або група не є обов'язковим. inset? {A, B} Повторювати не менше A, але не більше B раз. <Радіус> {1,4} # Повторювати один або більше разів через кому. <Час> # ×
значення
collapse Лінія між осередками відображається тільки одна, також ігнорується значення атрибута cellspacing . separate Навколо кожного осередку відображається своя власна рамка, в місцях зіткнення осередків показуються відразу дві лінії.
Пісочниця
2013 2014 2015 Нафта 43 51 79 Золото 29 34 48 Дерево 38 57 36
приклад
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> border-collapse </ title> <style> table {width: 100%; / * Ширина таблиці * / border: 4px double black; / * Рамка навколо таблиці * / border-collapse: collapse; / * Відображати тільки одинарні лінії * /} th {text-align: left; / * Вирівнювання по лівому краю * / background: #ccc; / * Колір фону осередків * / padding: 5px; / * Поля навколо вмісту осередків * / border: 1px solid black; / * Кордон навколо осередків * /} td {padding: 5px; / * Поля навколо вмісту осередків * / border: 1px solid black; / * Кордон навколо осередків * /} </ style> </ head> <body> <table> <tr> <th> & nbsp; </ th> <th> 2013 </ th> <th> 2014 </ th> <th> 2015 </ th> </ tr> <tr> <td> Нафта </ td> <td> 43 </ td> <td> 51 </ td> <td> 79 </ td> </ tr > <tr> <td> Золото </ td> <td> 29 </ td> <td> 34 </ td> <td> 48 </ td> </ tr> <tr> <td> Дерево </ td > <td> 38 </ td> <td> 57 </ td> <td> 36 </ td> </ tr> </ table> </ body> </ html>
Результат даного прикладу показаний на рис. 2.
Мал. 2. Форма таблиці при використанні властивості border-collapse
об'єктна модель
об'єкт .style.borderCollapse
Примітка
Internet Explorer до версії 8.0 не скасовує дію атрибута cellspacing.
Специфікація ?
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) - специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) - група, що відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників по реалізації стандарту.
- Proposed Recommendation (Пропонована рекомендація) - на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
- Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення і внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторський чернетка) - чорнова версія стандарту після внесення правок редакторами проекту.
- Draft (Чернетка специфікації) - перша чорнова версія стандарту.
×
браузери
У таблиці браузерів застосовуються такі позначення.
- - властивість повністю підтримується браузером з усіма допустимими значеннями;
- - властивість браузером не сприймається і ігнорується;
- - при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.
Число вказує версію браузера, починаючи з якої властивість підтримується.
×
Автор і редактори
Автор: Влад Мержевіч
Остання зміна: 05.09.2017
Редактори: Влад Мержевіч
Lt;Число> +?Inset?
Специфікація ?