<!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>
转载于:https://www.cnblogs.com/hughman/p/6562061.html
