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细线表格实例代码就介绍到这了。