第 7 章 表格

7.1表格的基本操作7.2设置单元格属性7.3 设置表格属性7.4 表格的排序7.5 格式化表格7.6 表格数据的导入和导出

7.1 表格的基本操作 7.1.1 创建表格 7.1.2单元格的拆分与合并 7.1.3 行与列的添加与删除

7.1.1 创建表格

创建表格的具体步骤如下：（ 1 ）选择菜单命令【插入】表格】，会自动打

开【表格】对话框，如图 7-1 所示。（ 2 ）在上图中设置表格的行数与列数，默认为

3 行 3 列。（ 3 ）设置表格的宽度。可为百分比或者像素，

在此设为 100 ％，这样无论当前的窗口有多大，表格始终可以充满整个页面。

7.1.1 创建表格

（ 4 ）在【边框粗细】文本框中设置表格边框的粗细。在此设置为 0 ，数值越大，边框就越粗。

（ 5 ）设置单元格边距和间距，在此设为 1 。（ 6 ）设置页眉，即为表格的对齐方式，有无、左、顶

部、两者共四种选择，在此选择默认。实际操作时可根据需要选择合适的方式。

（ 7 ）此外，还有辅助功能区，可根据需要进行设置，也可留空。

（ 8 ）单击【确定】按钮，在当前文档中，插入了一个3 行 3 列，宽度为 100% 的表格，如图 7-2 所示。

7.1.2 单元格的拆分与合并表格中行与列围成的区域称为单元格，在单元格

中可以插入文本、图像等元素，也可以根据实际的需要对单元格进行合并和拆分，具体的步骤如下：

（ 1 ）将单元格拆分成行或列，行数中可以输定数字，显示拆分的数量。将光标放在刚插入的表格第一行，单击【属性】面板中的“拆分单元格”按钮，会弹出【拆分单元格】对话框，如图 7-3 所示。

7.1.2 单元格的拆分与合并

（ 2 ）在对话框中将【单元格拆分】后的“列”单选按钮选中，在【列数】文本框中输入 2 ，单击【确定】按钮，就可以把表格的第一行拆分成 2 列，变成 2 个单元格，如图 7-4 所示。

（ 3 ）选中刚才拆分的 2 个单元格，此时在属性面板中，单击【合并单元格】按钮，则 2 列单元格又会合并成 1 个，如图 7-5 、 7-6 所示。

7.1.3 行与列的添加与删除对行与列进行添加与删除的操作步骤如下：

（ 1 ）在新建的表格上分别输入文本，如图 7-7 所示。

（ 2 ）在第四行右击，在弹出的快捷菜单中选择【表格】插入行】命令，此时就会在当前行上方插入一行，如图 7-8 所示。

（ 3 ）在当前的第 5 行右击，在弹出的快捷菜单中选择【表格》插入行或列】命令，如图 7-9 所示。

7.1.3 行与列的添加与删除

（ 4 ）打开【插入行或列】对话框，如果选择插入【行】选项，可以设置插入的行在插入点的上或下，如果选项的是插入【列】选项，可以设置插入的列在插入点的前或后。这里仅以对行的操作为例，选择在所选位置之前插入 2 行，如图 7-10 所示。

（ 5 ）单击【确定】按钮，此时表格变成了 7 行，如图7-11 所示。

（ 6 ）将光标置于要删除行的任意一个单元格中，右键选择【表格》删除行】命令或者按下 Delete 键，可将该行删除。如图 7-12 、 7-13 所示。

7.2 设置单元格属性 单元格作为表格的重要的组成部分，其属性的设置影响到表格的外观，将

鼠标放到某个单元格内，可以通过【属性】面板对这个单元格进行设置，如图 7-14 所示。

在属性面板中，各参数的含义如下：（ 1 ）水平对齐：有默认、左对齐、居中对齐、右对齐

4 种对齐方式。默认的对齐方式是左对齐，设置后的三种效果如图 7-15 所示。

（ 2 ）垂直对齐：有默认、顶端、底部、基线 4 种方式，默认的对齐方式是居中，设置后的三种效果如图 7-16所示。

