一、只對表格table標籤設定邊框 - TOP
只對table標籤設定border（邊框）樣式，將讓此表格最外層table一個邊框，而表格內部不產生邊框樣式。
案例詳細如下：
1、對應css程式碼
<style>.table-a table{border:1px solid #F00} /* css註釋：只對table標籤設定紅色邊框樣式 */ style>
2、對應html程式碼片段
<divclass="table-a"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>div>
二、對td設定邊框 - TOP
對table表格td設定邊框樣式，表格物件內td將實現邊框樣式，但中間部分td會導致出現雙邊框。
詳細案例教程如下：
<style>.table-b table td{border:1px solid #F00} /* css註釋：只對table td標籤設定紅色邊框樣式 */ style>
2、對應html原始碼片段
<divclass="table-b"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>
三、對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原始碼片段：
<divclass="table-c"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>
四、對table和td設定背景，實現完美表格邊框 - TOP
1、基礎設定
1）、先設定table css背景為紅色
2）、設定table單元之間間距為1
使用DW軟體輔助設定table表格單元間距為1，具體DW軟體視覺化操作步驟簡要說明，首先（檢視模式）選中表格後，對應DW軟體編輯視窗底部會“屬性”面板會出現對應table表格屬性設定地方，我們將“間隔”填寫為“1”。這個時候我們會看到table表格標籤裡cellspacing值為“1”（cellspacing="1"）。
藉助DW軟體設定表格單元之間間距
或
直接對
標籤內cellspacing="1"即可，得到：
<tablewidth="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原始碼：
<divclass="table-d"><tablewidth="400"border="0"cellspacing="1"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>div>
五、css table表格邊框實現總結 - TOP
以上四種方式實現table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。希望DIVCSS5整理總結html table邊框佈局方法對大家有幫助並能掌握，平時需要時靈活運用。
一、只對表格table標籤設定邊框 - TOP
只對table標籤設定border（邊框）樣式，將讓此表格最外層table一個邊框，而表格內部不產生邊框樣式。
案例詳細如下：
1、對應css程式碼
<style>.table-a table{border:1px solid #F00} /* css註釋：只對table標籤設定紅色邊框樣式 */ style>
2、對應html程式碼片段
<divclass="table-a"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>div>
二、對td設定邊框 - TOP
對table表格td設定邊框樣式，表格物件內td將實現邊框樣式，但中間部分td會導致出現雙邊框。
詳細案例教程如下：
1、對應css程式碼
<style>.table-b table td{border:1px solid #F00} /* css註釋：只對table td標籤設定紅色邊框樣式 */ style>
2、對應html原始碼片段
<divclass="table-b"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>
三、對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原始碼片段：
<divclass="table-c"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>
四、對table和td設定背景，實現完美表格邊框 - TOP
1、基礎設定
1）、先設定table css背景為紅色
2）、設定table單元之間間距為1
使用DW軟體輔助設定table表格單元間距為1，具體DW軟體視覺化操作步驟簡要說明，首先（檢視模式）選中表格後，對應DW軟體編輯視窗底部會“屬性”面板會出現對應table表格屬性設定地方，我們將“間隔”填寫為“1”。這個時候我們會看到table表格標籤裡cellspacing值為“1”（cellspacing="1"）。
藉助DW軟體設定表格單元之間間距
或
直接對
標籤內cellspacing="1"即可，得到：
<tablewidth="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原始碼：
<divclass="table-d"><tablewidth="400"border="0"cellspacing="1"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>div>
五、css table表格邊框實現總結 - TOP
以上四種方式實現table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。希望DIVCSS5整理總結html table邊框佈局方法對大家有幫助並能掌握，平時需要時靈活運用。