4.1 使用表格

表格的主要功能是对网页元素进行定位与排版。熟练的地用表格，不仅可以任意定位网页元素，还可以丰富网页的页面效果。在创建表格之前，需要先来了解一下表格的基本结构。

4.1.1 创建表格

在网页中使用表格，可以更加清晰和直观地显示网页内容。HTML5中的表格类似于Excel表，一般由行、列和单元格组成，如下图所示。

在HTML5中，用于创建表格的标记包括下列3个。

□ <table> 该标记是表格标记，表示创建一个表格，与其他标记一样使用</table>标记表示结束。

□ <tr> 该标记表示表格中的行，使用</fr>标记表示结束。

□ <td> 该标记表示表格中的单元格，使用</td>标记表示结束。

通常，完整的表格中会包含<table></table>标记、<tr><／tr>和<td></td>标记。例如，插入一个3行3列的表格，代码如下所示：

使用浏览器预览，其效果如下图所示。

4.1.2 创建嵌套表格

嵌套表格是在另一个表格单元格中插入的表格，其设置属性的方法与任何其他表格相同。例如，在上述表格中“赤壁”单元格中插入一个表示数字的2行2列的表格，代码如下所示：

使用浏览器预览，其效果如下图所示。

4.1.3 创建标题表格

通过插入表格和嵌套表格，用户会发现所创建的表格都不包含表格标题。此时，为了方便描述表格内容，可使用<caption>标记为表格添加标题。添加表格标题的示例代码，如下所示：

使用浏览器预览，其效果如下图所示。

4.2 编辑单元格

创建表格之后，可以通过调整单元格、合并单元格、设置单元格背景等一系列的设置操作，达到美化表格的目的。

4.2.1 调整单元格

调整单元格包括调整单元格的列宽和行高，以及单元格的对齐方式。

1. 调整列宽与行高

在HTML5中，可通过在<tb>标签中添加width和height属性的方法，来调整单元格的列宽与行高。调整列宽与行高的代码，如下所示：

例如，如若创建一个3列3行，单元格宽度为60，高度为50的表格，代码如下所示：

使用浏览器预览，其效果如下图所示。

2. 调整对齐方式

对齐方式包括水平对齐和垂直对齐，水平对齐包括左对齐、居中对齐和右对齐，垂直对齐包括顶端对齐、居中对齐、底部对齐和基线对齐。在HTML5中，水平对齐使用align属性，垂直对齐则使用valign属性。不同对齐方式的示例代码如下所示：

使用浏览器预览，其效果如下图所示。

3. 调整边距和间距

在HTML5中，可以通过调整单元格边距和间距来调整单元格的大小。调整单元格的边距，可通过cellspacing属性来实现；而调整单元格的间距，则需要通过cellpadding属性来实现。具体代码如下所示：

使用浏览器预览，其效果如下图所示。

4.2.2 设置单元格背景

在HTML5中，可以为单元格设置背景颜色和背景图片。例如，下面代码中显示了为单元格添加背景颜色的标签。

使用浏览器预览，其效果如下图所示。

4.2.3 合并单元格

合并单元格可以将同行或同列中的多个连续单元格合并为一个单元格，但所选连续的单元格必须可以组成一个矩形形状，否则将无法合并单元格。

在HTML中，使用td标记中的属性即可实现合并单元格操作，合并单元格分为左右和上下合并两种方式。

1. 左右合并

左右单元格的合并即合并左右相邻的两个及以上数量的单元格，可使用td标记中的colspan属性进行合并，该属性的语法格式如下：

在上述语法中，colspan属性值表示需要进行合并的单元格数量。左右合并单元格的示例代码如下所示：

使用浏览器预览，其效果如下图所示。

2. 上下合并

上下单元格的合并即合并上下连续的两个及以上数量的单元格，可使用<td>标记中的rowspan属性进行合并，该属性的语法格式如下所示：

在上述语法格式中，colspan属性值表示进行上下合并的单元格数量。上下合并单元格的示例代码如下所示：

使用浏览器预览，其效果如下图所示。

3. 上下左右合并

在HTML5中，除了左右合并及上下合并单元格之外，还可以进行上下左右合并单元格。其中，上下左右合并单元格的示例代码，如下所示：

使用浏览器预览，其效果如下图所示。

4.3 设置表格

设置表格包括定义表格大小、定义表头、设置边框类型等内容，通过设置表格可以使表格符合网页的整体设计要求，从而达到美化和规范网页的目的。

