Атрибут таблиц border spacing в CSS

Средства CSS имеют богатый набор атрибутов для элементов веб-страниц с тем, чтобы максимально оживить и украсить сайты. Атрибут border-spacing не является исключением. Он широко используется при создании таблиц как элементов веб-страниц, а также без него невозможно обойтись при так называемой "табличной" верстке сайтов.

Назначение

Атрибут border-spacing применяется к тегу

и служит для определения расстояния между ячейками таблицы в пикселях. В HTML имеется аналогичный инструмент cellspacing.

Вам будет интересно:Как пользоваться Telegram? Рекомендации

Оба эти атрибута нельзя применять к одной и той же таблице по той причине, что CSS имеет более высокий приоритет, чем HTML. В противном случае будет работать только border-spacing, а cellspacing браузер проигнорирует.

Свойства атрибута можно для наглядности продемонстрировать в табличном виде.

Применение Задает промежуток между ячейками Значение по умолчанию 0 px Наследование Да Анимация Нет Работает с версиями CSS 2, 3

Ввиду того, что border-spacing работает с CSS 2, он корректно отображается подавляющим большинством современных браузеров. Для зрительного восприятия доступны сайты, написанные около десятка лет назад с помощью этой, уже устаревшей, технологии.

Синтаксис

Для того чтобы раздвинуть ячейки таблицы на нужное расстояние, необходимо к тегу

применить атрибут border-spacing, задать для него параметр length и число, выражающее количество пикселей. При этом пробел между цифрой и единицей измерения не ставится. Например, если ячейки в рядах необходимо раздвинуть на 12, а в столбцах на 18 пикселей, код CSS будет выглядеть так:

table { border-spacing: 12px 18px; }

Значений у атрибута может быть два, как в приведенном примере, а может быть один:

При задании двух параметров первый задает расстояние по горизонтали, а второй - по вертикали.

Если указывается один, то он определяет одно и то же расстояние как по горизонтали, так и по вертикали.

Следует учесть, что при проектировании таблицы, толщина (в пикселях) границ ячеек и их количество также должны приниматься во внимание. Иначе готовая таблица отобразится с искажениями.

Пример использования

Техническое задание: необходимо создать таблицу, в которой следует отобразить популярные браузеры и их минимальные версии, с которых становится доступным использование border-spacing в CSS. Раздвинуть ячейки на 15 пикселей как по горизонтали, так и по вертикали. Реализация задания будет выглядеть так:

Отсутствие свойства анимации означает, что средствами языков разметки промежутки между ячейками нельзя залить цветом или применить к ним иные графические эффекты. Для этого используются графические редакторы (GIMP, Photoshop, Inkscape).

Источник