Sample code Sharing for css:border-spacing properties (table border spacing)

First, border-spacing properties

We know that the table joins the border by default, like so:

We explained in the previous section how to combine table borders (eliminating table border spacing). But in actual development, it is possible to set the spacing of the table borders.

In CSS, we use the Border-spacing property to define the table border spacing.

Grammar:

Border-spacing: Pixel value;

Description

This property specifies the distance between the cell boundaries. When only 1 pixel values are specified, this value is used for horizontal and vertical spacing, and when 2 length values are specified, the 1th is used for horizontal spacing and the 2nd for vertical spacing.

In the CSS beginner stage, all are using pixels as units, in the CSS advanced we will be in-depth explanation of other CSS units.

Example:

<! DOCTYPE html> 
The preview effect in the browser is as follows:


Analysis:

"Border-spacing:5px 10px" defines the horizontal spacing between cells as 5px, with a vertical distance of 10px.

The Border-spacing property, like the Border-collapse attribute learned in the previous lesson, requires only the table element settings to take effect, no need to set it in th, TD elements, resulting in code redundancy.