table表格高级用法（二）
作者：互联网
表格及表单：
语法：<th></th>
<caption></caption>
th标记表格内表头单元格，是单元格标题
caption标记表示鸟哥的名称，也叫表格标题
caption-side：top/right/bottom/left
定义表格的caption对象放于表格二的哪个位置，与caption对象一起作用。
top为默认
left、right位置只有火狐识别
top、bottom IE6以上版本支持，IE6一下版本只识别top
隔行变色设置：
语法：双数行：tr：nth-child（2n）{}
单数行：tr:nth-chiled(2n+1){}说明：设置单数（odd）单元格的样式和双数（even）单元格的样式
tr:nth-child(2n){
background: #008000;
}重要的功能表格的合并：
表格html重要属性：
1、colspan="value" 合并列2、rowspan=“value”合并行
3、valign=“top/bottom/middle/baseline（基线）”垂直对齐方式
4、rules=“group/rows/cols/all/none”添加分割线
说明：rows:位于行之间的线条
cols：位于列之间的线条
all：位于行和列之间的线条
none：没有线条
group：位于行组合列组之间的线条（行数据分组：
thead：表头
tbody：表体
tfoot：表尾）说明一个表格只可以包含一个thead，一个tfoot，可以包含多个tbody
数据列分组（添加组分割线（rules））
<colgroup span="value"></colgroup>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
caption{
font-size: 20px;
}
tr:nth-child(even){
background: #008000;
}
td{
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="0" rules="groups">
<caption>表格标题</caption>
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">伟大的马克思主义 </td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="4">中国伟大 </td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tfoot>
</table>
</body>
</html>
标签：表格,nth,top,tr,用法,caption,table,Data 来源： https://blog.csdn.net/chehec2010/article/details/119427496