CSS table border Style

CSS Summary of webpage table border Style

2010/06/10 07:37 p.m.

CSS Summary of webpage table border Style
Tables are the carrier of data and are no longer the layout method. Although we do not need tables for webpage layout, many table-based data, we still need the form to play its role! We know
Dreamweaver has done a great job in Table creation, but in some cases it is necessary to combine CSS to achieve some specific results.
1. Top Border Width
The following is a reference clip:
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.
Value. You can also use the upper border, the border width, or the border attribute to slightly write.
2. Right Border Width
The following is a reference clip:
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.
Value. You can also use the right border, border width, or border attribute to slightly write.
3. Bottom Border Width
The following is a reference clip:
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.
Value. You can also use the lower border, the border width, or the border attribute to slightly write.
4. Left Border Width
The following is a reference clip:
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.
Value. You can also use the left border, border width, or border attribute to slightly write.
5. Border Width
The following is a reference clip:
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 upper, right, lower, and left borders respectively.
Sample. 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
The following is a reference clip:
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 will
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
The following is a reference clip:
Syntax: border-style: <value>
Allowed value: [none | dotted | dashed | Solid | double | groove | ridge |
Inset | outset] {1, 4}
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 top, right, and bottom
And the style of the Left Border. 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.
The following is a reference clip:
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
The following is a reference clip:
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
The following is a reference clip:
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
The following is a reference clip:
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.
The following line table is implemented using cellspacing, and the background color of the table is used as the border color. It is inconvenient to set a background color for each row.

<
Font> the following line table is implemented by setting bordercolordark, because the default border actually has a width of 2, even if it is set to 1.
Use bordercolorlight and bordercolordark together as the border of the table. Therefore, if one of them is set as the background color, the table border looks finer.

The following table is implemented using CSS.
CSS skills:
A: set border = "1", bordercolor, plus style = "border-collapse: collapse ;". The content in the style is CSS.

B: CSS is used to set the border. Only the outermost edge of the table is displayed. The line is not displayed.

C: If you want all the tables on the page to be a thin table, you do not need to set them one by one. Because it is used for demonstration, so the ID is added, when you use it directly
Add the style label to the head, and write table {border-collapse: Collapse ;}td {border: #000000 1px solid ;}. all the tables on this page will be fine.

Other methods for table border control (rules and frame ):
Note:
1. These two attributes sometimes do not work, because they conflict with the CSS settings of the table border. Therefore, if you need these effects and require extra lines, you can set them in the following way:
Three attributes: border = "1" bordercolor = "#000000"
Style = "border-collapse: collapse;", and then set rules and frame. If you test other methods, you want to publish them and
Shared by all.
2. The following results are just for demonstration. You can set these attributes flexibly to make more results.
Rules = "Cols" effect (the middle horizontal line is absent)

Frame = "Void" effect (the outer line is absent)

Effect of combining rules and frame (frame = "hsides" rules = "rows", leaving only a horizontal line)