CSS Grammar collation for Table borders (1) _ Basic Tutorial

Source: Internet
Author: User
Tags border color dashed line
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: <值> Value >
allowable value: Color, {1,4}
Initial value: The value of the Color property
applies To: All Objects
Backward compatible: No
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: Value >
allowable value: [none | dotted | dashed | solid | double | groove | Ridge | Inset | Outset]{1,4}
Initial value: None
Applies To: All Objects
Backward compatible: No
Border style properties are 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: dotted;
Dashed: dashed line;
Solid: solid;
Double: double line;
Groov E: Groove Line;
Ridge: Ridge Line;
inset: concave;
outset: outer convex
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.