4表格

一、表格语义记忆

通过语义化记忆表格标签：

表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者必须要有。

语法：

1 2 3 4 5 6 7 8 9 10

<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部分。

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

语法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<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>”表示一行。

四、合并行和合并列

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。

1、合并行

语法：

<td rowspan="跨度的行数">

2、合并列

语法：

<td colspan="跨度的列数">