Css border spacing: border-spacing — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

border-spacing | WebReference

Задаёт расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

Краткая информация

Значение по умолчанию0
НаследуетсяДа
ПрименяетсяК таблицам
АнимируетсяНет

Синтаксис

border-spacing: <размер> [<размер>]
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Песочница

table {
  border: 4px double #333;
  border-collapse: separate;
  width: 100%;
  border-spacing: {{ playgroundValue }}px;
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>border-spacing</title> <style> table { border: 4px double #333; /* Рамка вокруг таблицы */ border-collapse: separate; /* Способ отображения границы */ width: 100%; /* Ширина таблицы */ border-spacing: 7px 11px; /* Расстояние между ячейками */ } td { padding: 5px; /* Поля вокруг текста */ border: 1px solid #a52a2a; /* Граница вокруг ячеек */ } </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-spacing

Объектная модель

Объект.style.borderSpacing

Примечание

Если к элементу <table> добавлен атрибут cellspacing, то при использовании стилевого свойства border-spacing атрибут cellspacing не принимается во внимание и его значение игнорируется.

Спецификация

СпецификацияСтатус
CSS Level 2 (Revision 1)Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

8121411
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Таблицы

См. также

  • Оформление таблиц

Рецепты

  • Как установить расстояние между ячеек?

Практика

  • Расстояние между ячейками

border-spacing — Справочник CSS

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад CSS Справочник Далее ❯


Пример

Установка интервала между границами для таблицы:

#table1 {
    border-collapse: separate;
    border-spacing: 15px;
}

#table2 {
    border-collapse: separate;
    border-spacing: 15px 50px;
}

Попробуйте сами »

Определение и использование

Свойство border-spacing задает расстояние между границами соседних ячеек.

Примечание: Это свойство работает только тогда, когда border-collapse раздельный.

Значение по умолчанию:2px
Унаследованный:да
Анимируемый:да. Прочитать о animatable Попробовать
Версия:CSS2
JavaScript синтаксис: object.style.borderSpacing=»15px» Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
border-spacing1.08.01.01.04.0

CSS Синтаксис

border-spacing: length|initial|inherit;

Значение свойств

ЗначениеОписаниеВоспроизвести
length lengthЗадает расстояние между границами соседних ячеек в px, cm, и т.
д. Отрицательные значения не допускаются.
  • Если указано одно значение, оно определяет как горизонтальный, так и вертикальный интервал между ячейками
  • Если заданы два значения, то первое задает горизонтальный интервал, а второе — вертикальный
Воспроизвести »
initialЗадает для этого свойства значение индекса. Прочитать о initialВоспроизвести »
inheritНаследует это свойство от родительского элемента. Прочитать о inherit

Связанные страницы

CSS учебник: CSS Table

HTML DOM справочник: Свойство borderSpacing

❮ Назад CSS Справочник Далее ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3. CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

border-spacing — CSS: Каскадные таблицы стилей

Свойство CSS border-spacing устанавливает расстояние между границами соседних ячеек в

. Это свойство применяется только тогда, когда border-collapse является отдельным .

Значение border-spacing также используется вдоль внешнего края таблицы, где расстояние между границей таблицы и ячейками в первом/последнем столбце или строке равно сумме релевантных (горизонтальных или вертикальных)

border-spacing и соответствующий (верхний, правый, нижний или левый) padding на столе.

Примечание: Свойство border-spacing эквивалентно устаревшему атрибуту Cellspacing элемента

, за исключением того, что border-spacing имеет необязательное второе значение, которое можно использовать для установки различных горизонтальное и вертикальное расстояние.

 /* <длина> */
интервал между границами: 2px;
/* горизонтальный <длина> | вертикальный <длина> */
интервал между границами: 1 см 2 см;
/* Глобальные значения */
интервал между границами: наследовать;
интервал между границами: начальный;
интервал между границами: вернуться;
интервал между границами: обратный слой;
интервал между границами: не установлен;

Свойство border-spacing может быть указано как одно или два значения.

  • Когда указано одно значение <длина> , оно определяет интервалы между ячейками как по горизонтали, так и по вертикали.
  • Когда указаны два значения , первое значение определяет расстояние между ячейками по горизонтали (т. пространство между ячейками в соседних строки ).

