table 的使用

 

第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;