<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
font-family: "宋体",arial,helvetica,sans-serif;
}
table {
border-collapse: collapse;/细线表格必须声明的属性/
font-size: 75%;
line-height: 1.1;
}
tr:hover,td:hover {
background-color: #ff9;/鼠标经过的动态背景色效果/
}
th,td {
padding: .3em .5em;
cursor:pointer;/手指鼠标样式/
}
th {
font-weight: normal;/清除加粗显示/
text-align: center;
padding-left: 15px;
}
td:only-of-type {
background-color: #eee;
padding-left: 28px;
font-weight: bold;
color:#444;
}/使用结构为类选择器选择合并单元格所在的行，以背景方式在行前定义指示图标/
thead th {
background: #c6ceda;
border-color:#fff #fff #888 #fff;
border-style: solid;
border-width: 1px 1px 2px 1px;
padding-left: .5em;
}
tbody th:not(.end){
padding-left: 26px;
background-color: #ccc;
}/使用否定伪类选择器选择主体区域中的非最后一个th元素，以背景方式在行前定义结构路径线/
tbody th.end{
padding-left: 26px;
background-color: #cad9ea;
}/使用类选择器选择主体区域中的非最后一个th元素，以背景方式在行前定义结构封闭路径线/
</style>
</head>
<body>
<h1>07设计层序化的数据表格</h1>
<table summary="数据表格信息">
<!---->
<!--使用thead元素把表头标题独立出来，这样对机器更友好，同时也方便css控制，避免定义过多的class属性-->
<thead>
<tr>
<th>排名</th>
<th>校名</th>
<th>总得分</th>
<th>人才培养总得分</th>
<th>研究生培养得分</th>
<th>本科生培养得分</th>
<th>科学研究总得分</th>
<th>自然科学研究得分</th>
<th>社会科学研究得分</th>
<th>所属省份</th>
<th>分省排名</th>
<th>学校类型</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="12">一类</td>
</tr>
<tr>
<th>1</th>
<td>清华大学</td>
<td>296.77</td>
<td>128.92</td>
<td>93.83</td>
<td>35.09</td>
<td>167.85</td>
<td>148.47</td>
<td>19.38</td>
<td>京</td>
<td>1</td>
<td>理工</td>
</tr>
<tr>
<th class="end">2</th>
<!--定义末尾封口样式类-->
<td>北京大学</td>
<td>222.02</td>
<td>102.11</td>
<td>66.08</td>
<td>36.03</td>
<td>119.91</td>
<td>86.78</td>
<td>33.13</td>
<td>京</td>
<td>2</td>
<td>综合</td>
</tr>
<tr>
<td colspan="12">二类</td>
<!--合并单元格，注意colspan属性的使用-->
</tr>
<tr>
<th>3</th>
<td>浙江大学</td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙</td>
<td>1</td>
<td>综合</td>
</tr>
<tr>
<th>4</th>
<td>浙江大学</td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙</td>
<td>1</td>
<td>综合</td>
</tr>
<tr>
<th>5</th>
<td>浙江大学</td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙</td>
<td>1</td>
<td>综合</td>
</tr>
<tr>
<th>6</th>
<td>浙江大学</td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙</td>
<td>1</td>
<td>综合</td>
</tr>
<tr>
<th>7</th>
<td>浙江大学</td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙</td>
<td>1</td>
<td>综合</td>
</tr>
<tr>
<td colspan="12">三类</td>
</tr>
<tr>
<th>8</th>
<td>浙江大学</td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙</td>
<td>1</td>
<td>综合</td>
</tr>
<tr>
<th>9</th>
<td>浙江大学</td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙</td>
<td>1</td>
<td>综合</td>
</tr>
<tr>
<th>10</th>
<td>浙江大学</td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙</td>
<td>1</td>
<td>综合</td>
</tr>
<tr>
<th>11</th>
<td>浙江大学</td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙</td>
<td>1</td>
<td>综合</td>
</tr>
</tbody>
</table>
</body>
</html>