Значения

<длина>

Размер интервала как фиксированное значение.

Initial value 0
Applies to table and inline-table elements
Inherited yes
Computed value two absolute lengths
Тип анимации Дискретный
 СКАЖИ СКАЖИ = 
 <Длина> {1,2}

.

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

HTML 
 <таблица>
  
    <тд>1
    <тд>2
    <тд>3
  
  
    <тд>4
    <тд>5
    <тд>6
  
  
    <тд>7
    8
    <тд>9
CSS 
 таблица {
  интервал между границами: 1em 0.5em;
  заполнение: 0 2em 1em 0;
  граница: 1px сплошной оранжевый;
}
тд {
  ширина: 1,5 см;
  высота: 1,5см;
  фон: #d2d2d2;
  выравнивание текста: по центру;
  вертикальное выравнивание: посередине;
}
Результат
Спецификация
Каскадные таблицы стилей Уровень 2, редакция 2 (CSS 2.2) Спецификация
# 90797 90748

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • обрамление-коллапс , обрамление-стиль
  • Свойство border-spacing изменяет внешний вид HTML-элемента .

    Обнаружили проблему с содержанием этой страницы?

    • Отредактируйте страницу на GitHub.
    • Сообщить о проблеме с содержимым.
    • Посмотреть исходный код на GitHub.

    Хотите принять участие?

    Узнайте, как внести свой вклад.

    Последний раз эта страница была изменена участниками MDN.

    Свойство CSS border-spacing

    ❮ Предыдущий Полное руководство по CSS Далее ❯


    Пример

    Установите интервал между границами для таблицы:

    #table1 {
     граница-коллапс: отдельная;
    интервал между границами: 15 пикселей;
    }

    #table2 {
      граница-коллапс: отдельная;
      border-spacing: 15px 50px;
    }

    Попробуйте сами »

    Определение и использование

    Свойство border-spacing устанавливает расстояние между границами соседних ячеек.

    Примечание: Это свойство работает только при коллапс границы отдельный.

    Показать демо ❯

    Значение по умолчанию: 2 пикселя
    Унаследовано: да
    Анимация: да. Читать про анимированный Попробуй
    Версия: CSS2
    Синтаксис JavaScript: объект .style.borderSpacing=»15px» Попробуй

    Поддержка браузера

    Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

    Собственность
    интервал между границами 1,0 8,0 1,0 1,0 4,0

    Синтаксис CSS

    border-spacing: length |initial|inherit;

    Значения свойств

    Значение Описание Демо
    длина длина Указывает расстояние между границами соседних ячеек в пикселях, см и т. д. Отрицательные значения не допускаются.
    • Если указано одно значение, оно определяет расстояние как по горизонтали, так и по вертикали между ячейками
    • Если указаны два значения, первое задает интервал по горизонтали, а второе — интервал по вертикали
    		 Демонстрация ❯
    начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
    унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

    Связанные страницы

    Учебник по CSS: Таблица CSS

    Ссылка на DOM HTML: свойство borderSpacing

    ❮ Предыдущая Полное руководство по CSS Следующий ❯


    ВЫБОР ЦВЕТА

    Лучшие учебники
    Учебник по HTML
    Учебник CSS
    Учебник JavaScript
    Учебник How To
    Учебник SQL
    Учебник Python
    Учебник W3. CSS
    Учебник Bootstrap
    Учебник PHP
    Учебник Java
    Учебник C++
    Учебник jQuery

    2 Top 9 Справочник по HTML
    Справочник по CSS
    Справочник по JavaScript
    Справочник по SQL
    Справочник по Python
    Справочник по W3.CSS
    Справочник по Bootstrap
    Справочник по PHP
    Цвета HTML
    Справочник по Java
    Справочник по Angular
    Справочник по jQuery

    Основные примеры
    Примеры HTML
    Примеры CSS
    Примеры JavaScript
    Примеры инструкций
    Примеры SQL
    Примеры Python
    Примеры W3.CSS
    Примеры Bootstrap
    Примеры PHP
    Примеры Java
    Примеры XML
    Примеры jQuery

    FORUM | О

    W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *