table表格美化代码实例
分类：实例代码
table表格美化代码实例属于前端实例代码，有关更多实例代码大家可以查看。
表格常见于对数据的组织，默认状态下，表格比较丑陋。
下面就是一段能够对表格进行简单美化的代码，希望能够给大家带来借鉴作用。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
table表格美化代码实例，这样的场景在实际项目中还是用的比较多的，关于table表格美化代码实例就介绍到这了。