7.2 设置单元格属性（ 3 ）在【属性】面板中宽和高的文本框中输入数值，可以设置单元

格的高度和宽度，此数值的单位可为像素 (px) 或者百分比 (%)（ 4 ）单元格中设置背景图片，单击背景后的按钮，在弹出的【选择

图像源文件】对话框中选择背景图像，然后单击【确定】按钮，完成背景图像的设置，如图 7-17 所示。

（ 5 ）设置背景色，单击背景颜色后的按钮，可以对选中的单元格背景颜色进行设置，如图 7-18 所示。

（ 6 ）设置单元格边框颜色，单击边框颜色后的按钮，可以对所选单元格的边框颜色进行设置，如图 7-19 所示。

7.3 设置表格属性 7.3.1 表格的边框属性 7.3.2 表格的背景属性 7.3.3 表格的对齐属性 7.3.4 表格的填充与间距 7.3.5 表格的嵌套

7.3.1 表格的边框属性

边框属性有 2 个：大小和颜色，边框的大小属性用于设置边框的宽度，在【属性】面板中“边框”选项中设置其宽度，可以设置为 0 或其他数值。只有在其数值大于 0 时，边框才可以在浏览器中可见。表格边框在网页设计过程中经常用到，有时会根据需要设置成一定的数值，以像素为单位。

边框的颜色是为了美化表格和网页而设置的，可以在“边框颜色”选项中直接输入颜色值，或单击“边框颜色”后的按钮，出现颜色选择器，或采用自定义颜色适配器，进行边框颜色的设置，而且边框颜色只有在表格的宽度大于 0 时才有效。

7.3.2 表格的背景属性

表格的背景可以使用颜色填充也可以使用图片填充。使用背景色填充表格的步骤如下：

选中表格，在【属性】面板中的背景颜色后面的文本框中输入颜色值，或者在颜色选择框中选择背景颜色，属性如图 7-21 所示。

设置背景颜色的表格在浏览器中的显示效果如图 7-22 所示。

7.3.2 表格的背景属性 使用背景图片填充表格的步骤如下： （ 1 ）选中表格，打开【属性】面板，在背景

后面的文本框中输入表格背景图像的路径和名称，或者单击【文件夹】按钮，打开【选择图像源文件】对话框，选择本地图片作为背景图像，如图 7-23 所示。

（ 2 ）单击【确定】按钮，就可以将表格的背景设置为图片，表格在浏览器中的预览效果如图 7-24 所示。

7.3.3 表格的对齐属性 选中表格，在属性面板中可以设置表格在文档

中的对齐方式。可以设置为：左对齐、居中对齐、右对齐，根据需要进行设置，默认是左对齐。如果表格的宽度为 100% 时，就不需要设置对齐属性，不同的对齐属性在浏览器中的效果如图 7-25 所示。

7.3.4 表格的填充与间距 在属性面板中可以设置表格的填充与间距数值。

填充：通过数值设置单元格内部空白区域的大小；间距：通过数值设置单元格之间的距离。设置表格填充和间距的属性效果如图 7-26 所示。

使用表格的填充和间距属性可以设置细边框的表格，此属性在实际制作过程中经常用到。

7.3.5 表格的嵌套 使用表格嵌套来制作网页的步骤如下： （ 1 ）单击工具栏中【插入表格】按钮，插入一个 2

行 2 列的表格。表格的属性如图 7-27 所示。 （ 2 ）在第 1 行第 1 列中插入图像，第 1 行第 2 列中

插入文本。 （ 3 ）在第 2 行的 2 个单元格插入和第 1 行同样的元

素，此时文档效果如图 7-28 所示。 （ 4 ）将第 2 行第 1 列的图像换成一个大图，此时文

档的界面发生了错位，第 1 行第 1 列的单元格的宽度被第 2 行第 1 列的图给撑大了，如图 7-29 所示。

7.3.5 表格的嵌套 （ 5 ）如果需要保持第 1 行的原图片和文档位置不变，

