第1种对表格设置边框 效果
站名 | 网址 | 说明 |
DIVCSS5 | www.divcss5.com | CSS学习 |
CSS5 | www.css5.com.cn | CSS切图 |
对应CSS代码:
.table-a table{border:1px solid #F00}
对应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>
第2种对表格设置边框 效果
站名 | 网址 | 说明 |
DIVCSS5 | www.divcss5.com | CSS学习 |
CSS5 | www.css5.com.cn | CSS切图 |
对应CSS代码:
.table-b table td{border:1px solid #F00}
对应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>
</div>
第3种对表格设置边框 效果
站名 | 网址 | 说明 |
DIVCSS5 | www.divcss5.com | CSS学习 |
CSS5 | www.css5.com.cn | CSS切图 |
对应CSS代码:
.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}
对应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>
</div>
第4种对表格设置边框 效果
站名 | 网址 | 说明 |
DIVCSS5 | www.divcss5.com | CSS学习 |
CSS5 | www.css5.com.cn | CSS切图 |
对应CSS代码:
.table-d table{ background:#F00}
.table-d table td{ background:#FFF}
对应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>
文章出处和来源网址:http://www.divcss5.com/wenji/w503.shtml
合并边框:
border-collapse: collapse;