table细线表格实例代码
分类：实例代码
table细线表格实例代码属于前端实例代码，有关更多实例代码大家可以查看。
关于表格类型效果，还是table实现起来更为轻松，但默认状态下表格的美观度实在是不能令人满意。
主要默认无细线效果，下面就简单介绍一下如何实现细线表格效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>table细线表格-前端教程网</title>
<style type="text/css">
#thetable{
background-color:green;
font-size:12px;
}
#thetable th{
text-align:center;
background-color:#CCF;
height:30px;
line-height:30px;
}
#thetable td{
width:150px;
height:30px;
line-height:30px;
text-align:center;
background-color:#FFF;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" id="thetable">
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
<th>标题四</th>
</tr>
<tr>
<td>前端教程网一</td>
<td>前端教程网二</td>
<td>前端教程网三</td>
<td>前端教程网四</td>
</tr>
<tr>
<td>前端教程网一</td>
<td>前端教程网二</td>
<td>前端教程网三</td>
<td>前端教程网四</td>
</tr>
<tr>
<td>前端教程网一</td>
<td>前端教程网二</td>
<td>前端教程网三</td>
<td>前端教程网四</td>
</tr>
</table>
</body>
</html>
原理非常的简单，设置整个table和单元格的背景色，然后再设置cellspacing属性，也就是单元格之间的距离，露出表格的背景色，形成细线效果。特别注意，默认状态下单元格是透明的，所以要特别设置它的背景色为白色，否则看到的都是表格的背景色。
table细线表格实例代码，这样的场景在实际项目中还是用的比较多的，关于table细线表格实例代码就介绍到这了。