列组样式
使用colgroup与col标签配合可以定义列祖样式：例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,tr,th,td{
border: 1px solid #000;
}
table{
border-collapse: collapse;
}
.cil1{
background-color: #ffff00;
}
.cil4{
background-color: #ff0000;
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="cil1">
<col class="cil2">
<col class="cil3">
<col class="cil4">
<col class="cil5">
</colgroup>
<tr>
<th>校名</th>
<th>总分</th>
<th>类型</th>
<th>排名</th>
<th>省市</th>
</tr>
<tr>
<td>清华大学</td>
<td>100</td>
<td>综合</td>
<td>1</td>
<td>北京</td>
</tr><tr>
<td>北京大学</td>
<td>99.40</td>
<td>综合</td>
<td>2</td>
<td>北京</td>
</tr><tr>
<td>中国科技大学</td>
<td>97.33</td>
<td>理工</td>
<td>3</td>
<td>安徽</td>
</tr><tr>
<td>浙江大学</td>
<td>97.33</td>
<td>综合</td>
<td>4</td>
<td>浙江</td>
</tr><tr>
<td>复旦大学</td>
<td>96.67</td>
<td>综合</td>
<td>5</td>
<td>上海</td>
</tr><tr>
<td>上海交通大学</td>
<td>96.67</td>
<td>综合</td>
<td>6</td>
<td>上海</td>
</tr><tr>
<td>南京大学</td>
<td>96.67</td>
<td>综合</td>
<td>7</td>
<td>江苏</td>
</tr><tr>
<td>中国人民大学</td>
<td>95.00</td>
<td>综合</td>
<td>8</td>
<td>北京</td>
</tr><tr>
<td>北京航空航天大学</td>
<td>94.33</td>
<td>理工</td>
<td>9</td>
<td>北京</td>
</tr><tr>
<td>西安交通大学</td>
<td>92.70</td>
<td>综合</td>
<td>10</td>
<td>陕西</td>
</tr>
</table>
</body>
</html>
行组样式
控制单行样式用tr，控制多行样式需要添加特定标签对行进行分组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,tr,th,td{
border: 1px solid #000;
}
table{
border-collapse: collapse;
}
.cil1{
background-color: #ffff00;
}
.cil4{
background-color: #ff0000;
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="cil1">
<col class="cil2">
<col class="cil3">
<col class="cil4">
<col class="cil5">
</colgroup>
<tr>
<th>校名</th>
<th>总分</th>
<th>类型</th>
<th>排名</th>
<th>省市</th>
</tr>
<tr>
<td>清华大学</td>
<td>100</td>
<td>综合</td>
<td>1</td>
<td>北京</td>
</tr><tr>
<td>北京大学</td>
<td>99.40</td>
<td>综合</td>
<td>2</td>
<td>北京</td>
</tr><tr>
<td>中国科技大学</td>
<td>97.33</td>
<td>理工</td>
<td>3</td>
<td>安徽</td>
</tr><tr>
<td>浙江大学</td>
<td>97.33</td>
<td>综合</td>
<td>4</td>
<td>浙江</td>
</tr><tr>
<td>复旦大学</td>
<td>96.67</td>
<td>综合</td>
<td>5</td>
<td>上海</td>
</tr><tr>
<td>上海交通大学</td>
<td>96.67</td>
<td>综合</td>
<td>6</td>
<td>上海</td>
</tr><tr>
<td>南京大学</td>
<td>96.67</td>
<td>综合</td>
<td>7</td>
<td>江苏</td>
</tr><tr>
<td>中国人民大学</td>
<td>95.00</td>
<td>综合</td>
<td>8</td>
<td>北京</td>
</tr><tr>
<td>北京航空航天大学</td>
<td>94.33</td>
<td>理工</td>
<td>9</td>
<td>北京</td>
</tr><tr>
<td>西安交通大学</td>
<td>92.70</td>
<td>综合</td>
<td>10</td>
<td>陕西</td>
</tr>
</table>
</body>
</html>
标题样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
tr,
td,
table {
border: 1px solid #000;
width: 200px;
height: 50px;
}
caption {
height: 50px;
border: 1px solid #000;
caption-side: bottom;
text-align: right;
vertical-align: middle;
/* 不管用，标题不是单元格和块级标签可以使用line-height */
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
caption-side：可以定义标题出现的位置，默认在顶部，可取值有top顶部，bottom底部；left左侧与right右侧，left与right值有在火狐浏览器中才有效果
text-align属性可以规定标题的水平居中位置，left，right或center
vertical-align可以进行垂直对齐，取值有top、middle、bottom；只有当标签使块级或单元格时才有效果
合并单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
tr,
td,
table {
border: 1px solid #000;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
colspan：多列合并
rowspan：多行和平
他们的取值是合并的行数。
层叠样式
当我们设计表格的table、tr、td等样式时，非常容易发生层叠性，他们的优先级排序是：
td>tr>thead(tbody,tfoot)>col>colgroup>table
而对于边框样式来说，
1.border-style:hidden优先级最高
2.border-style:none：优先级最低，只有其他元素属性为none时才起作用
3.较宽的边框将覆盖教窄的边框
4.等宽情况下以边框样式类型顺序排序即：double solid dashed dotted ridge outset groove inset
5.若只有颜色的区别则以元素类型排序：td tr thead(tbody,tfoot) col colgroup table
