CSS美化table表格样式

table在表现数据形式的时候很重要,当然美观度肯定要的,久久经验网今天为前端初学者讲解如何用css美化table表格

table的html构造

 一个基本的table的构造形式:

  1. <table> 
  2.   <tr><th>姓名</th><th>学号</th><th>注册时间</th><th>备注</th></tr> 
  3.   <tr><td>LeeYea</td><td>20140007</td><td>15:21 2014/10/27</td><td>欢迎加入久久经验网</td></tr> 
  4.   <tr><td>Mike</td><td>20140007</td><td>15:28 2014/10/27</td><td>欢迎加入久久经验网</td></tr> 
  5.   <tr><td>ChaLi</td><td>20140007</td><td>15:51 2014/10/27</td><td>欢迎加入久久经验网</td></tr> 
  6. </table> 

table的th标签一般用于制作表头的单元格,默认水平居中。

测试通过浏览器刷新后可以看到一个table,当然,此时的table奇丑无比!

 

css美化table

  1. table{border-collapse:collapse/*合并间距*/ 
  2. table,table th,table td{border:1px solid #ddd/*表格带线框,6像素的间距*/ 
  3. table th,table td{padding:6px/*单元格6像素的间距*/ 
  4. table th{background-color:#eee/*表头带背景色*/ 

 

当然,等以后学习了更多的css知识之后,我们可让表格更具特色。

 

相关经验

导读书签
书签初始化中…