border-spacing в CSS

Содержание

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:

Initial: 0

Applies To: elements with ‘table’ and ‘inline-table’ display

Animatable: no

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.

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

Расстояние между границами соседних ячеек в px (пикселях), cm (сантиметрах) и тд. Отрицательные значения запрещены:

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

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

Это свойство применимо к таблицам.

Не поддерживается Internet Explorer до версии 8.0.