表格结构
表格结构：表格分有表头（<thead></thead>）表格主体正文(<tbody></tbody>)表尾(<tfoot></tfoot>)，以及表格标题（caption）会自动出现在整张表格的上方，此外对表格的更长描述可以写在table标签的summary属性中，其次（<th></th>）定义表格的表头单元格，且th元素内部的文本通常会呈现为粗体代码示例：
<table border="1" cellspacing="0" summary="this is table example">
<caption>表格示例展示</caption>
<thead>
<tr>
<th>时间：</th>
<th>收入：</th>
<th>支出：</th>
</tr>
</thead>
<tfoot>
<tr>
<td>备注：</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2015-07-12</td>
<td>200</td>
<td>50</td>
</tr>
<tr>
<td>2015-07-13</td>
<td>200</td>
<td>30</td>
</tr>
<tr>
<td>2015-07-14</td>
<td>200</td>
<td>40</td>
</tr>
</tbody>
</table>
在浏览器中的显示效果如下图：
1.jpg
这里有几个注意点：
* thead和tfoot在一张表中只能有一个，而tbody可以有多个
* tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，这有利于加快表
格的显示速度。这一点对大型表格尤其重要
* thead 、tbody和tfoot里面都必须使用tr标签，以表示行
* 同时注意th是表头thead中的单元格与td数据单元有区别
列分组
tbody可以用来对“行”进行分组，colgroup则用来对“列”进行分组。
例如：下面代码表示前2列为一组，每一列的宽度为20px。
<colgroup span="2" width="200px"></colgroup>
浏览器显示效果如下：
2.jpg
几个注意点：
* span属性，用来指定colgroup标签能够控制的列数
* 在colgroup标签内部，可以使用col标签来指定每一列的属性
* 其中我们还可以在col中使用span属性来进行列分组
例如，下面的代码表示第一列宽度为300px，第二列宽度为100px：
<colgroup>
<col width="300px">
<col width="100px">
</colgroup>
浏览器显示效果如下：
3.jpg
css中的table-layout语句
这个语句可以用来指定表格显示样式，列如
table {table-layout:fixed;}
它可以取三个值：
* auto(缺省)
* fixed
* inherit
auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定，如果所有的单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格的内容超出单元格的大小，则用CSS中的overflow控制。同时表格的显示速度可以加快100倍。
同时注意：
* 想要加快表格显示，最好事先在CSS或者table标签的width和height属性中指定
表格的宽度和高度
th和td的区别
表示单元格的标签是th（table head）和td（table data），前者用来显示数据名称，后者用来显示数据内容
代码示例：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
frame和rules属性
table标签的frame和rules属性，可以控制边框的显示；frame属性规定外侧边框的哪个部分是可见的。rules属性规定内侧边框的哪个部分是可见的。
frame属性可取的属性值如下：
* void - 默认值。表示不显示表格最外围的边框
* above - 只显示上部的外侧边框
* below - 只显示下部的外侧边框
* hsides - 显示上部和下部的外侧边框
* vsides - 显示左边和右边的外侧边框
* lhs - 显示左边的外侧边框
* rhs - 显示右边的外侧边框
* box - 在所有四个边上显示外侧边框
* border - 在所有四个边上显示外侧边框
rules属性可取的属性值如下：
* none - 没有线条
* groups - 位于行组和列组之间的线条
* rows - 位于行之间的线条
* cols - 位于列之间的线条
* all - 位于行和列之间的线条（即单元格）
代码示例：
<table border="1" frame="above" rules="groups">
<colgroup span="2" width="100px">
<col width="300px">
<col align="right">
</colgroup>
<caption>表格示例展示</caption>
<thead>
<tr>
<th>时间：</th>
<th>收入：</th>
<th>支出：</th>
</tr>
</thead>
<tfoot>
<tr>
<td>备注：</td>
<td>日期：</td>
<td>总计：</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2015-07-12</td>
<td>200</td>
<td>50</td>
</tr>
<tr>
<td>2015-07-13</td>
<td>200</td>
<td>30</td>
</tr>
<tr>
<td>2015-07-14</td>
<td>200</td>
<td>40</td>
</tr>
</tbody>
</table>
浏览器显示效果如下：
4.jpg
table中常用属性及取值
* border -[可取像素值] 规定表格边框的宽度
* cellpadding -[可取像素值和百分比] 规定单元边沿与其内容之间的空白
* cellspacing - [可取像素值和百分比]规定单元格之间的空白
* frame - 规定外边框的哪个部分可见
* rules - 规定内边框的哪个部分可见
* summary - 规定表格的摘要描述
* width - 规定表格的宽度
td常用属性及取值
* align - [left-right-center-justify-char]规定单元格内容的水平对齐方式
* headers - [headers_cells'_id]规定单元格相关的表头
* colspan - [number]规定单元格可横跨的列数
* rowspan - [number]规定单元格可横跨的行数
最后注意一点：
* 表格中不能不写tbody，因为不写tbody这标签，浏览器也会自动为你加上，当别人阅读你的代码
时，会产生一些困惑，所以建议加上这个标签
