上一篇笔记记录了元素分组，文章链接：http://blog.csdn.net/flytosky_l/article/details/70313500

这里，接着做HTML5的基础知识-表格元素，(新建一个文件名为index.html，在文件目录 code下)

表格元素，HTML5元素常用元素。

表格元素汇总

表格的基本结构最少需要三个元素，<table>、<tr>、<td>,其他作为可选辅助存在。

元素名称 ： table ， 说明 ：表示表格

元素名称 ： thead ， 说明 ：表示标题行

元素名称 ： tbody ， 说明 ：表示表格主体

元素名称 ： tfoot ， 说明 ：表示表格表脚

元素名称 ： tr ， 说明 ：表示一行单元格

元素名称 ： th ， 说明 ：表示标题行单元格

元素名称 ： td ， 说明 ：表示单元格

元素名称 ： col ， 说明 ：表示一列

元素名称 ： colgroup ， 说明 ：表示一组列

元素名称 ： caption ， 说明 ：表示表格标题

表格解析

<table><tr><td>构建基础表格

代码：

    表格元素
<br>
<table><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr>
</table>

运行如图：

<th>

修改代码：

<br>
<table border="1"><tr><th>姓名</th><th>性别</th><th>婚否</th></tr><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr>
</table>

运行如图：

colspan

代码：

<br>
<table border="1"><tr><th>姓名</th><th>性别</th><th>婚否</th></tr><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr><tr><td colspan="3">统计：共两人</td></tr>

运行如图：

style

设置宽度，代码：

style
<br>
<table border="1" style="width:300px"><tr><th>姓名</th><th>性别</th><th>婚否</th></tr><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr><tr><td colspan="3">统计：共两人</td></tr>
</table>

运行结果如图：

rowspan

代码

rowspan
<br>
<table border="1" style="width:300px"><tr><th rowspan="4">基层情况</th><th>姓名</th><th>性别</th><th>婚否</th></tr><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr><tr><td colspan="3">统计：共两人</td></tr>
</table>

运行如图：

thead

添加表头。，限制和规范了表头部分，尤其是对于动态生成表头，它的位置不固定，使用这个元素，可以限定在开头位置。代码:

thead
<br>
<table border="1" style="width:300px"><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr><thead><tr><th>姓名</th><th>性别</th><th>婚否</th></tr></thead>
</table>

运行如图：

tfoot

添加表主体。代码：

tfoot
<br>
<table border="1" style="width:300px"><tfoot><tr><td colspan="3">统计 ： 共两人</td></tr></tfoot><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr><tr><th>姓名</th><th>性别</th><th>婚否</th></tr></table>

运行如图：

caption

添加表格标题，<caption>元素，给表格添加一个标题

caption
<br>
<table border="1" style="width:300px"><caption>这是一个人员记录表格</caption><tfoot><tr><td colspan="3">统计 ： 共两人</td></tr></tfoot><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr><thead><tr><th>姓名</th><th>性别</th><th>婚否</th></tr></thead></table>

colgroup

设置列，该元素是为了处理某一列，span属性定义处理那些列，1表示第一列，2表示第二列，如果要单独设置第二列，那么需要声明两个，先处理第一列，将列点移入第二位，在处理第二列。代码：

colgroup
<br>
<table border="1" style="width:300px"><caption>这是一个人员记录表格</caption><colgroup style="background:white" span="1"></colgroup><colgroup style="background:red" span="1"></colgroup><tfoot><tr><td colspan="3">统计 ： 共两人</td></tr></tfoot><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr><thead><tr><th>姓名</th><th>性别</th><th>婚否</th></tr></thead></table>

运行如图：

col

更灵活的设置列，<col>元素表示单独一列，一个表示一列，控制更加灵活。如果设置span，则控制多列.代码:

col
<br>
<table border="1" style="width:300px"><caption>这是一个人员记录表格</caption><col style="background:white" span="2"></col><col style="background:red"></col><tfoot><tr><td colspan="3">统计 ： 共两人</td></tr></tfoot><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>Lucy</td><td>女</td><td>未婚</td></tr><thead><tr><th>姓名</th><th>性别</th><th>婚否</th></tr></thead></table>

运行如图：