HTML5基础（五）零基础入门 （上）

上一篇笔记记录了元素分组，文章链接：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>

运行如图：