CSS tools have a rich set of attributes for web page elements in order to maximize the liveliness and decoration of websites. The border-spacing attribute is no exception. It is widely used in creating tables as elements of web pages, and it is also impossible to do without it with the so-called “tabular” layout of sites.
Appointment
The border-spacing attribute is applied to the <table> tag and is used to determine the distance between the table cells in pixels. HTML has a similar cellspacing tool.
Both of these attributes cannot be applied to the same table because CSS takes precedence over HTML. Otherwise, only border-spacing will work, and the browser will ignore cellspacing.
Attribute properties can be demonstrated in tabular form for clarity.
| Application | Sets the gap between cells |
| Default value | 0 px |
| Inheritance | Yes |
| Animation | Not |
| Works with versions | CSS 2, 3 |
Due to the fact that border-spacing works with CSS 2, it is correctly displayed by the vast majority of modern browsers. Sites that were written about a dozen years ago using this already obsolete technology are available for visual perception.
Syntax
In order to push the table cells to the desired distance, you need to apply the border-spacing attribute to the <table> tag, set the length parameter and a number that expresses the number of pixels for it. In this case, a space between the number and the unit of measurement is not set. For example, if the cells in the rows need to be spaced 12 and the columns 18 pixels apart, the CSS code would look like this:
table { border-spacing: 12px 18px; }
An attribute can have two values, as in the above example, or it can have one:
- When two parameters are specified, the first sets the horizontal distance, and the second sets the vertical distance.
- If one is specified, then it determines the same distance both horizontally and vertically.
It should be noted that when designing a table, the thickness (in pixels) of the borders of the cells and their number should also be taken into account. Otherwise, the finished table will be displayed with distortions.
Usage example
Terms of Reference: it is necessary to create a table in which to display popular browsers and their minimal versions, from which the use of border-spacing in CSS becomes available. Spread cells by 15 pixels both horizontally and vertically. The implementation of the task will look like this:
The absence of the animation property means that with the help of markup languages, the spaces between cells cannot be filled with color or other graphic effects applied to them. For this, graphic editors (GIMP, Photoshop, Inkscape) are used.