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还在原来的位置上。
技巧提示
合并单元格以后，相应的单元格标记就应该减少，例如，A1和B1合并后，B1单元格的<td></td>标记就应该丢掉，否则单元格就会多出一个，并且后面单元格依次向右位移。
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 表格属性面板
技巧提示
表格属性面板中的操作，请结合前面讲述的HTML语言。对于按钮命令，请读者将鼠标悬停于按钮之上，数秒之后会出现命令提示。
关于表格的操作不再赘述，请读者自行操作，这里重点讲解如何使用Dreamweaver CC合并单元格。在Dreamweaver CC可视化操作中，提供了合并与拆分单元格两种操作。拆分单元格的操作，其实还是逆行的合并操作。进行单元格合并和拆分时，请将光标置于单元格内，如果选择了一个单元格，拆分命令有效（如图4-7所示），如果选择了两个或两个以上单元格，合并命令有效。
图4-7 拆分单元格有效