CSS syntax for table borders _css/html

We know that Dreamweaver does a very good job of making tables, but at some point it has to combine CSS to achieve some specific effects, so let's start with CSS syntax for table borders, and then explain how to use CSS to beautify the borders of a table.
CSS syntax for table borders

Details include: Top frame width, right border width, bottom frame width, left border width, borders width, border color, border style, top border, bottom frame, left box, right box, borders, width, height, relevant labels, etc.

1. Top Border Width
Syntax: border-top-width: <值>

Allowable Values: Thin | Medium | Thick | <长度>

Initial value: Medium

Applies To: All objects

Backwards compatibility: No

The top border Width property is used to specify the width of the bounding box on an element. The value can be one of three keywords, not affected by font size or length, and can be used to achieve proportional widths. Negative values are not allowed. You can also use the top box, the width of the border, or the properties of the border to write slightly.

2. Right Border width

Syntax: border-right-width: <值>

Allowable Values: Thin | Medium | Thick | <长度>

Initial value: Medium

Applies To: All objects

Backwards compatibility: No

The right border Width property is used to specify the width of the right border of the element. The value can be one of three keywords, not affected by font size or length, and can be used to achieve proportional widths. Negative values are not allowed. You can also use the right border, the width of the borders, or the properties of the border to write slightly.

3. Lower Border width

Syntax: border-bottom-width: <值>

Allowable Values: Thin | Medium | Thick | <长度>

Initial value: Medium

Applies To: All objects

Backwards compatibility: No

The bottom border Width property is used to specify the width of the bottom border of an element. The value can be one of three keywords, not affected by font size or length, and can be used to achieve proportional widths. Negative values are not allowed. You can also use the properties of the bottom border, the width of the bounding box, or the border to write slightly.

4. Left Border width

Syntax: border-left-width: <值>

Allowable Values: Thin | Medium | Thick | <长度>

Initial value: Medium

Applies To: All objects

Backwards compatibility: No

The left Border Width property is used to specify the width of the left border of the element. The value can be one of three keywords, not affected by font size or length, and can be used to achieve proportional widths. Negative values are not allowed. You can also use the left box, the width of the border, or the properties of the border to be slightly written.

5. Border width

Syntax: border-width: <值>

Allowable values: [Thin | medium | thick | <长度> ]{1,4}

Initial value: undefined

Applies To: All objects

Backwards compatibility: No

Border Width Property Sets the bounds of an element with one to four values, which is a keyword or length. Negative lengths are not allowed. If four values are given, they are applied to the top, right, bottom, and left border styles, respectively. If a value is given, it is applied to each edge. If two or three values are given, the omitted value is equal to the edge. This property is a slight write to the top border width, the right box width, the bottom border width, and the left border width property. You can also use the border properties that are slightly written.

6. Border color

Syntax: Border-color: <值>

Allowable values: <颜色> {1,4}

Initial value: The value of the Color property

Applies To: All objects

Backwards compatibility: No

The border color property sets the border color of an element. You can use one to four keywords. If four values are given, they are applied to the top, right, bottom, and left border styles, respectively. If a value is given, it is applied to each edge. If two or three values are given, the omitted value is equal to the edge. You can also use the border properties that are slightly written.

7. Border Style

Syntax: Border-style: <值>

Allowable values: [none | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4}

Initial value: None

Applies To: All objects

Backwards compatibility: No

The border Style property is used to style the border of an element. This property must be used to specify a visible border. You can use one to four keywords. If four values are given, they are applied to the top, right, bottom, and left border styles, respectively. If a value is given, it is applied to each edge. If two or three values are given, the omitted value is equal to the edge. You can also use the border properties that are slightly written.

None: no style;
Dotted: Point line;
Dashed: Dashed line;
Solid: solid line;
Double: two lines;
Groove: Groove Line;
Ridge: Ridge Line;
Inset: inner recess;
Outset: outer convex.

8. Top Border

Syntax: border-top: <值>


Allowable values: <上边框宽度> || <边框式样> || <颜色>

Initial value: undefined

Applies To: All objects

Backwards compatibility: No

The top border property is a slight write that sets the width, style, and color of the bounding rectangle on an element. Note that you can only give a border style. You can also use the border properties that are slightly written.

9. Right Border

Syntax: border-right: <值>

Allowable values: <右边框宽度> || <边框式样> || <颜色>

Initial value: undefined

Applies To: All objects

Backwards compatibility: No

The right border property is a slight write that sets the width, style, and color of the right border of an element. Note that you can only give a border style. You can also use the border properties that are slightly written.

10. Lower Border

Syntax: Border-bottom: <值>

Allowable values: <下边框宽度> || <边框式样> || <颜色>

Initial value: undefined

Applies To: All objects

Backwards compatibility: No

The bottom border property is a slight write that sets the width, style, and color of the bottom border of an element. Note that you can only give a border style. You can also use the border properties that are slightly written.

11. Left Border

Syntax: border-left: <值>

Allowable values: <左边框宽度> || <边框式样> || <颜色>

Initial value: undefined

Applies To: All objects

Backwards compatibility: No

The left border property is a slight write that sets the width, style, and color of the left border of an element. Note that you can only give a border style. You can also use the border properties that are slightly written.

12. Border

Syntax: border: <值>

Allowable values: <边框宽度> || <边框式样> || <颜色>

Initial value: undefined

Applies To: All objects

Backwards compatibility: No

The border property is a slight write that sets the width, style, and color of an element's border.

Examples of border declarations include:

H2 {Border:groove 3em}
a:link {Border:solid Blue}
a:visited {Border:thin dotted #800080}
a:active {Border:thick Double red}

The border property can only be set to four borders, only the width and style of a set of borders can be given. In order to give a different value to the four borders of an element, the creator must use one or more attributes, such as: top, right, bottom, border, border, width, border, top, border, border, width, or left box width.

13. Width

Syntax: Width: <值> Value >

Allowable value: Length > | Percent > | Auto

Initial value: Auto

for: block-level and replacement elements

Backwards compatibility: no

Width The initial value of the property is "Auto", which is the original width of the element (there is the element's own width). Percent refers to the width of the ancestor element. Negative length values are not allowed.

14. Height

Syntax: Height: value >

Allowable value: Length > | auto

Initial value: Auto

Applies To: block-level and replacement elements

Backwards compatibility: No

The Height property has an initial value of "Auto", which is the The original height of the element (there is the height of the element itself). Percent refers to the width of the ancestor element. Negative length values are not allowed.

15. For the label

Table: Table label, the entire table style definition should be placed in table;
TD: Cell label, the definition of cell style is placed in TD.

