CSS style table syntax for table borders

CSS style table syntax for table borders
We know that Dreamweaver has done a great job in Table creation, but in some cases it is still necessary to combine CSS to achieve some specific effects. Next we will first sort out the CSS syntax for the table border, then we will introduce how to beautify the border of a table with CSS.

CSS syntax for table borders

The specific content includes: 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: <value>

Allowed value: thin | medium | thick | <length>

Initial Value: Medium

Applicable to: all objects

Backward 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 the three keywords, regardless of the font size or length, and can be used to implement proportional width. Negative values are not allowed. You can also use the upper border, the border width, or the border attribute to slightly write.

2. Right Border Width

Syntax: border-right-width: <value>

Allowed value: thin | medium | thick | <length>

Initial Value: Medium

Applicable to: all objects

Backward compatible: No

The Right Border Width attribute is used to specify the width of the Right Border of an element. The value can be one of the three keywords, regardless of the font size or length, and can be used to implement proportional width. Negative values are not allowed. You can also use the right border, border width, or border attribute to slightly write.

3. Bottom Border Width

Syntax: border-bottom-width: <value>

Allowed value: thin | medium | thick | <length>

Initial Value: Medium

Applicable to: all objects

Backward compatible: No

The Bottom Border Width attribute is used to specify the width of the Bottom Border of an element. The value can be one of the three keywords, regardless of the font size or length, and can be used to implement proportional width. Negative values are not allowed. You can also use the lower border, the border width, or the border attribute to slightly write.

4. Left Border Width

Syntax: border-left-width: <value>

Allowed value: thin | medium | thick | <length>

Initial Value: Medium

Applicable to: all objects

Backward compatible: No

The Left Border Width attribute is used to specify the width of the Left Border of an element. The value can be one of the three keywords, regardless of the font size or length, and can be used to implement proportional width. Negative values are not allowed. You can also use the left border, border width, or border attribute to slightly write.

5. Border Width

Syntax: border-width: <value>

Allowed value: [thin | medium | thick | <length>}

Initial Value: Undefined

Applicable to: all objects

Backward compatible: No

The Border Width attribute uses one to four values to set the border of an element. The value is a keyword or length. Negative value length is not allowed. If the four values are given, they are applied to the pattern of the top, right, bottom, and left border 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 logarithm. This attribute is omitted from the top Border width, Right Border width, Bottom Border width, and Left Border width. You can also use the slightly written border attribute.

6. border color

Syntax: border-color: <value>

Allowed value: <color> {1, 4}

Initial Value: Color Attribute Value

Applicable to: all objects

Backward compatible: No

The border color attribute sets the border color of an element. You can use one or four keywords. If the four values are given, they are applied to the pattern of the top, right, bottom, and left border 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 logarithm. You can also use the slightly written border attribute.

7. Border Style

Syntax: border-style: <value>

Allowed value: [none | dotted | dashed | Solid | double | groove | ridge | inset | outset}

Initial Value: None

Applicable to: all objects

Backward compatible: No

The border style attribute is used to set the style of an element border. This attribute must be used to specify the visible border. You can use one or four keywords. If the four values are given, they are applied to the pattern of the top, right, bottom, and left border 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 logarithm. You can also use the slightly written border attribute.

None: No style;
Dotted: dot line;
Dashed: dotted line;
Solid: solid line;
Double: double line;
Groove: Groove;
Ridge: spine;
Inset: Inner Concave;
Outset: convex.

8. Upper Border

Syntax: border-top: <value>

Allowed value: <Upper Border Width >||< border style >||< color>

Initial Value: Undefined

Applicable to: all objects

Backward compatible: No

The upper border attribute is a short write that is used to set the width, style, and color of an element's upper border. Note that only one border style can be provided. You can also use the slightly written border attribute.

9. Right Border

Syntax: border-Right: <value>

Allowed value: <Right Border Width >||< border style >||< color>

Initial Value: Undefined

Applicable to: all objects

Backward compatible: No

The right border attribute is a brief description of the width, style, and color of the Right Border of an element. Note that only one border style can be provided. You can also use the slightly written border attribute.

10. Bottom Border

Syntax: border-bottom: <value>

Allowed value: <Bottom Border Width >||< border style >||< color>

Initial Value: Undefined

Applicable to: all objects

Backward compatible: No

The bottom border attribute is a slight write that is used to set the width, style, and color of the Bottom Border of an element. Note that only one border style can be provided. You can also use the slightly written border attribute.

11. Left Border

Syntax: border-left: <value>

Allowed value: <Left Border Width >||< border style >||< color>

Initial Value: Undefined

Applicable to: all objects

Backward compatible: No

The Left Border attribute is a brief description of the width, style, and color of the Left Border of an element. Note that only one border style can be provided. You can also use the slightly written border attribute.

12. Border

Syntax: Border: <value>

Allowed value: <Border Width >||< border style >||< color>

Initial Value: Undefined

Applicable to: all objects

Backward compatible: No

The border attribute is a slight write that is used to set the width, style, and color of an element border.

Border declaration examples include:

H2 {border: Groove 3em}
A: link {border: solid blue}
A: visited {border: thin dotted #800080}
A: active {border: thick double red}

You can set only four border types. You can only specify the width and style of a border group. To give different values of the four borders of an element, the Web Builder must use one or more attributes, such: top border, right border, bottom border, left border, border color, Border width, border style, top Border width, Right Border width, Bottom Border width or Left Border width.

13. Width

Syntax: width: <value>

Allowed value: <length >|< percentage> | auto

Initial Value: Auto

Applicable to: block-level and replacement Elements

Backward compatible: No

The initial value of the width attribute is "Auto", that is, the original width of the element (that is, the width of the element itself ). For the percentage, see the width of the upper-level element. Negative Length values are not allowed.

14. Height

Syntax: Height: <value>

Allowed value: <length> | auto

Initial Value: Auto

Applicable to: block-level and replacement Elements

Backward compatible: No

The initial value of the height attribute is "Auto", that is, the original height of the element (that is, the height of the element itself ,). For the percentage, see the width of the upper-level element. Negative Length values are not allowed.

15. Related labels

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