html 表格标签<table>

<h6>英文释意：

<th>：table head
<tr>：table row
<td>：table data cell

<h6><theader><tbody><tfoot>作用：</h6>

1. 把表格分组,让结构变得清晰

2. 当浏览器从服务器中读取数据的时候,可以一组组的返回给用户,而不是读取完整个table后再返回

<table border="1px" width="400px" height="200px" align="center">
    <caption>2014年期末考试成绩单</caption>
    <thead> <!--表头-->
    <tr>
        <th>姓名</th>
        <th>班级</th>
        <th>成绩</th>
    </tr>
    </thead>
    <tbody> <!--表体-->
    <tr>
        <td rowspan="2">狗娃</td> <!--合并两行-->
        <td>计算机1班</td>
        <td>80</td>
    </tr>
     <tr>
        <td>经济1班</td>
        <td>90</td>
    </tr>
    <tr>
        <td>狗剩</td>
        <td>计算机2班</td>
        <td>78</td>
    </tr>
    <tr>
        <td>狗蛋</td>
        <td>软件1班</td>
        <td>90</td>
    </tr>
    </tbody>
    <tfoot> <!--表尾-->
    <tr>
        <td colspan="2">平均分</td> <!--合并两列-->
        <td>85</td>
    </tr>
    </tfoot>
</table>

Paste_Image.png

<h5>练习：模仿下图

Paste_Image.png

<table border="1" width="200px" height="100px">
    <thead>
        <tr>
            <td align="center" colspan="3">学生成绩</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2" align="center">张三</td>
            <td>语文</td>
            <td>98</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>90</td>
        </tr>
        <tr>
            <td rowspan="2" align="center">李四</td>
            <td>语文</td>
            <td>50</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>40</td>
        </tr>
    </tbody>
</table>