一个完整的<table>标签
<table border="1px solid #ddd" style="border-collapse: collapse;">
<colgroup>
<col width="100">
<col width="200">
<col width="100">
<col width="100" bgcolor="red">
</colgroup>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>班级</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>小明</td>
<td>三年级2班</td>
<td>98</td>
</tr>
<tr>
<td></td>
<td>小红</td>
<td>三年级1班</td>
<td>92</td>
</tr>
<tr>
<td></td>
<td>小光</td>
<td>三年级3班</td>
<td>94</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>平均分</th>
<td></td>
<td></td>
<td>95</td>
</tr>
</tfoot>
</table>
<colgroup>&<col>
这2个标签的作用是在table中进行样式的设置。
每一个colgroup中的每一个col，代表了table中从左开始的每一列。
可以通过给col设定样式来改变对应的整列的样式。这样就不许要每个tr td进行设置，节省代码量。
<thead><tbody><tfoot>
这3个标签对应了表头、表体、表页脚。
这3个标签的顺序如果打乱了浏览器渲染的时候也会从 thead 开始渲染。
table中，tbody是必须的，如果没有浏览器也会自动添加，而thead、tfoot则可以没有，他们的内容会自动添加到tbody中。
<tr> <th> <td>
<tr>：每一组<tr></tr>在表格中就是一行
<td>：每一行中的格子，用于储存表格中普通的数据；
<th>：每一行中的格子，一般用于储存表格类名等，字体会加粗；
关于table的CSS样式：
border-collapse:collapse
这个CSS样式可以将邻近单元格的border合并在一起
table-layout
这个样式可以设置table的布局方式。
border-spacing
这个样式可以设置临近单元格border的距离
