Промежуток между рамками

Иногда требуется, чтобы рамки ячеек таблиц отстояли друг от друга на некоторое расстояние. Это легко осуществляется с помощью свойства border-spacing, предоставляющего более мощную замену HTML-атрибута cellspacing. В качестве значения этого свойства может быть задана одна или две длины. Для того чтобы все ячейки были разделены промежутком в один пиксел, достаточно задать border-spacing: 1px;. Если же требуется чтобы по горизонтали ячейки отстояли друг от друга на один пиксел, а по вертикали на пять, то надо написать border-spacing: 1px 5px;. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая – вертикальный.

Значения промежутков также применяются между рамками ячеек по внешней границе таблицы и отступами самого элемента таблицы. Приведенные ниже стили дают результат:

table {border-collapse: separate; border-spacing: 3px 5px;
padding: 10px; border: 2px solid black;}
td { border: 1px solid gray;}
td#squeeze {border-width: 5px;}

Расстояние между рамками любых двух соседних по горизонтали ячеек составляет 3 пиксела, а между рамками самой правой и самой левой ячеек и правой и левой рамками элемента table – 13 пикселов.


Аналогично по вертикали рамки отстоят друг от друга на 5 пикселов, а рамки ячеек верхней и нижней строк – на 15 пикселов от верхней и нижней рамок таблицы соответственно. Промежуток между рамками ячеек постоянен по всей таблице независимо от ширины рамок самих ячеек. Также обратите внимание, что border-spacing применяется к таблице в целом, а не к отдельным ячейкам. Если в предыдущем примере border-spacing было задано для элементов td, оно было бы проигнорировано. В модели отдельных рамок нельзя задать рамки для строк, групп строк, столбцов и групп столбцов. Любые свойства рамок, объявленные для этих элементов, должны игнорироваться совместимыми с CSS агентами пользователя.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическая компоновка
Анонимные объекты таблицы
Визуальная организация таблицы
Выравнивание
Высота

Вернуться в раздел: CSS / 11. Верстка таблиц