4.3.1 定义表格

定义表格包括定义表格的大小和定义表格的表头两部分内容，定义表格的大小是调整表格的整体大小，而定义表头则是设置表头区域的格式。

1. 定义表格大小

在HTML5中，创建的表格大小是固定的，可通过下列代码来调整表格大小：

使用浏览器预览，其效果如下图所示。

2. 定义表格的表头

在HTML5中，可以通过<th>标记定义表格中的表头。表头分为垂直和水平两种类型，下面示例代码中显示了分别创建带有垂直和水平表头的表格。

使用浏览器预览，其效果如下图所示。

4.3.2 设置边框类型

在HTML5中，可以使用表格的border属性来定义表格的边框类型，也就是定义表格的外边框类型。不同边框类型表格的示例代码如下所示：

使用浏览器预览，其效果如下图所示。

4.3.3 设置表格背景

在HTML5中，可以像设置网页背景那样设置表格背景，从而增加表格的美观性。

1. 设置表格背景颜色

设置表格的背景颜色与设置单元格的背景颜色大体一致，也是使用bgcolor属性进行设置。设置表格背景颜色的示例代码如下所示：

使用浏览器预览，其效果如下图所示。

2. 设置表格背景图片

在HTML5中，除了为表格设置背景颜色之外，还可以使用background属性，为表格设置背景图片。将图片设置为表格背景的示例代码如下所示：

使用浏览器预览，其效果如下图所示。

4.4 处理表格数据

目前，可以使用HTML5代码插入和编辑表格，但无法单独对表格数据进行排序。只能借助JavaScript中的函数，以及HTML5编写软件Dreamweaver来排序表格数据。除此之外，还可以借助Dreamweaver软件导入与导出外部数据和网页数据。

4.4.1 排序数据

排序数据是指按照一定的规律对表格内的单列数据进行升序或降序排列。

选择表格，执行【命令】|【排序表格】命令。在弹出的【排序表格】对话框中，设置相应的选项，单击【确定】按钮即可，如下图所示。

其中，【排序表格】对话框中各选项的具体含义如下所述。

□ 排序按 用于设置进行排序所依据的列。

□ 顺序 用于设置排序的顺序和方向，选择“按字母顺序”选项，将按照字母的排列进行排序；而选择“按数字顺序”选项，则按照数字的排列进行排序。当选择“升序”方向时，则表示排序按照数字从小到大，字母从A到Z的方向进行排列；当选择“降序”方向时，则表示排序按照数字从大到小，字母从Z到A的方向进行排列。

□ 再按 用于设置进行排序所依据的第二依据的列。

□ 顺序 用于设置第二依据的排序顺序和方向。

□ 排序包含第一行 启用该复选框，可以将表格第一行包含在排序中。

□ 排序标题行 启用该复选框，可以指定使用与主体行相同的条件对表格的标题部分中的所有行进行排序。

□ 排序脚注行 启用该复选框，可以指定按照与主体行相同的条件对表格的脚注部分中所有的行进行排序。

□ 完成排序后所有行颜色保持不变 启用该复选框，可以指定排序之后表格行属性应该与同一内容保持关联。

4.4.2 导入／导出表格数据

Dreamweaver为用户提供了导入／导出表格数据功能，通过该功能不仅可以将以分隔文本格式、Excel和Word等格式的数据导入到Dreamweaver中，还可以将Dreamweaver中的数据导出为普通的表格式数据。

1. 导入表格式数据

在Dreamweaver文档中，执行【文件】|【导入】|【表格式数据】命令，在弹出的【导入表格式数据】对话框中，设置相应选项，单击【确定】按钮即可，如下图。

其中，在【导入表格式数据】对话框中，主要包括下列7种选项。

□ 数据文件 用于设置所需导入的文件路径，可通过单击【浏览】按钮，在弹出的对话框中选择导入文件。

□ 定界符 用于设置导入文件中所使用的分隔符，包括“逗号”“引号”“分号”“Tab”和“其他”5种分隔符；当用户选择“其他”分隔符时，则需要在右侧的文本框中输入新的分隔符。

□ 表格宽度 用于设置表格的宽度，选中“匹配内容”选项可以使每个列足够宽，以适应该列中最长的文本字符串；选中“设置为”选项，既可以以px为单位指定表格的固定列宽，又可以按照浏览器窗口宽度的百分比来指定表格的列宽。

