4.1 表格基本结构及操作

HTML中的表格类似于Word软件中的表格，尤其在使用网页制作工具时，基本操作也很相似。HTML制作表格的原理是使用相关标记定义完成，如表格对象<table>、行对象<tr>、单元格对象<td>，其中单元格的合并在表格操作中应用广泛。

4.1.1 表格基本结构

使用表格显示数据，可以更直观和清晰。在HTML文档中表格主要用于显示数据，虽然可以使用表格布局，但是不建议使用，它有很多弊端。表格一般由行、列和单元格组成，如图4-1所示。

图4-1 表格的组成

<table>标记用于标识一个表格对象的开始，</table>标记用于标识一个表格对象的结束。一个表格中，只允许出现一对<table>标记。在HTML5中不再支持它的任何属性。

<tr>标记用于标识表格一行的开始，</tr>标记用于标识表格一行的结束。表格内有多少对<tr></tr>标记，就表示表格中有多少行。在HTML5中不再支持它的任何属性。

<td>标记用于标识表格某行中的一个单元格开始，</td>标记用于标识表格某行中的一个单元格结束。<td></td>标记书写在<tr></tr>标记内，一对<tr></tr>标记内有多少对<td></td>标记，就表示该行有多少个单元格。在HTML5中它仅有colspan和rowspan两个属性，详见4.1.2小节。

最基本的表格，必须包含一对<table></table>标记、一对或几对<tr></tr>标记以及一对或几对<td></td>标记。一对<table></table>标记定义一个表格，一对<tr></tr>标记定义一行，一对<td></td>标记定义一个单元格。

例如，定义一个4行3列的表格。

【例4.1】（实例文件：ch04\4.1.html）

在IE 11.0中预览网页效果，如图4-2所示。

图4-2 表格基本结构

从预览图中读者会发现，表格没有边框，行高及列宽也无法控制。上述知识讲述时，提到HTML5中除了<td>标记提供两个单元格合并属性之外，<table>和<tr>标记已没有任何属性。那么如何修饰表格呢？表格的所有外观设置都需要通过CSS样式完成，详见CSS章节部分。

4.1.2 合并单元格

在实际应用中，并非所有表格都是规范的几行几列，有时需要将某些单元格进行合并，以符合某种内容上的需要。在HTML中合并的方向有两种，一种是上下合并，一种是左右合并，这两种合并方式只需要使用<td>标记的两个属性即可。

1．用colspan属性合并左右单元格

左右单元格的合并需要使用<td>标记的colspan属性完成，格式如下：

     <td colspan="数值">单元格内容</td>

其中，colspan属性的取值为数值型整数数据，代表几个单元格进行左右合并。

例如，在上面的表格的基础上，将A1和B1单元格合并成一个单元格。为第一行的第一个<td>标记增加colspan="2"属性，并且将B1单元格的<td>标记删除。

【例4.2】（实例文件：ch04\4.2.html）

在IE 11.0中预览网页效果，如图4-3所示。

图4-3 单元格左右合并

从预览图中可以看到，A1和B1单元格合并成一个单元格，C1还在原来的位置上。

2．用rowspan属性合并上下单元格

上下单元格的合并需要为<td>标记增加rowspan属性，格式如下：

     <td rowspan="数值">单元格内容</td>

其中，rowspan属性的取值为数值型整数数据，代表几个单元格进行上下合并。

例如，在上面的表格的基础上，将A1和A2单元格合并成一个单元格。为第一行的第一个<td>标记增加rowspan="2"属性，并且将A2单元格的<td>标记删除。

【例4.3】（实例文件：ch04\4.3.html）

在IE 11.0中预览网页效果，如图4-4所示。

图4-4 单元格上下合并

从预览图中可以看到，A1和A2单元格合并成一个单元格。

通过上面对左右单元格合并和上下单元格合并的操作，读者会发现合并单元格的实质就是“丢掉”某些单元格。对于左右合并，就是以左侧为准，将右侧要合并的单元格“丢掉”；对于上下合并，就是以上方为准，将下方要合并的单元格“丢掉”。如果一个单元格既要向右合并，又要向下合并，该如实现呢？

【例4.4】（实例文件：ch04\4.4.html）

在IE 11.0中预览网页效果，如图4-5所示。

图4-5 两个方向合并单元格

从上面的代码可以看到，A1单元格向右合并B1单元格，向下合并A2单元格，并且A2单元格向右合并B2单元格。

3．使用Dreamweaver CC合并单元格

使用HTML创建表格非常麻烦，Dreamweaver CC工具提供了表格的快捷操作，类似于在Word工具中编辑表格的操作。在Dreamweaver CC中创建表格，只需要单击【插入】菜单下的【表格】命令，在出现的对话框中指定表格的行数、列数、宽度和边框，即可在光标处创建一个空白表格。选择表格之后，属性面板提供了表格的常用操作，如图4-6所示。

图4-6 表格属性面板

关于表格的操作不再赘述，请读者自行操作，这里重点讲解如何使用Dreamweaver CC合并单元格。在Dreamweaver CC可视化操作中，提供了合并与拆分单元格两种操作。拆分单元格的操作，其实还是逆行的合并操作。进行单元格合并和拆分时，请将光标置于单元格内，如果选择了一个单元格，拆分命令有效（如图4-7所示），如果选择了两个或两个以上单元格，合并命令有效。

图4-7 拆分单元格有效