CSS syntax for table borders

css| syntax we know that Dreamweaver is doing a good job in table making, but at some point it must be combined with CSS to achieve some specific effects, so we'll sort out the CSS syntax for the table border, and then explain how to use CSS to beautify the border of the table.

　　CSS syntax for table borders

The contents include the top border width, the right border width, the bottom frame width, the left border width, the border width, the borders color, the border style, the top border, the bottom box, the left border, the right border, borders, width, height, labels, and so on.

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

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The top box Width property is used to specify the width of the top border of an element. The value can be one of three keywords, not affected by the 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 top border, the width of the borders, or the border to write slightly.

　　2. Right Border width

Syntax: Border-right-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: 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 the 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 right border, the width of the borders, or the border to write slightly.

　　 3. Bottom Border Width

Syntax: Border-bottom-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The bottom border Width property is used to specify the width of the bottom border of the element. The value can be one of three keywords, not affected by the 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 borders, or the border to write slightly.

　　 4. Left Border width

Syntax: Border-left-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: 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 the 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 left border, the width of the bounding box, or the border to write slightly.

　　5. Border width

Syntax: Border-width: < value >

Allowable value: [Thin | medium | thick | < length >]{1,4}

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The border Width property sets the bounds of an element with a value of one to four values, which is a keyword or length. Negative length is not allowed. If four values are given, they apply to the style of the top, right, bottom, and left borders respectively. If a value is given, it is applied to each side. If two or three values are given, the omitted values are equal to the edges. This property is abbreviated for the top border width, the right border width, the bottom border width, and the left bounding width property. You can also use a border property that is slightly written.

　　6. Border color

Syntax: Border-color: < value >

Allowable value: < color >{1,4}

Initial value: The value of the Color property

Apply to: All objects

Backward compatible: No

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

　　7. Border Style

Syntax: Border-style: < value >

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

Initial value: None

Apply to: All objects

Backward compatible: No

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

None: no style;
Dotted: Dot line;
Dashed: dotted line;
Solid: solid line;
Double: two lines;
Groove: Groove Line;
Ridge: Ridge Line;
Inset: concave;
Outset: outer convex.

8. Top Border

Syntax: Border-top: < value >

Allowable value: < top border Width > | | < border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The top border property is an abbreviated write that sets the width, style, and color of the bounding box for an element. Note You can only give a border style. You can also use a border property that is slightly written.

　　9. Right frame

Syntax: Border-right: < value >

Allowable value: < right border width > | | < border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

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

　　10. Bottom Border

Syntax: Border-bottom: < value >

Allowable value: < bottom border width > | | < border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The bottom Border property is an abbreviated write about the width, style, and color of the bottom border of an element. Note You can only give a border style. You can also use a border property that is slightly written.

　　11. Left Box

Syntax: Border-left: < value >

Allowable values: < Left border Width > | | < border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

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

12. Border

Syntax: border: < value >

Allowable values: < border width > | | < border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

A border property is an abbreviated 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}

Border properties can only be set to four borders; only the width and style of a set of borders can be given. To give a different value to the four borders of an element, Web page makers must use one or more attributes such as the top border, the right border, the bottom border, the left box, the borders color, the borders width, the border style, the top border width, the right box width, the bottom frame width, or the left box width.

　　13. Width

Syntax: Width: < value >

Allowable value: < length > | <% > | Auto

Initial value: Auto

Applies To: block-level and substitution elements

Backward compatible: No

The initial value of the Width 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 substitution elements

Backward compatible: No

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

　　15. The label

Table: Form labels, the entire table style definition to be placed in the table;
TD: Cell label, the definition of cell style to be placed in TD.