轉(zhuǎn)載：轉(zhuǎn)載請(qǐng)注明來源：
Web前端(W3Cways.com) - Web前端學(xué)習(xí)之路
?
先了解一下砸西，table邊框如何設(shè)置
一秉氧、只對(duì)表格table標(biāo)簽設(shè)置邊框
只對(duì)table標(biāo)簽設(shè)置border（邊框）樣式，將讓此表格最外層table一個(gè)邊框演训，而表格內(nèi)部不產(chǎn)生邊框樣式弟孟。
CSS代碼：
.table-a table{border:1px solid #F00}
HTML代碼：
<div class="table-a">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="105">站名</td>
<td width="181">網(wǎng)址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>web前端開發(fā)</td>
<td>www.zjgsq.com</td>
<td>web前端學(xué)習(xí)之路</td>
</tr>
<tr>
<td>web前端開發(fā)</td>
<td>www.zjgsq.com</td>
<td>web前端學(xué)習(xí)之路</td>
</tr>
</tbody>
</table>
</div>
二、對(duì)td設(shè)置邊框
對(duì)table表格td設(shè)置邊框樣式样悟，表格對(duì)象內(nèi)td將實(shí)現(xiàn)邊框樣式拂募，但中間部分td會(huì)導(dǎo)致出現(xiàn)雙邊框。
CSS代碼：
.table-b table td{border:1px solid #F00}
HTML代碼：
<div class="table-b">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="105">站名</td>
<td width="181">網(wǎng)址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>web前端開發(fā)</td>
<td>www.zjgsq.com</td>
<td>web前端學(xué)習(xí)之路</td>
</tr>
<tr>
<td>web前端開發(fā)</td>
<td>www.zjgsq.com</td>
<td>web前端學(xué)習(xí)之路</td>
</tr>
</tbody>
</table>
</div>
三窟她、對(duì)table和td設(shè)置背景陈症，實(shí)現(xiàn)表格邊框
先設(shè)置table css背景為紅色, 再設(shè)置table單元之間間距為1。
此方法在web中顯示表格邊框雖然不錯(cuò)震糖，但是在打印時(shí)表格的邊框就沒有了录肯，因?yàn)橐话隳J(rèn)chrome也好，IE也好吊说，打印默認(rèn)設(shè)置都是不顯示背景顏色和圖片的论咏，需要自己手動(dòng)設(shè)置顯示于样，不是每個(gè)打印網(wǎng)頁(yè)的人都知道如何去設(shè)置顯示背景顏色和圖片，所以我們要用到方法四
CSS代碼：
.table-c table{ background:#F00}
.table-c table td{ background:#FFF}
HTML代碼：
<div class="table-c">
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td width="105">站名</td>
<td width="181">網(wǎng)址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>web前端開發(fā)</td>
<td>www.zjgsq.com</td>
<td>web前端學(xué)習(xí)之路</td>
</tr>
<tr>
<td>web前端開發(fā)</td>
<td>www.zjgsq.com</td>
<td>web前端學(xué)習(xí)之路</td>
</tr>
</tbody>
</table>
</div>
四潘靖、完美表格邊框
對(duì)table與td 分別設(shè)置1像素的邊框穿剖，再對(duì)邊框進(jìn)行合并，此方法無論在web或打印都能顯示出來
CSS代碼：
.table-d table{border:1px solid #F00;border-collapse:collapse;}
.table-d table td{border:1px solid #F00;}
HTML代碼：
<div class="table-d">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="105">站名</td>
<td width="181">網(wǎng)址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>web前端開發(fā)</td>
<td>www.zjgsq.com</td>
<td>web前端學(xué)習(xí)之路</td>
</tr>
<tr>
<td>web前端開發(fā)</td>
<td>www.zjgsq.com</td>
<td>web前端學(xué)習(xí)之路</td>
</tr>
</tbody>
</table>
</div>
AD：****【chrome二維碼插件】w3cways QR Code Generator
