Сетка таблицы
Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse .
Рис. 1. Вид таблицы с сеткой
При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse , как показано в примере 1.
Пример 1. Создание сетки
Таблица 2004 2005 2006 Рубины 43 51 79 Изумруды 28 34 48 Сапфиры 29 57 36
В данном примере также устанавливается цвет фона для ячеек заголовка (тег ) через свойство background .
Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).
Рис. 2. Сетка внутри таблицы
При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE .
Пример 2. Таблица без внешней рамки
Таблица 2004 2005 2006 Рубины 43 51 79 Изумруды 28 34 48 Сапфиры 29 57 36
В данном примере толщина линий между ячейками составляет один пиксел, а белая рамка вокруг — два пиксела, т.е. на один пиксел больше. Это требуется для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.
border-collapse
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
 |
 |
| а | б |
Рис. 1. Вид таблицы при использовании свойства border-collapse
Синтаксис
border-collapse: collapse | separate | inherit
Значения
collapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing . separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
border-collapse 2013 2014 2015 Нефть 43 51 79 Золото 29 34 48 Дерево 38 57 36
Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . В IE6 и IE7 не отменяется действие атрибута cellspacing .
CSS по теме
Как сделать рамки в таблице html
Чтобы оформить границы ячеек таблицы, достаточно применить CSS свойство border .
Наименование Кол-во Груши 10 Яблоки 7 Мандарины 5
table, td, th /* задаем границу для всех элементов */ border: 3px solid #245488; > td, th /* делаем отступ в ячейках, выставляем выравнивание текста */ padding: 10px 20px; text-align: center; > 
Результат:
На рисунке выше видно, что граница «задвоилась», так как css свойство border применяется к каждому элементу таблицы — и к table, и к каждому th/td. Для того, чтобы «схлопнуть» такие границы достаточно применить свойство border-collapse .
table, td, th border-collapse: collapse; border: 3px solid #245488; > 
Результат:
CSS стиль таблицы
CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse . Оно принимает значения:
border-collapse: separate — у каждой ячейки своя граница (по умолчанию)
border-collapse: collapse — общая граница
border-collapse: inherit — значение принимается от родительского элемента
Для примера создадим таблицу и зададим рамку ячейкам всех таблиц, которые будут на странице. Сначала не будем ничего менять, чтобы посмотреть, как таблица будет выглядеть:
14
15
16
17
18
19
20
21
22
23
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 1 | строка 2 ячейка 2 |
Обратите внимание, у каждой ячейки своя граница. В разных браузерах CSS стиль таблицы может немного отличаться. В одних браузерах по умолчанию между ячейками есть определённое расстояние. В других границы таблицы соприкасаются.
Теперь установим таблице свойство border-collapse .
Границы ячеек объединились, теперь у каждой ячейки нет своей рамки, а одна рамка находится между ячейками.
Расстояние между ячейками
CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing . Расстояние указывается в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse .
Создадим ещё одну таблицу и установим расстояние между ячейками:
32
33
34
35
36
37
38
39
40
41
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 1 | строка 2 ячейка 2 |
Свойству border-spacing можно указать два значения через пробел. При этом, первое значение — это расстояние по горизонтали, а второе — по вертикали.
Укажем созданной таблице разные расстояния.
border-spacing: 5px 15px;
Положение заголовка таблицы
Для таблицы можно создать заголовок. Он создаётся с помощью тэга . Свойство caption-side позволяет установить положение заголовка. Оно принимает значения:
caption-side: top — над таблицей (по умолчанию)
caption-side: bottom — под таблицей
Существуют другие значения, но они поддерживаются не всеми браузерами.
Добавим второй таблице заголовок и расположим его под таблицей:
Заголовок таблицы
Отображение пустых ячеек
Для пустых ячеек можно запретить отображение фона и рамки. Если ячейка содержит пробел, перевод строки или табуляцию, то она всё равно считается пустой. Отмену отображения пустых ячеек устанавливает свойство empty-cells . Может принимать значения:
empty-cells: show — ячейки видны (по умолчанию)
empty-cells: hide — ячейки не видны
Создадим таблицу с пустой ячейкой. Кроме рамки, установим ячейкам фон. Пока не будем ничего менять, посмотрите, как будет выглядеть таблица.
#hid td
47
48
49
50
51
52
53
54
55
56
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 2 |
Пустая ячейка видна, у неё отображаются рамка и фон.
Теперь добавим таблице свойство empty-cells .
Обратите внимание, пустая ячейка не отображается в таблице
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2023 © basecourse.ru Все права защищены