今天小编跟大家讲解下有关经常使用的两个清爽的table样式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关经常使用的两个清爽的table样式 的相关资料，希望小伙伴们看了有所帮助。
附上两个我经常使用的table样式： 复制代码代码如下: <html> <head> <title></title> <style type="text/css"> body,table{ font-size:12px; } table{ table-layout:fixed; empty-cells:show; border-collapse: collapse; margin:0 auto; } td{ height:30px; } h1,h2,h3{ font-size:12px; margin:0; padding:0; } .table{ border:1px solid #cad9ea; color:#666; } .table th { background-repeat:repeat-x; height:30px; } .table td,.table th{ border:1px solid #cad9ea; padding:0 1em 0; } .table tr.alter{ background-color:#f5fafe; } </style> </head> <body> <table width="90%"class="table"> <tr> <th>学号</th> <th>姓名</th> <th>平时</th> <th>期中</th> <th>实验（践）</th> <th>其它</th> <th>期末</th> <th>总评</th> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr class="alter"> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </table> </body> </html> 复制代码代码如下: <html> <head> <title></title> <style type="text/css"> .table { width: 100%; padding: 0; margin: 0; } th { font: bold 12px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #CAE8EA no-repeat; } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; background: #fff; font-size:14px; padding: 6px 6px 6px 12px; color: #4f6b72; } td.alt { background: #F5FAFA; color: #797268; } th.spec,td.spec { border-left: 1px solid #C1DAD7; } html>body td{ font-size:14px;} tr.select th,tr.select td { background-color:#CAE8EA; color: #797268; } </style> </head> <body> <table class="table"cellspacing="0"summary="The technical specifications of the Apple PowerMac G5 series"> <tr> <th class="spec">选择</th> <th>课程名称</th> <th>课程编号</th> <th>已经考试次数</th> </tr> <tr> <td class="spec">1</td> <td>1</td> <td class="alt">1</td> <td>1</td> </tr> <tr class="select"> <td class="spec">2</td> <td>2</td> <td class="alt">2</td> <td>2</td> </tr> <tr> <td class="spec">3</td> <td>3</td> <td class="alt">3</td> <td>3</td> </tr> </table> </body> </html>来源：爱蒂网
