border-spacing
Свойство CSS border-spacing используется для изменения расстояния между рамками (границами) ячеек HTML-таблицы и между рамками ячеек и рамкой самой таблицы.
Рамки таблицы и ячеек и расстояния между ними.
Если у таблицы установлено свойство border-collapse со значением collapse , то свойство CSS border-spacing будет проигнорировано.
Тип свойства
Применяется: к тегу и элементам, у которых свойство display имеет значение table или inline-table .
Значения
Значением свойства border-spacing является один из следующих вариантов:
- Размеры — указание одной или двух (через пробел) относительных или абсолютных величин в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы. Если указана одна величина, то она устанавливает сразу расстояния между рамками по вертикали и горизонтали, если две, то первая задает расстояния по горизонтали, а вторая по вертикали.
- inherit — наследует значение CSS border-spacing от родительского элемента.
Процентная запись: не существует.
Значение по умолчанию: в спецификации CSS указан 0, однако браузеры обычно устанавливают размер в 2px.
Синтаксис
Пример CSS: использование border-spacing
Результат. Использование свойства CSS border-spacing.
Версии CSS
Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
Поддержка: | Нет | Да | Да | Да |
Браузеры
Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
Поддержка: | Нет | Да | Да | Да | Да | Да |
Internet Explorer 6.0 и 7.0 не понимают свойство CSS border-spacing .
CSS: border-spacing property
This CSS tutorial explains how to use the CSS property called border-spacing with syntax and examples.
Description
The CSS border-spacing property defines the spacing between the borders of adjacent cells in a table when using the separated borders model to render the table (see the border-collapse property to change the rendering model).
Syntax
The CSS border-spacing property can be expressed with one or two values provided.
Syntax — One Value
The syntax for the CSS border-spacing property (with 1 value) is:
When one single value is provided, the border-spacing value will apply to both the horizontal space and vertical space between adjacent cells. It can be one of the following:
Value | Description |
---|---|
fixed | Fixed value expressed in px, em, . table |
inherit | Element will inherit the border-spacing from its parent element table |
Syntax — Two Values
The syntax for the CSS border-spacing property (with 2 values) is:
When two values are provided, the first value will apply to the horizontal space between cells. The second value will apply to the vertical space between cells. It can be the following:
Value | Description |
---|---|
fixed | Fixed value expressed in px, em, . table |
- The border-spacing property applies to an HTML table that is rendered using the separated borders model (see border-collapse property to learn more about the border models).
- The separated borders model renders a table such that adjacent cells have their own distinct borders that are not shared, and the border-spacing property determines the spacing between the cells.
- The collapsed borders model renders a table such that adjacent cells share their borders.
Browser Compatibility
The CSS border-spacing property has basic support with the following browsers:
- Chrome
- Firefox (Gecko)
- Internet Explorer 8+ (IE 8+)
- Opera 4+
- Safari (WebKit)
Example
We will discuss the border-spacing property below, exploring examples of how to use this property in CSS.
Let’s first look at an example of where we set the border-spacing on a table that is rendered using the separated borders model. For example:
The CSS would look like this:
The HTML would look like this:
The table rendered using the separated borders model would look like this:
In this CSS border-spacing example, we have set the border-spacing property to 3px for the horizontal spacing and 10px for the vertical spacing. So as you can see, the border-spacing property works as expected on a table rendered with the separated borders model, which is the default rendering model for HTML tables.
Now let’s look at what happens when you change the rendering model to the collapsed borders model (as specified by border-collapse: collapse).
Now using the collapsed borders model, our table would look like this:
As you can see, the border-spacing property has no affect on our table once the border-collapse property has been set to collapse.
border-spacing
Браузер | Internet Explorer | Netтscape | Опера | Safari | Mozilla Firefox | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Версия | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
Поддерживается | Нет | Нет | Нет | ? | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
Краткая информация
CSS (ЦСС) | CSS (ЦСС)2 |
---|---|
Значение по умолчанию | |
Наследуется | Да |
Применяется | К таблицам |
Аналог ШТМЛ | |
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/tables.ШТМЛ#propdef-border-spacing |
Описание
Задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse .
Синтаксис
border-spacing: значение [значение]
Аргументы
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если аргументов два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 1.
Рис. 1. Применение параметра border-spacing
html table border spacing
I am trying to give spacing between columns in a html table,
Actually, I thought I just wanted spacing at the right side of each column.
So far, I only managed to use border-spacing property to add spacing between each columns. When I use this property, I realise there is spacing on both the left side and right side of each column. Is it possible to use css rules such that only spacing is applied at the right side?
I have a code snippet of my current method below:
border-spacing
The border-spacing property is used to specify the distance between the borders of adjacent border cells.
It is also used to specify (or add to) the distance between the table borders and the borders of cells at the table’s edges (cells belonging to the first and last rows and columns).
It takes one or two length values that determine the vertical and horizontal spacing. If one value is specified, it gives both the vertical and horizontal spacing. If two values are specified, the first one gives the horizontal spacing and the second one gives the vertical spacing.
When the value of the border-spacing property is used to determine the distance between the table borders and the cells at its edges, the spacing is added to any padding applied to the table. The distance between the table border and the borders of the cells on the edge of the table is the table’s padding for that side, plus the relevant border spacing distance. For example, on the right hand side, the distance is the table’s padding-right value plus the horizontal border-spacing .
Trivia & Notes
The border-spacing property only applies when the value of the border-collapse property is separate , because otherwise, if the borders are collapsed with a collapse value, there won’t be any spaces between the borders.
Official Syntax
- Syntax:
Values
See the entry for a list of possible values. Negative values are not allowed.
inherit The border spacing is inherited from the element’s parent.
Examples
Live Demo
The table in the following demo has a padding and a border spacing set to it. Try changing the values to see how the spacing changes between the cells and around them.
Browser Support
The border-spacing property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.
Further Reading
Related Entries
Written by Sara Soueidan. Last updated February 3, 2015 at 12:35 pm by Mary Lou.
Do you have a suggestion, question or want to contribute? Submit an issue.
CSS border-spacing Property
Description
The border-spacing CSS property sets the spacing between the borders of adjacent table cells using the separated border model. If the collapsing border model is used, this property is ignored. See the border-collapse property.
The following table summarizes the usages context and the version history of this property.
Default value: | |
---|---|
Applies to: | The table and inline-table elements |
Inherited: | Yes |
Animatable: | Yes. See animatable properties. |
Version: | CSS 2, 3 |
Syntax
The syntax of the property is given with:
border-spacing : | [ length ] 1 or 2 values | initial | inherit |
The border-spacing property can take one, or two whitespace separated length values.
- If one value is specified, it applies to both the horizontal and vertical border spacing.
- If two values are specified, the first sets the horizontal border spacing, and the second sets the vertical border spacing.
The example below shows the border-spacing property in action.
Example
- table <
- border-collapse : separate ;
- border-spacing : 10px 20px ;
- >
Property Values
The following table describes the values of this property.
Value | Description |
---|---|
length | A length value in px , pt , cm , em , etc. Negative values are not allowed. |
initial | Sets this property to its default value. |
inherit | If specified, the associated element takes the computed value of its parent element border-spacing property. |
Browser Compatibility
The border-spacing property is supported in all major modern browsers.
Browser Support–
- Firefox 1+
- Google Chrome 1+
- Internet Explorer 8+
- Apple Safari 1+
- Opera 4+
Warning: Internet Explorer 7 and earlier versions don’t support the border-spacing property. IE8 supports this property only if a is specified.
Отступы между ячейками
Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.
Помимо внутренних отступов можно задавать отступы между ячейками таблицы.
Отступы между ячейками не работают с border-collapse: collapse , что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.
Поэтому в этом задании мы используем border-collapse: separate , которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse , то результат не изменится, ячейки будут отображаться раздельно.
Отступы между ячейками можно задать:
с помощью атрибута cellspacing тега
или c помощью CSS-свойства border-spacing .
Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding , которое задаётся для ячеек.
CSS — border-spacing
Description
border-spacing sets the distance between cells in a table, assuming that the table is rendered using the separate-borders model.
Possible Values
length − Any length unit. If two values are declared, the first applies to spacing along the horizontal axis, and the second applies to the vertical axis.
Applies to
Elements with a display of table or inline-table.
DOM Syntax
Example
Here is the example to show usage of border-spacing −
NOTE − This property does not work in IE 6 or NS 7.
Свойство CSS border-spacing
table
<
border-collapse:separate;
border-spacing:10px 50px;
>
Описание и использование
Свойство CSS border-spacing задает дистанцию между границами соседних ячеек в таблице (только для ячеек со стилем separate).
Значение по умолчанию | нет |
---|---|
Наследование | да |
Версия CSS | CSS 2 |
Синтаксис JavaScript | object.style.borderSpacing=»15px» |
Поддержка в браузерах
Свойство border-spacing поддерживается всеми основными браузерами.
Заметка: Internet Explorer 8 (и выше) поддерживают свойство border-spacing, только если указан DOCTYPE.
Возможные значения свойства border-spacing
Значение | Описание |
---|---|
длина длина |