四种CSS设置html table表格边框样式

第1种对表格设置边框 效果

对应CSS代码：

.table-a table{border:1px solid #F00}

对应html源代码：

<div>
<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种对表格设置边框 效果

对应CSS代码：

.table-b table td{border:1px solid #F00}

对应HTML代码片段：

<div>
<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种对表格设置边框 效果

对应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>
<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种对表格设置边框 效果

对应CSS代码：

.table-d table{ background:#F00}
.table-d table td{ background:#FFF}

对应HTML代码片段：

<div>
<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>

最后编辑：2014-09-23

作者：管理员

这个作者貌似有点懒，什么都没有留下。

站内专栏