CSS syntax arrangement for table borders (1)_Basic tutorial

We know that Dreamweaver has done an excellent job in making tables, but at some point it still has to be combined with CSS to achieve some specific effects. Let’s first sort out the CSS syntax for table borders, and then introduce how to use CSS to beautify the borders of tables. . CSS syntax for table borders

Specific contents include: top border width, right border width, bottom border width, left border width, border width, border color, border style, top border, bottom border, left border, Right border, border, width, height, related labels, etc.
1. Top border width

Syntax: border-top-width:
Allowed values: thin | medium | thick |
Initial value: medium
Applicable to: All objects
Backwards compatible: No
The top border width attribute is used to specify the width of the top border of an element. The value can be one of three keywords, none of which are affected by font size or length, and can be used to implement proportional widths. Negative values ​​are not allowed. It can also be used to abbreviate the top border, the width of the border, or the properties of the border.
　2. Right border width

Syntax: border-right-width:
Allowed values: thin | medium | thick |
Initial value: medium
Applicable to: All objects
Backwards compatible: No
The right border width attribute is used to specify the width of the right border of the element. The value can be one of three keywords, none of which are affected by font size or length, and can be used to implement proportional widths. Negative values ​​are not allowed. Can also be used to abbreviate the right border, border width, or border properties.
3. Bottom border width

Syntax: border-bottom-width:
Allowed values: thin | medium | thick |
Initial value: medium
Applicable to: All objects
Backwards compatible: No
The bottom border width attribute is used to specify the width of the bottom border of the element. The value can be one of three keywords, none of which are affected by font size or length, and can be used to implement proportional widths. Negative values ​​are not allowed. It can also be used to abbreviate the bottom border, the width of the border, or the properties of the border.
4. Left border width

Syntax: border-left-width:
Allowed values: thin | medium | thick |
Initial value: medium
Applicable to: All objects
Backwards compatible: No
The left border width attribute is used to specify the width of the left border of the element. The value can be one of three keywords, none of which are affected by font size or length, and can be used to implement proportional widths. Negative values ​​are not allowed. It can also be used to abbreviate the left border, the width of the border, or the properties of the border.
5. Border width

Syntax: border-width:
Allowed values: [ thin | medium | thick | ]{1,4}
Initial value: Undefined
Applies to: All objects
Backward compatible: No
The border-width property sets the border of the element with one to four values. The value is a keyword or length. Negative lengths are not allowed. If all four values ​​are given, they apply to the top, right, bottom, and left border styles respectively. If a value is given, it will be applied to each edge. If two or three values ​​are given, the omitted value is equal to the opposite side. This property is an abbreviation for the top border width, right border width, bottom border width, and left border width properties. You can also use the abbreviated border attribute.
　6. Border color

Syntax: border-color:
Allowed values: {1,4}
Initial value: The value of the color attribute
Applicable To: All objects
Backwards compatible: No
The border-color property sets the border color of an element. You can use one to four keywords. If all four values ​​are given, they apply to the top, right, bottom, and left border styles respectively. If a value is given, it will be applied to each edge. If two or three values ​​are given, the omitted value is equal to the opposite side. You can also use the abbreviated border attribute.
7. Border style

Syntax: border-style:
Allowed values: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1, 4}
Initial value: none
Applicable to: all objects
Backward compatibility: No
The border style attribute is used to set the style of an element's border. This property must be used to specify a visible border. You can use one to four keywords. If all four values ​​are given, they apply to the top, right, bottom, and left border styles respectively. If a value is given, it will be applied to each edge. If two or three values ​​are given, the omitted value is equal to the opposite side.You can also use the abbreviated border attribute.

none: no style;
dotted: dotted line;
dashed: dashed line;
solid: solid line;
double: double line;
groove: grooved line;
ridge: ridge;
inset: concave;
outset: convex