CSS syntax for table borders

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 it. The border of the table.

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

Backward compatibility: no

Top border width property is used Specifies the width of an element's top border. 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

Backward compatibility: no

The right border width property is used for Specifies the width of the element's right border. 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

Backward compatibility: no

The bottom border width attribute is used Specifies the width of the element's bottom border. 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 property is used for Specifies the width of the element's left border. 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 | < ;Length> ]{1,4}

Initial value: undefined

Applicable to: all objects

Backward compatibility: No

Border The width attribute sets the bounds of an element with one to four values, where 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 shorthand for the top, right, bottom, and left 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

Backward compatibility: No

The border color attribute sets the value of an element Border color. 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.

8. Top border

Syntax: border-top:

Allowed values: | | ||

Initial Value: Undefined

Applies to: All Objects

Backward Compatibility: No

The border-top attribute is a shorthand for setting the width, style, and color of an element's border. Note that only one border style can be given. You can also use the abbreviated border attribute.

9. Right border

Syntax: border-right:

Allowed values: | | ||

Initial Value: Undefined

Applies to: All Objects

Backward Compatibility: No

The right border attribute is a shorthand for setting the width, style, and color of an element's right border. Note that only one border style can be given. You can also use the abbreviated border attribute.

10. Bottom border

Syntax: border-bottom:

Allowed values: | | ||

Initial Value: Undefined

Applies to: All Objects

Backward Compatibility: No

The border-bottom property is a shorthand for setting the width, style, and color of an element's bottom border. Note that only one border style can be given. You can also use the abbreviated border attribute.

11. Left border

Syntax: border-left:

Allowed values: | | ||

Initial Value: Undefined

Applies to: All Objects

Backward Compatibility: No

The left border attribute is a shorthand for setting the width, style, and color of an element's left border. Note that only one border style can be given. You can also use the abbreviated border attribute.

12. Border

Syntax: border:

Allowed values: || ||

Initial value: Undefined

Applies to: All objects

Backward compatibility: No

Border Properties are shorthand for setting 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 attribute can only set four kinds of borders; it can only give the width and style of a set of borders. In order to give different values ​​for the four borders of an element, web page creators must use one or more attributes, such as: 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:

Allowed values: | | auto

Initial value: auto

Applicable to: block-level and replaced elements

Backwards compatibility: No

The initial value of the width attribute is " auto", which is the original width of the element (or the width of the element itself). The percentage refers to the width of the parent element. Negative length values ​​are not allowed.

14. Height

Syntax: height:

Allowed values: | auto

Initial value: auto

Applicable to: block-level and replacement elements

Backwards compatibility: No

The initial value of the height attribute is "auto", which is The original height of the element (there is the height of the element itself). The percentage refers to the width of the parent element. Negative length values ​​are not allowed.

15. Related tags

table: table label, the definition of the entire table style should be placed in table;
td: cell label, the definition of cell style should be placed in td.