你的位置:首页 > 网页设计

[网页设计]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