css表格邊框樣式

網頁table邊框樣式CSS匯總

2010/06/10 07:37 P.M.

網頁table邊框樣式CSS匯總
表格是資料的載體，不再是布局的方式，雖然我們不需要表格來進行網頁布局了，但很多表格式的資料，還是需要表格這一形式發揮它的作用！我們知道
Dreamweaver在表格製作方面做得非常出色，但是在某些時候還是必須結合css才能達到一些特定效果
1.上邊框寬度
以下是引用片段：
　　文法: border-top-width: <值>
　　允許值: thin | medium | thick | <長度>
　　初始值: medium
　　適用於: 所有對象
　　向下相容: 否
　　上邊框寬度屬性用於指定一個元素上邊框的寬度。值可以是三個關鍵字其中的一個，都不受字型大小或長度的影響，可以用於實現成比例的寬度。不允許使用負
值。也可以用在上邊框、邊框的寬度或邊框的屬性略寫。
2.右邊框寬度
以下是引用片段：
　　文法: border-right-width: <值>
　　允許值: thin | medium | thick | <長度>
　　初始值: medium
　　適用於: 所有對象
　　向下相容: 否
　　右邊框寬度屬性用於指定元素的右邊框的寬度。值可以是三個關鍵字其中的一個，都不受字型大小或長度的影響，可以用於實現成比例的寬度。不允許使用負
值。也可以用在右邊框、邊框的寬度或邊框的屬性略寫。
3.下邊框寬度
以下是引用片段：
　　文法: border-bottom-width: <值>
　　允許值: thin | medium | thick | <長度>
　　初始值: medium
　　適用於: 所有對象
　　向下相容: 否
　　下邊框寬度屬性用於指定元素的下邊框的寬度。值可以是三個關鍵字其中的一個，都不受字型大小或長度的影響，可以用於實現成比例的寬度。不允許使用負
值。也可以用在下邊框、邊框的寬度或邊框的屬性略寫。
4.左邊框寬度
以下是引用片段：
　　文法: border-left-width: <值>
　　允許值: thin | medium | thick | <長度>
　　初始值: medium
　　適用於: 所有對象
　　向下相容: 否
　　左邊框寬度屬性用於指定元素的左邊框的寬度。值可以是三個關鍵字其中的一個，都不受字型大小或長度的影響，可以用於實現成比例的寬度。不允許使用負
值。也可以用在左邊框、邊框的寬度或邊框的屬性略寫。
5.邊框寬度
以下是引用片段：
　　文法: border-width: <值>
　　允許值: [ thin | medium | thick | <長度> ]{1,4}
　　初始值: 未定義
　　適用於: 所有對象
　　向下相容: 否
　　邊框寬度屬性用一到四個值來設定元素的邊界，值是一個關鍵字或長度。不允許使用負值長度。如果四個值都給出了，它們分別應用於上、右、下和左邊框的式
樣。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。
這個屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬度屬性的略寫。也可以使用略寫的邊框屬性。
6.邊框顏色
以下是引用片段：
　　文法: border-color: <值>
　　允許值: <顏色>{1,4}
　　初始值: 顏色屬性的值
　　適用於: 所有對象
　　向下相容: 否
　　邊框顏色屬性設定一個元素的邊框顏色。可以使用一到四個關鍵字。如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。如果給出一個值，它將
被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。也可以使用略寫的邊框屬性。
7.邊框樣式
以下是引用片段：
　　文法: border-style: <值>
　　允許值: [ none | dotted | dashed | solid | double | groove | ridge |
inset | outset ]{1,4}
　　初始值: none
　　適用於: 所有對象
　　向下相容: 否
　　邊框樣式屬性用於設定一個元素邊框的樣式。這個屬性必須用於指定可見的邊框。可以使用一到四個關鍵字。如果四個值都給出了，它們分別應用於上、右、下
和左邊框的式樣。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。也可以使用略寫的邊框屬性。
以下是引用片段：
　　none：無樣式；
　　dotted：點線；
　　dashed：虛線；
　　solid：實線；
　　double：雙線；
　　groove：槽線；
　　ridge：脊線；
　　inset：內凹；
　　outset：外凸
8.上邊框
以下是引用片段：
　　文法: border-top: <值>
　　允許值: <上邊框寬度> || <邊框式樣> || <顏色>
　　初始值: 未定義
　　適用於: 所有對象
　　向下相容: 否
　　上邊框屬性是一個用於設定一個元素上邊框的寬度、式樣和顏色的略寫。注意只能給出一個邊框式樣。也可以使用略寫的邊框屬性。
9.右邊框
　　文法: border-right: <值>
　　允許值: <右邊框寬度> || <邊框式樣> || <顏色>
　　初始值: 未定義
　　適用於: 所有對象
　　向下相容: 否
　　右邊框屬性是一個用於設定一個元素右邊框的寬度、式樣、和顏色的略寫。注意只能給出一個邊框式樣。也可以使用略寫的邊框屬性。　　
10.下邊框
以下是引用片段：
　　文法: border-bottom: <值>
　　允許值: <下邊框寬度> || <邊框式樣> || <顏色>
　　初始值: 未定義
　　適用於: 所有對象
　　向下相容: 否
　　下邊框屬性是一個用於設定一個元素的下邊框的寬度、式樣和顏色的略寫。注意只能給出一個邊框式樣。也可以使用略寫的邊框屬性。
11.左邊框
以下是引用片段：
　　文法: border-left: <值>
　　允許值: <左邊框寬度> || <邊框式樣> || <顏色>
　　初始值: 未定義
　　適用於: 所有對象
　　向下相容: 否
　　左邊框屬性是一個用於設定一個元素左邊框的寬度、式樣和顏色的略寫。注意只能給出一個邊框式樣。也可以使用略寫的邊框屬性。
下面的細線表格是用cellspacing來實現的，用表格的背景色做為邊框的顏色。不方便的是每一行都要再設定一個背景色。

<
font>下面的細線表格是設定bordercolordark來實現的，因為預設的border其實寬度是2，即使設定為1也沒
用，bordercolorlight和bordercolordark一起作為表格的邊框。所以設定其中一個為背景色，表格邊框看起來就會細一些。

下面的表格是用css來實現的。
css技巧比較多，列舉幾種：
A：設定border="1"、bordercolor，再加上style="border-collapse:collapse;"。style裡面的內容就是css。

B：這個用css來設定邊框，結果只顯示表格的最外層邊線。裡面的線不顯示。

C: 如果你想要頁面的所有表格都是細線表格，也不用一個一個去設定。因為這裡是示範用，所以加上了id，你用的時候直接
在head裡面加上style標籤，裡面寫 table {border-collapse:collapse;} td {border:#000000 1px solid;}，所有該頁的table就都是細線了。

表格邊框控制的其他方法(rules和frame)：
說明：
1、這兩個屬性有時候設定會看不到作用，這是因為與表格邊框的css設定衝突。所以說如果需要這些效果，並且還需要細線，那就用下面的方式來實現即設定這
三個屬性，border="1" bordercolor="#000000"
style="border-collapse:collapse;"，然後再設定rules和frame，如果你測試到有其他的方法，希望能發布出來和
大家共用。
2、下面的效果只是我列舉出來做示範用的，靈活設定這些屬性可以做出更多效果。
rules="cols"的效果（中間的橫線沒有了）

frame="void"的效果（外邊線沒有了）

rules和frame結合的效果(frame="hsides" rules="rows"，只留下橫線)