□ 单元格边距 用于指定单元格内容与单元格边框之间的距离，以px为单位。

□ 单元格间距 用于指定相邻单元格之间的距离，以px为单位。

□ 格式化首行 用于设置表格首行的格式，包括“无格式”“粗体”“斜体”和“加粗斜体”4种格式。

□ 边框 用于指定表格边框的宽度，以px为单位。

2. 导入Excel数据

在Dreamweaver文档中，选择导入位置，执行【文件】|【导入】|【Excel文档】命令，在弹出的【导入Excel文档】对话框中，选择Excel文件，单击【打开】按钮，如下图。

此时，用户可以在Dreamweaver文档中，查看所导入的Excel文档中的数据。对于导入的Excel数据表，用户也可以选择该表，在【属性】面板中设置表格的基本属性，如下图。

3. 导入Word数据

在Dreamweaver文档中，选择导入位置，执行【文件】|【导入】|【Word文档】命令，在弹出的【导入Word文档】对话框中，选择Word文件，单击【打开】按钮，如下图。

此时，用户可以在Dreamweaver文档中，查看所导入的Word文档中的数据，如下图。

4. 导出数据

在Dreamweaver文档中，除了可以导入外部数据之外，还可以将Dreamweaver文档中的表格导出为普通的表格式数据。

首先，选择表格或选择任意一个单元格，执行【文件】|【导出】|【表格】命令。然后，在弹出的【导出表格】对话框中，设置【定界符】选项，用于指定分隔符样式；同时设置【换行符】选项，用于指定打开文件所使用的操作系统版本，并单击【导出】按钮，如下图。

最后，在弹出的【表格导出为】对话框中，设置保存位置和名称，单击【保存】按钮即可，如下图。

4.5 练习：制作个人简历

表格在网页中是用来定位和排版的，有时一个表格无法满足所有的需要，这时就需要运用到嵌套表格。在本练习中，将通过制作一份个人简历（如下图），来详细讲述嵌套表格的使用方法和操作技巧。

操作步骤

STEP|01 创建CSS样式。在<head></head>标签中间输入<style></style>标记，并在其中间输入CSS样式。

STEP|02 插入表格。在<body>标记中输入标签属性代码，同时输入插入表格代码，插入指定大小的3行3列的表格。

STEP|03 合并单元格。在第1个<td>标签中输入合并属性colspan="3"，合并3个单元格，同时删除该标签下方的2行单元格标记。

STEP|04 在合并后的单元格中输入属性代码并插入图片，然后在第2行中的第1和第3单元格中分别设置属性，并插入图片。

STEP|05 合并第3行中的所有单元格，并在合并后的单元格中插入图片。

STEP|06 制作表格内容。选择第2行第2列单元格，设置其属性值并插入一个27行5列的表格。然后，合并第1行所有单元格，设置其属性并输入文本。

STEP|07 根据简历设计要求，合并相应的单元格，并分别设置不同单元格的不同背景颜色。然后，在各单元格中输入相应的文本及属性。

4.6 练习：制作购物车页

随着网络营销的不断扩展，越来越多的用户喜欢在网络上购买物品，而网上商城也将逐步替代实体经营店。用户在网络商城购物时，需要将当前所需购买的商品放在购物车中（如下图），以便选择完所有的商品后一次性支付购物款项。此时，购物网站会通过一个表格将用户所购买的商品逐个列举，并计算总额供用户查看和支付。在本练习中，将详细介绍使用表格功能制作购物车网页的操作方法。

操作步骤

STEP|01 链接CSS文件。首先，在<title></title>标签内输入网页名称。然后，在其后输入链接CSS文件的代码。

STEP|02 制作导航栏。在<body>标签后插入名为“header”的Div层，然后在该层中插入名为“logo”的Div层，在该层中插入图片。

STEP|03 在“logo”层中插入名为“goto”的Div层，在该层中插入1行3列的表格，设置表格及单元格的属性，并输入相应的文本。

STEP|04 在</div>与</body>之间插入名为“myCar”的Div层，在其后插入名为“carList”的Div层，紧接着插入名为“footer”的Div层，并在该层中输入版尾信息。

STEP|05 将光标定位在名为“carList”的Div层中，在该层中插入一个10行7列的表格，并设置表格属性。设置不同行内单元格的属性，并输入相应的文本。

STEP|06 设置第1行中单元格的属性，并输入相应的文本。

STEP|07 用同样的方法，设置其他单元格属性，并输入相应的文本。