table实现的细线表格实例代码

table实现的细线表格实例代码:
关于表格类型的效果，还是table实现起来更为轻松，但是默认状态下表格的美观度实在是不能令人满意，主要是无法实现细线表格效果，下面就简单介绍一下如何实现细线表格效果。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<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属性，也就是单元格之间的距离，这样就露出表格的背景色，就形成了细线效果。特别注意，默认状态下单元格是透明的，所以要特别设置它的背景色为白色，否则看到的都是表格的背景色。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/2124.html

爱程序网

Tags：[db:关键字]