需要建立表格嵌套。 （ 6 ）选中第 1 行的 2 个单元格，单击【属性】面板

中的“合并单元格”按钮，将第 1 行的 2 个单元格合并。

（ 7 ）然后在合并后的单元格中插入一个 1 行 2 列的表格，并设置边框为 0 ，如图 7-30 所示。

（ 8 ）单击【确定】按钮，将表格插入到单元格中，如图 7-31 所示。

（ 9 ）将原来单元格的图像和文本分别移到新建的这个表格的 2 个单元格中，保存文档，并在浏览器中预览效果如图 7-32 所示。

7.4 表格的排序 在网页中，用户经常要对表格中的大量数据进行排序，使用 Dreamweaver

8 可以很容易实现将表格内的数据排序，具体的操作步骤如下： （ 1 ）选中页面中的表格，如图 7-33 所示。 （ 2 ）选择菜单命令【命令】排序表格】，弹出【排序表格】对

话框，如图 7-34 所示。 （ 3 ）设置排序按【列 3 】。 （ 4 ）设置【顺序》按数值顺序》降序】。 （ 5 ）设置【再按》顺序》按字母顺序》升序】。 （ 6 ）选中【完成排序后所有行的颜色保持不变】复选项。 （ 7 ）单击【确定】按钮，表格中数据的排序结果如图 7-35 所示。

7.5 格式化表格 下面将介绍如何美化表格，具体的操作步骤如下： （ 1 ）选中表格，单击【命令】格式化表格】选项，如图 7-36 所

示。 （ 2 ）单击【格式化表格】选项后，将弹出【格式化表格】对话

框，如图 7-37 所示。 （ 3 ）在【格式化表格】对话框的左上角有各种样式，读者可以

根据各自的喜好自行选择。本例中选择【 AltRows ： Earth Colors 】这一项。这里需要注意的是最后一项，该项询问是否把各样式代码添加到 TD 标注里而非默认添加到 TR 标签中。建议不要勾选该项，否则会生成比默认设置多得多的代码。格式化后的表格如图 7-38 所示。

7.6 表格数据的导入和导出 7.6.1 表格数据的导入 7.6.2 表格数据的导出

7.6.1 表格数据的导入 （ 1 ）在将 Excel 中的数据导入之前，也可以先将 Excel 中的文本另存为文本格式的文件再导入，但要注意保存类型应选择【文本文件（制表分隔符）】。如图 7-39 所示。

（ 2 ）选择菜单命令【文件》导入》表格式数据】，弹出“导入表格式数据”对话框，如图 7-40 所示。

（ 3 ）单击【浏览】按钮，选择存放数据的文本文件即 cj.txt 文件。其定界符项要和文本文件里的分离符相对应，因为 cj.txt 文件里用的是制表符，所以在此选择了 Tab ，其他各项可根据读者的需要进行修改。

（ 4 ）如果选择菜单命令【文件》导入》 Excel 文档】，则弹出“导入 Excel 文档”对话框，如图 7-41 所示。

（ 5 ）单击【确定】按钮，完成表格数据的导入，此时再文档中插入了表格，如图 7-42 所示。

7.6.2 表格数据的导出

利用 Dreamweaver 8 同样可以将表格数据导出为文本文件，具体的操作步骤如下：

（ 1 ）将光标移至表格中的任意一个单元格，选择菜单命令【文件》导出》表格】，弹出“导出表格”对话框，如图 7-43 所示。

（ 2 ）选择【定界符】下拉列表中的选项，设置导出表格后各单元格之间用什么符号来进行分隔，在此例中选择 Tab 。

（ 3 ）选择【换行符】下拉列表中的选项，设置导出的表格适用于哪个操作系统，本例选择 Windows 。

（ 4 ）单击【导出】按钮，弹出【表格导出为】对话框，在文件名后的文本框中输入导出的文件名及扩展名，如图 7-44 所示。

（ 5 ）单击【保存】按钮，完成表格数据的导出。