表格样式
<html>
<head>
<meta charset="UTF-8" >
<title>表格css</title>
<style type="text/css">
h1{font-size:16px;}
table{ width:100%;font-size:12px;margin:0 auto;border:1px solid #cad9ea;color:#666;table-layout:fixed;border-collapse:collapse;empty-cells:show;}/*table-layout:fixed;能改善表格呈现性能,border-collapse:collapse;让表格看起来更精致,empty-cells:show;能够隐藏不必要的干扰因素*/
th{height:30px;background-image:url(aa.jpg);background-repeat:repeat;overflow:hidden;}
td{height:20px;}
td,th{border:1px solid #cad9ea;padding:0 1em 0;}
tr:nth-child(even){background-color:#f5fafe;}/*通过结构伪类选择器为表格内的偶数行定义背景色,实现隔行分色的效果*/
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1>设计优雅的数据表格</h1>
<table>
<tr><th>排名</th><th>学校</th><th>分数</th></tr>
<tr><td>1</td><td>清华大学</td><td>600</td></tr>
<tr><td>2</td><td>北京大学</td><td>500</td></tr>
<tr><td>3</td><td>浙江大学</td><td>400</td></tr>
<tr><td>4</td><td>交通大学</td><td>300</td></tr>
</table>
</body>
</html>