HTML表格

5、表格
(一)、表格语义记忆
通过语义化记忆表格标签：

表1 表格基本标签
标签    语义    说明
table    table（表格）    表格
tr    table row（表格行）    行
td    table data cell（表格单元格）    单元格
表2 表格结构标签
标签    语义    说明
thead    table head    表头
tbody    table body    表身
tfoot    table foot    表脚
th    table header    表头单元格
(二)、表格基本结构
<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。

语法：

<table>

    <tr>

        <td>单元格1</td>

        <td>单元格2</td>

    </tr>

    <tr>

        <td>单元格1</td>

        <td>单元格2</td>

    </tr>

</table>

说明：

<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。

(三)、表格完整结构
表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。

表格语义化之后，使得代码更清晰和更利于后期维护。

语法：

<table>

    <caption>表格标题</caption>

    <!--表头-->

    <thead>

        <tr>

            <th>表头单元格1</th>

    <th>表头单元格2</th>

        </tr>

    </thead>

    <!--表身-->

    <tbody>

        <tr>

            <td>标准单元格1</td>

            <td>标准单元格2</td>

        </tr>

        <tr>

            <td>标准单元格1</td>

            <td>标准单元格2</td>

        </tr>

    </tbody>

    <!--表脚-->

    <tfoot>

        <tr>

            <td>标准单元格1</td>

            <td>标准单元格2</td>

        </tr>

    </tfoot>

</table>

说明：

<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。