Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
а
б
Рис. 1. Вид таблицы при использовании свойства border-collapse
Синтаксис
border-collapse: collapse | separate | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse
Браузеры
border-collapse
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
6.0+
8.0+
1.0+
3.5+
1.0+
1.0+
1.0+
1.0+
Краткая информация
Значение по умолчанию
separate
Наследуется
Нет
Применяется
К тегу
или к элементам, у которых значение display установлено как table или inline-table
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
а
б
Рис. 1. Вид таблицы при использовании свойства border-collapse
Синтаксис
border-collapse: collapse | separate | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse
Браузеры
border-collapse
Браузер
Internet Explorer
Netтscape
Опера
Safari
Mozilla Firefox
Версия
5.5
6.0
7.0
8.0
8.0
9.0
7.0
8.0
9.2
9.5
1.3
2.0
3.1
1.5
2.0
3.0
Поддерживается
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Краткая информация
CSS (ЦСС)
CSS (ЦСС)1
Значение по умолчанию
separate
Наследуется
Нет
Применяется
К тегу
или к элементам, у которых значение свойство display установлено как table или inline-table
Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
а
б
Рис. 1. Вид таблицы при использовании атрибута border-collapse
Синтаксис
border-collapse: collapse | separate
Аргументы
ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 2.
Рис. 2. Вид таблицы при использовании параметра border-collapse
CSS border-collapse Свойство
Пример
Установите модель свертывания границ для двух таблиц:
#table1 < border-collapse: separate; >
#table2 < border-collapse: collapse; >
Подробнее примеры ниже.
Определение и использование
Свойство border-collapse устанавливает, должны ли границы таблицы сворачиваться в одну границу или разделяться как в стандартном HTML.
Значение по умолчанию:
separate
Inherited:
yes
Animatable:
no. Читайте о animatable
Version:
CSS2
Синтаксис JavaScript:
object.style.borderCollapse=»collapse»
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Синтаксис CSS
Значения свойств
Значение
Описание
separate
Границы разделены; Каждая ячейка будет отображать свои собственные границы. Это значение по умолчанию.
collapse
Границы свернуты в одну границу, когда это возможно (граница-пробелы и пустые-ячейки свойства не имеют эффекта)
initial
Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit
Наследует это свойство из родительского элемента. (Читайте о inherit)
Другие примеры
Пример
При использовании «граница-свернуть: разделить», граница-шаг свойство может быть использовано для установки пространства между ячейками:
Пример
При использовании «border-свернуть: свернуть», ячейка, которая появляется первым в коде будет «Win»:
Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.
Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.
Форматирование таблиц
1. Границы таблицы border
Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border :
Границы ячеек заголовка каждого столбца задаются для элемента th :
Границы ячеек тела таблицы задаются для элемента td :
Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом:
Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:
Границы можно задавать частично:
Подробнее о свойстве border вы можете прочитать здесь.
2. Как задать ширину и высоту таблицы
По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).
Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов
и
.
Фиксировать высоту с помощью свойства height не рекомендуется.
3. Как задать фон таблицы
По умолчанию фон таблицы и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:
4. Столбцы таблицы
Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью элемента
. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:
Подробнее про элемент вы можете прочитать здесь.
Подробнее про CSS-селекторы вы сможете прочитать здесь.
5. Как добавить таблице заголовок
caption-side
Значения:
top
Заголовок таблицы располагается над таблицей. Значение по умолчанию.
bottom
Располагает заголовок под таблицей.
initial
Устанавливает значение свойства в значение по умолчанию.
inherit
Наследует значение свойства от родительского элемента.
Рис. 1. Пример отображения заголовка под таблицей
6. Как убрать промежуток между рамками ячеек
border-collapse
Значения:
separate
Рамки ячеек располагаются раздельно.
collapse
Рамки ячеек сливаются в одну, а промежутки между рамками убираются.
initial
Устанавливает значение свойства в значение по умолчанию.
inherit
Наследует значение свойства от родительского элемента.
Рис. 2. Пример таблиц со сливающимися и раздельными рамками ячеек
7. Как увеличить промежуток между рамками ячеек
С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом.
border-spacing
Значения:
Добавляет промежутки между рамками как по вертикали, так и по горизонтали. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая — вертикальный.
initial
Устанавливает значение свойства в значение по умолчанию.
inherit
Наследует значение свойства от родительского элемента.
Рис. 3. Пример таблиц с увеличенными промежутками между рамками ячеек
8. Как скрыть пустые ячейки таблицы
Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table , то ячейка не будет скрыта.
9. Компоновка макета таблицы с помощью свойства table-layout
Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек.
Свойство не наследуется.
10. Лучшие макеты таблиц
По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine
1. Горизонтальный минимализм
Добавление эффекта :hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.
2. Вертикальный минимализм
Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.
3. «Коробочный» стиль
Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.
Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.
4. Горизонтальная зебра
Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.
5. Газетный стиль
Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект :hover при наведении на строку.
6. Фон таблицы
Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.
Internet Explorer
Netтscape
Опера
Safari
Mozilla Firefox
Рис. 1. Пример отображения заголовка под таблицей
Рис. 2. Пример таблиц со сливающимися и раздельными рамками ячеек
Рис. 3. Пример таблиц с увеличенными промежутками между рамками ячеек
