Border-spacing

Значения: < длина1> < длина2> | inherit

< длина1> - горизонтальный промежуток между ячейками в каждой строке таблицы.

< длина2> - значение промежутка по вертикали.

Если задается только одно значение, то оно действует в обоих направлениях одновременно. Например:

table {

border-collapse: separate;

border-spacing: 10px 3 px;

border: none; }

td { border: 1px solid black; }

 

Рис 3. 2. Таблица с промежутком между ячейками

 

Если значение border-spacing равно нулю, это вызывает касание смежных границ ячеек, а значит, и «удвоение» таковых во внутренней части сетки.

Модель сжимающихся границ (border-collapse: collapse)

В модели сжимающихся границ границы смежных ячеек «сжимаются», так что видна одна-единственная граница, а дополнительный промежуток между границами удаляется. Рис. 3 показывает таблицу из предыдущего примера:

table {

border-collapse: collapse;

border: none; }

td {

border: 1px solid black; }

Рис 3. 3. Таблица со сжатыми межъячеечными границами

 

Границы между ячейками центруются по линиям межъячеечной сетки. Поэтому если пара смежных ячеек имеет границу толщиной 8 пикселей, на область каждой ячейки придутся по четыре из них. Если граница занимает нечетное число пикселей, то выбрать, где вывести «лишний» пиксель, должен пользовательский агент. Широкие границы по внешним краям таблицы могут выходить в зону отступа.

Явно определив свойство таблицы border-collapse: collapse, удаляют все дополнительное пространство и даже небольшие зазоры между границами, которые автоматически мог вставлять браузер.