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

2020-03-24 17:35:46

字體：大中小

來源：轉載

供稿：網友

CSS如何設置table表格邊框樣式

對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-atable{border:1pxsolid#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>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-btabletd{border:1pxsolid#F00}
/*css注釋：只對tabletd標簽設置紅色邊框樣式*/
</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>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設置邊框后，中間出現雙邊框樣式案例截圖
對td設置邊框后，中間出現雙邊框樣式案例截圖

4、

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

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

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

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

1、對應css代碼：

<style>
.table-ctable{border-right:1pxsolid#F00;border-bottom:1pxsolid#F00}
.table-ctabletd{border-left:1pxsolid#F00;border-top:1pxsolid#F00}
/*
css 注釋：
只對tabletd設置左與上邊框；
對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>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、表格邊框實現案例截圖

完美實現table表格邊框樣式截圖
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"即可，得到：

<tablewidth="400"border="0"cellspacing="1"cellpadding="0">

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

2、css代碼：

<style>
.table-dtable{background:#F00}
.table-dtabletd{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>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>