[轉]CSS如何設置html table表格邊框樣式

原文地址:http://www.divcss5.com/wenji/w503.shtml

對table設置css樣式邊框，分為幾種情況：
1、只對table設置邊框
2、對td設置邊框
3、對table和td技巧性設置表格邊框
4、對table和td設置背景，實現完美表格邊框

以下DIVCSS5對以上幾種實現html 表格邊框樣式進行講解與案例演示。為了便於觀察，divcss5均設置所有案例表格為1px實線紅色邊框為例；table寬度為400px;表格為三列三行，對以上四種情況表格外層加個div盒子，分別CSS命名為“.table-a”、“.table-b”、“.table-c”、“.table-d”。

一、只對表格table標簽設置邊框   -   TOP

只對table標簽設置border（邊框）樣式，將讓此表格最外層table一個邊框，而表格內部不產生邊框樣式。

案例詳細如下：

1、對應css代碼

<style>
.table-a table{border:1px solid #F00}
/* css注釋：只對table標簽設置紅色邊框樣式 */
</style>

2、對應html代碼片段

<div class="table-a">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">網址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS學習</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切圖</td>
</tr>
</table>
</div>

3、案例截圖

css對table設置邊框案例截圖-僅對table標簽設置邊框

4、在線演示
查看案例

二、對td設置邊框   -   TOP

對table表格td設置邊框樣式，表格對象內td將實現邊框樣式，但中間部分td會導致出現雙邊框。

詳細案例教程如下：

1、對應css代碼

<style>
.table-b table td{border:1px solid #F00}
/* css注釋：只對table td標簽設置紅色邊框樣式 */
</style>

2、對應html源代碼片段

<div class="table-b">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">網址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS學習</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切圖</td>
</tr>
</table>

3、案例截圖

對td設置邊框后，中間出現雙邊框樣式 案例截圖

4、在線演示
查看案例

三、對table和td技巧性設置表格邊框   -   TOP

如上第二點，只對表格對象td設置單一邊框樣式，中間部分td與td標簽之間就會出現雙邊框現象。

解決方法：對td只設置兩個邊的邊框，對table也設置兩個邊的邊框樣式。

解釋：對td設置左與上邊框，這樣td與td相鄰就會只出現單一邊框樣式，這樣就會出現表格右側和下部沒有邊框，這個時候我們設置table右和下 邊框解決顯示右側和下側td剩下未顯示邊框。

1、對應css代碼：

<style>
.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00}
.table-c table td{border-left:1px solid #F00;border-top:1px solid #F00}
/*
css 注釋：
只對table td設置左與上邊框；
對table設置右與下邊框；
為了便於截圖，我們將css 注釋說明換行排版
*/
</style>

2、對應html源代碼片段：

<div class="table-c">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">網址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS學習</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切圖</td>
</tr>
</table>

3、表格邊框實現案例截圖

CSS完美實現html table表格邊框樣式截圖

4、在線演示
查看案例

推薦此方法設置table表格邊框樣式。

四、對table和td設置背景，實現完美表格邊框   -   TOP

1、基礎設置

1）、先設置table css背景為紅色

2）、設置table單元之間間距為1
使用DW軟件輔助設置table表格單元間距為1，具體DW軟件可視化操作步驟簡要說明，首先（視圖模式）選中表格后，對應DW軟件編輯窗口底部會“屬 性”面板會出現對應table表格屬性設置地方，我們將“間隔”填寫為“1”。這個時候我們會看到table表格標簽里cellspacing值為“1” （cellspacing="1"）。

借助DW軟件設置表格單元之間間距

或

直接對<table>標簽內cellspacing="1"即可，得到：

<table width="400" border="0" cellspacing="1" cellpadding="0">

3）、設置table td背景為白色

2、css代碼：

<style>
.table-d table{ background:#F00}
.table-d table td{ background:#FFF}
/*
css注釋：設置table背景為紅色，td背景為白色 */
</style>

3、對應html源代碼：

<div class="table-d">
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">網址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS學習</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切圖</td>
</tr>
</table>
</div>

4、表格邊框案例截圖

設置表格背景顏色實現邊框樣式截圖

五、css table表格邊框實現總結   -   TOP

以上四種方式實現table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。希望DIVCSS5整理總結html table邊框布局方法對大家有幫助並能掌握，平時需要時靈活運用。