在早期的 Web 1.0 中，表格常用于网页布局，在 Web 2.0 中，这种方式已经被抛弃了，表格仅用于显示元素。
一、表格的基本结构
一个表格由三部分组成：表格、行、单元格，基本用法如下：
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
其中，tr 即 table row，指表格的行；td 即 table data cell，指表格的单元格；上述代码在浏览器中显示为：
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
二、表格的完整结构
表格的完整结构还包括标题（caption）和表头（th）等。
1、表格标题 caption
使用方式：<caption> 表格标题 </caption> ，一个表格只能有一个标题，在默认情况下，标题位于表格的第一行。
2、表头单元格 th
使用方式：<th> </th>，th 即 table header cell，有如下代码：
<table>
<caption>表格标题</caption>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
在浏览器中显示为：
| 表头单元格1 | 表头单元格2 |
|---|---|
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
三、表格语义化
为了更进一步对表格进行语义化，HTML 引入了 thead、tbody、tfoot 标签，即表头，表身，表脚三部分，通过使用这些标签，表格的语义更加良好，结构更加清晰，更具有可读性和可维护性。 有如下代码：
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>第一列汇总</td>
<td>第二列汇总</td>
</tr>
</tfoot>
</table>
在浏览器中显示为：
| 表头单元格1 | 表头单元格2 |
|---|---|
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
| 第一列汇总 | 第二列汇总 |
tfoot 常用于显示统计数据，根据实际使用需求选择是否使用。
这些语义化标签对浏览器的显示效果没有影响，但语义化标签除了能够增强代码的可读性，还有一个重要的作用，可以配合 CSS 来进行分块样式控制。
语义化的目的：在需要的地方，用正确的标签。（再次强调）
四、单元格的合并
在表格的实际使用中，常常需要将多个单元格合并成一个单元格，这就需要使用合并行或合并列。
1、合并行：rowspan 属性
使用方式：<td rowspan="num"> </td>，指将纵向的几个单元格合并为一行（rowspan 可以理解为“行空间”，也就是该单元格占了几行）。
有如下代码：
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>第一列汇总</td>
<td>第二列汇总</td>
</tr>
</tfoot>
</table>
在浏览器中显示为：
| 表头单元格1 | 表头单元格2 |
|---|---|
| 第一列 | 第一行第二列 |
| 第二行第二列 | |
| 第一列汇总 | 第二列汇总 |
2、合并列：colspan
使用方式：<td colspan="num"> </td> ，用于将横向的多个单元格合并为一个单元格，有如下代码：
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">第一行</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>第一列汇总</td>
<td>第二列汇总</td>
</tr>
</tfoot>
</table>
在浏览器中显示为：
| 表头单元格1 | 表头单元格2 |
|---|---|
| 第一行 | |
| 第二行第一列 | 第二行第二列 |
| 第一列汇总 | 第二列汇总 |
