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
Backwards compatible: 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
邊框樣式屬性用來設定一個元素邊框的樣式。這個屬性必須用來指定可見的邊框。可以使用一到四個關鍵字。如果四個值都給了，它們分別應用於上、右、下和左邊框框的式樣。如果給予一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。也可以使用略寫的邊框屬性。
none：無樣式；
dotted：點線；
dashed：虛線；
solid：實線； ：槽線；
ridge：脊線；
inset：內凹；
outset：外凸。
8.上邊框
語法: border-top:
寬度允許值: ||
初始值: 未定義
適用於: 所有物件
向下相容:用於設定一個元素上邊框的寬度、式樣和顏色的略寫。注意只能給一個邊框式樣。也可以使用略寫的邊框屬性。
9.右邊框
語法: border-right: 寬度允許值:
寬度允許值: ||
初始值: 未定義
適用於: 所有物件
向下相容:用於設定一個元素右邊框的寬度、式樣、和顏色的略寫。注意只能給一個邊框式樣。也可以使用略寫的邊框屬性。
10.下邊框
語法: border-bottom: 允許值: 🎜>
允許值: > ||
初始值: 未定義
適用於: 所有物件
向下相容:用於設定一個元素的下邊框的寬度、式樣和顏色的略寫。注意只能給一個邊框式樣。也可以使用略寫的邊框屬性。
11.左邊框
語法: border-left:
寬允許值: > ||
初始值: 未定義
適用於: 所有物件
向下相容:用來設定一個元素左邊框的寬度、式樣和顏色的略寫。注意只能給一個邊框式樣。也可以使用略寫的邊框屬性。
12.邊框
語法: border:
語法: border:
語法：>
初始值: 未定義
適用於: 所有物件
〜化物>否
向下對應邊框的寬度、式樣和顏色的略寫。
邊框聲明的例子包括：
H2 { border: groove 3em }
A:link {order: solid 3em }
A:linkorder {order: solid 3em }
A:linkorder {order: solid 3em }
A:linkorder {order: solid 3em }
}
A:active { border: thick double red }
邊框屬性只能設定四種邊框；只能給出一組邊框的寬度和式樣。為了給出一個元素的四種邊框的不同的值，網頁製作者必須用一個或更多的屬性，如：上邊框、右邊框、下邊框、左邊框、邊框顏色、邊框寬度、邊框式樣、上邊框寬度、右邊框寬度、下邊框寬度或左邊框寬度。
13.寬度
語法: width:
允許值: |
允許值: | 🎜> 初始值: auto
適用於: 區塊級與替換元素
向下相容: 否
向下相容: 否
向下相容: 否
14.高度
語法: height:
允許值:
允許值:
允許值: | : auto
適用於: 區塊級和替換元素
向下相容: 否
高度屬性的初始值為否「auto」高度(有就是元素自己的高度，)。百分比參考上級元素的寬度。不允許使用負的長度值。
15.相關標籤
table：表格標籤，對整個表格樣式的定義要放在table中；
td：單元格標籤，單元格樣式的定義要放在td中。
