5.28日音訊,css表格邊框?qū)嵗斀?。表格是大家所熟悉的，以前的網(wǎng)站也大都是用表格來做的，當(dāng)然現(xiàn)在用表格也是可以做的，只是其維護(hù)性成本較高，現(xiàn)在才轉(zhuǎn)到div+css的布局上來，但是表格也并非一無是處，在處理數(shù)據(jù)存儲(chǔ)、數(shù)據(jù)展示等它的優(yōu)點(diǎn)還是很明顯的，所以我們?cè)趯?shí)際運(yùn)用中也要擇優(yōu)用之，下面介紹一下，CSS如何設(shè)置table表格邊框樣式。
對(duì)table設(shè)置css樣式邊框，分為幾種情況：
1、只對(duì)table設(shè)置邊框
2、對(duì)td設(shè)置邊框
3、對(duì)table和td技巧性設(shè)置表格邊框
4、對(duì)table和td設(shè)置背景，實(shí)現(xiàn)完美表格邊框
以下DIVCSS5對(duì)以上幾種實(shí)現(xiàn)html表格邊框樣式進(jìn)行講解與案例演示。為了便于觀察，divcss5均設(shè)置所有案例表格為1px實(shí)線紅色邊框?yàn)槔?；table寬度為400px;表格為三列三行，對(duì)以上四種情況表格外層加個(gè)div盒子，分別CSS命名為“.table-a”、“.table-b”、“.table-c”、“.table-d”。
一、只對(duì)表格table標(biāo)簽設(shè)置邊框-TOP
只對(duì)table標(biāo)簽設(shè)置border（邊框）樣式，將讓此表格最外層table一個(gè)邊框，而表格內(nèi)部不產(chǎn)生邊框樣式。
案例詳細(xì)如下：
1、對(duì)應(yīng)css代碼
<style>
.table-atable{border:1pxsolid#F00}
/*css注釋：只對(duì)table標(biāo)簽設(shè)置紅色邊框樣式*/
</style>
2、對(duì)應(yīng)html代碼片段
<divclass="table-a">
<tablewidth="400"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdwidth="105">站名</td>
<tdwidth="181">網(wǎng)址</td>
<tdwidth="112">說明</td>
</tr>
<tr>
<td>DIVCSS</td>
<td>artdesignsale.com</td>
<td>CSS學(xué)習(xí)</td>
</tr>
<tr>
<td>CSS</td>
<td>artdesignsale.com</td>
<td>CSS切圖</td>
</tr>
</table>
</div>
3、案例截圖
css對(duì)table設(shè)置邊框案例截圖-僅對(duì)table標(biāo)簽設(shè)置邊框
4、在線演示
查看案例
二、對(duì)td設(shè)置邊框-TOP
對(duì)table表格td設(shè)置邊框樣式，表格對(duì)象內(nèi)td將實(shí)現(xiàn)邊框樣式，但中間部分td會(huì)導(dǎo)致出現(xiàn)雙邊框。
詳細(xì)案例教程如下：
1、對(duì)應(yīng)css代碼
<style>
.table-btabletd{border:1pxsolid#F00}
/*css注釋：只對(duì)tabletd標(biāo)簽設(shè)置紅色邊框樣式*/
</style>
2、對(duì)應(yīng)html源代碼片段
<divclass="table-b">
<tablewidth="400"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdwidth="105">站名</td>
<tdwidth="181">網(wǎng)址</td>
<tdwidth="112">說明</td>
</tr>
<tr>
<td>DIVCSS</td>
<td>artdesignsale.com</td>
<td>CSS學(xué)習(xí)</td>
</tr>
<tr>
<td>CSS</td>
<td>artdesignsale.com</td>
<td>CSS切圖</td>
</tr>
</table>
3、案例截圖
對(duì)td設(shè)置邊框后，中間出現(xiàn)雙邊框樣式案例截圖
4、在線演示
查看案例
三、對(duì)table和td技巧性設(shè)置表格邊框-TOP
如上第二點(diǎn)，只對(duì)表格對(duì)象td設(shè)置單一邊框樣式，中間部分td與td標(biāo)簽之間就會(huì)出現(xiàn)雙邊框現(xiàn)象。
解決方法：對(duì)td只設(shè)置兩個(gè)邊的邊框，對(duì)table也設(shè)置兩個(gè)邊的邊框樣式。
解釋：對(duì)td設(shè)置左與上邊框，這樣td與td相鄰就會(huì)只出現(xiàn)單一邊框樣式，這樣就會(huì)出現(xiàn)表格右側(cè)和下部沒有邊框，這個(gè)時(shí)候我們?cè)O(shè)置table右和下邊框解決顯示右側(cè)和下側(cè)td剩下未顯示邊框。
1、對(duì)應(yīng)css代碼：
<style>
.table-ctable{border-right:1pxsolid#F00;border-bottom:1pxsolid#F00}
.table-ctabletd{border-left:1pxsolid#F00;border-top:1pxsolid#F00}
/*
css注釋：
只對(duì)tabletd設(shè)置左與上邊框；
對(duì)table設(shè)置右與下邊框；
為了便于截圖，我們將css注釋說明換行排版
*/
</style>
2、對(duì)應(yīng)html源代碼片段：
<divclass="table-c">
<tablewidth="400"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdwidth="105">站名</td>
<tdwidth="181">網(wǎng)址</td>
<tdwidth="112">說明</td>
</tr>
<tr>
<td>divcss</td>
<td>artdesignsale.com</td>
<td>CSS學(xué)習(xí)</td>
</tr>
<tr>
<td>CSS</td>
<td>artdesignsale.com</td>
<td>CSS切圖</td>
</tr>
</table>
3、表格邊框?qū)崿F(xiàn)案例截圖
CSS完美實(shí)現(xiàn)htmltable表格邊框樣式截圖
4、在線演示
查看案例
推薦此方法設(shè)置table表格邊框樣式。
四、對(duì)table和td設(shè)置背景，實(shí)現(xiàn)完美表格邊框-TOP
1、基礎(chǔ)設(shè)置
1）、先設(shè)置tablecss背景為紅色
2）、設(shè)置table單元之間間距為1
使用DW軟件輔助設(shè)置table表格單元間距為1，具體DW軟件可視化操作步驟簡要說明，首先（視圖模式）選中表格后，對(duì)應(yīng)DW軟件編輯窗口底部會(huì)“屬性”面板會(huì)出現(xiàn)對(duì)應(yīng)table表格屬性設(shè)置地方，我們將“間隔”填寫為“1”。這個(gè)時(shí)候我們會(huì)看到table表格標(biāo)簽里cellspacing值為“1”（cellspacing="1"）。
借助DW軟件設(shè)置表格單元之間間距
或
直接對(duì)<table>標(biāo)簽內(nèi)cellspacing="1"即可，得到：
<tablewidth="400"border="0"cellspacing="1"cellpadding="0">
3）、設(shè)置tabletd背景為白色
2、css代碼：
<style>
.table-dtable{background:#F00}
.table-dtabletd{background:#FFF}
/*
css注釋：設(shè)置table背景為紅色，td背景為白色*/
</style>
3、對(duì)應(yīng)html源代碼：
<divclass="table-d">
<tablewidth="400"border="0"cellspacing="1"cellpadding="0">
<tr>
<tdwidth="105">站名</td>
<tdwidth="181">網(wǎng)址</td>
<tdwidth="112">說明</td>
</tr>
<tr>
<td>divcss</td>
<td>artdesignsale.com</td>
<td>CSS學(xué)習(xí)</td>
</tr>
<tr>
<td>CSS</td>
<td>artdesignsale.com</td>
<td>CSS切圖</td>
</tr>
</table>
</div>
4、表格邊框案例截圖
設(shè)置表格背景顏色實(shí)現(xiàn)邊框樣式截圖
五、csstable表格邊框?qū)崿F(xiàn)總結(jié)-TOP
以上四種方式實(shí)現(xiàn)table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。希望方法對(duì)大家有幫助并能掌握，平時(shí)需要時(shí)靈活運(yùn)用，當(dāng)然大家也可以推陳出新，創(chuàng)造更多的方法來實(shí)現(xiàn)，但不管用哪種方法，我們都講究實(shí)際、高效、簡潔等原則，這樣的話不但使做好的網(wǎng)頁好看，兼容性好，也使之符合用戶體驗(yàn)、以此來檢驗(yàn)一個(gè)前端網(wǎng)頁制作人員的功底和能力。
