第3天下午 使用表格轻松排列和布局网页元素
本章学习流程图
知识导读
前几天学习了网页基本元素的使用，今天下午我们将学习网页的布局定位。众所周知，任何界面的产生，都需要对其进行排列，网页自然也不会例外，而排列时最常使用的工具就是表格了。利用表格对网页元素进行定位是网页排版最基本的方法，它以简洁明了和高效快捷的方式，将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的网页。今天下午主要学习插入表格和表格元素、选择表格元素、表格的基本操作、排序及整理表格内容等相关知识，通过今天下午的学习，读者可以利用表格排版布局出各种复杂的网页。
完成今天下午内容后，您将能够
◎ 插入表格和表格元素
◎ 选择表格元素
◎ 掌握表格的基本操作
◎ 掌握排序及整理表格内容
实例展示
创建细线表格
导入表格数据
创建圆角表格
利用表格排列数据
6.1 插入表格和表格元素
表格由行、列和单元格三部分组成。行贯穿表格的左右，列则采用上下方式。单元格是行和列交汇的部分，它是输入信息的地方。单元格会自动扩展到与输入信息的相适应尺寸。
6.1.1 插入表格
在Dreamweaver中，表格可以用于制作简单的图表，还可以用于安排网页文档的整体布局，它起着非常重要的作用。在网页中插入表格的方法非常简单。执行“插入”|“表格”命令，弹出“表格”对话框，如图6-1所示。
图6-1 “表格”对话框
知识要点
“表格”对话框中可以进行如下设置。
◎ 行数：在文本框中输入新建表格的行数。
◎ 列数：在文本框中输入新建表格的列数。
◎ 表格宽度：用于设置表格的宽度，其中右边的下拉列表中包含“百分比”和“像素”两个选项。
◎ 边框粗细：用于设置表格边框的宽度，如果设置为0，在浏览时看不到表格的边框。
◎ 单元格边距：单元格内容和单元格边界之间的像素数。
◎ 单元格间距：单元格之间的像素数。
◎ 页眉：可以定义表头样式，4种样式可以任选一种。
◎ 标题：定义表格的标题。
◎ 对齐标题：用来定义表格标题的对齐方式。
◎ 摘要：用来对表格进行注释。
下面通过实例讲述表格的插入方法，具体操作步骤如下。
1 打开网页文档，如图6-2所示。
图6-2 打开网页文档
2 执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为7，“列数”设置为3，“表格宽度”设置为500像素，如图6-3所示。
图6-3 “表格”对话框
3 单击“确定”按钮，插入表格，如图6-4所示。
图6-4 插入表格
提示
在“常用”插入栏中单击表格按钮
，也可弹出“表格”对话框。
6.1.2 设置表格属性
创建完表格后可以根据实际需要对表格的属性进行设置，如宽度、边框、背景颜色、边框颜色或对齐等，也可只对某些单元格进行设置。设置表格属性之前首先要选中表格，在“属性”面板中将显示表格的属性，并进行相应的设置，如图6-5所示。
图6-5 表格的属性面板
指点迷津
表格属性面板中可以进行如下设置。
◎ 表格：表格的ID。
◎ 行、列：表格中行和列的数量。
◎ 宽：表格的宽度。
◎ 填充：单元格内容和单元格边框之间的像素数。
◎ 间距：相邻单元格间的像素数。
◎ 边框：表格边框的宽度。
◎ 对齐：确定表格相对于同一段落中其他元素（例如文本或图像）的显示位置。“左对齐”沿其他元素的左侧对齐表格（因此同一段落中的文本在表格的右侧换行）；“右对齐”沿其他元素的右侧对齐表格（文本在表格的左侧换行）；“居中对齐”将表格居中（文本显示在表格的上方和/或下方）；“默认”指示浏览器应该使用其默认对齐方式。
◎ 类：对该表格设置一个CSS类。
◎ 
用于清除行高。
◎ 
用于清除列宽。
◎
将表格宽由百分比转转为像素。
◎ 
将表格宽由像素转换为百分比。
6.1.3 添加内容到单元格
将光标置于表格中，分别输入相应的内容，如图6-6所示。
图6-6 输入相应的内容
6.2 选择表格元素
处理表格时经常要选择表格中的一个或多个单元格，或者选择整行整列单元格，这时可以根据具体情况使用不同的方法进行选择。
6.2.1 选取表格
要想对表格进行编辑，那么首先应该选择它，主要有以下几种方法选取整个表格。
◎ 将光标置于表格的左上角，按住鼠标的左键不放，拖曳鼠标指针到表格的右下角，将整个表格中的单元格选中，单击鼠标右键，在弹出的菜单中选择“表格”|“选择表格”选项。
◎ 单击表格边框线的任意位置，即可选中表格。
◎ 将光标置于表格内的任意位置，执行“修改”|“表格”|“选择表格”命令。
◎ 将光标置于表格内的任意位置，单击文档窗口左下角的<table>标签，如图6-7所示。
图6-7 选择<table>标签
6.2.2 选取行或列
选择表格的行与列也有两种不同的方法。
◎ 将鼠标置于要选择行首或列顶，当鼠标指针形状变成了黑箭头时，单击鼠标左键即可以选中列或行，如图6-8所示。
图6-8 选择列
◎ 按住鼠标左键不放从左至右或者从上至下拖曳，即可选中行或列，如图6-9所示。
图6-9 选择行
提示
还有一种方法只可以选中行，将光标置于要选择的行中，然后单击窗口左下角的<tr>标签，这种方法只能选择行，而不能选择列。
6.2.3 选取单元格
选择表格中的单元格有两种方式，一种是选择单个单元格，另一种是选择多个单元格，如图6-10所示。
图6-10 选择多个不相邻的单元格
知识要点
◎ 按住Ctrl键，然后单击要选中的单元格即可。
◎ 将光标移到要选中的单元格中，按住Ctrl+A组合键，即可选中该单元格。
◎ 将光标置于要选中的单元格中，执行“编辑”|“全选”命令，即可选中该单元格。
◎ 将光标置于要选择的单元格内，单击文档窗口左下角的<td>标签即可选中该单元格。
◎ 按住Shift键不放并单击选择多个单元格中的第一个和最后一个，可以选择多个相邻的单元格。
◎按住Ctrl键不放单击并选择的多个单元格，可以选择多个相邻或不相邻的单元格。
6.3 表格的基本操作
创建了表格后，用户要根据网页设置对表格进行处理，例如调整表格和单元格的大小、添加/删除行或列、拆分单元格以及剪切、复制和粘贴单元格等，熟练掌握表格的基本操作，可以提高网页制作速度。
提示
表格设置的优先顺序应该是单元格、行、表格。
6.3.1 调整表格和单元格的大小
使用“属性”面板中的“宽”和“高”文本框能精确地调整表格的大小，而用鼠标拖动调整则显得更为方便快捷，调整表格大小的方法如下。
◎ 调整表格的宽：选中整个表格，将光标置于表格右边框控制点
上，当光标变成双箭头
时，如图6-11所示，拖动鼠标即可调整表格整体宽度。
图6-11 调整表格的宽
◎ 调整表格的高：选中整个表格，将光标置于表格底边框控制点
上，当光标变成双箭头
时，如图6-12所示，拖动鼠标即可调整表格整体高度。
图6-12 调整表格高
◎ 同时调整表宽和高：选中整个表格，将光标置于表格右下角控制点
上，当光标变成双箭头
时，如图6-13所示，拖动鼠标即可调整表格整体高度和宽度。
图6-13 调整表格的宽和高
指点迷津
使用布局表格排版时应注意什么？
在Dreamweaver中有一个非常重要的功能，即利用布局模式来给网页排版。在布局模式下，可以在网页中直接拖出表格与单元格，还可以自由拖动。利用布局模式对网页定位非常方便，但生成的表格比较复杂，不适合大型网站使用，一般只应用于中小型网站。
将光标置于要设置大小的单元格中，用“属性”面板中的“宽”和“高”文本框能精确地调整单元格的大小，而用鼠标拖动调整则显得更为方便快捷，调整单元格大小的方法如下。
◎ 调整列宽：将光标置于表格右边的边框上，当鼠标变成为
时，拖动鼠标即可调整最后一列单元格的宽度，如图6-14所示。
图6-14 调整列宽
◎ 调整行高：将光标置于表格底部边框或者中间行线上，当光标变成
时，拖动鼠标即可调整上面一行单元格的高度，如图6-15所示。
图6-15 调整行高
提示
在编辑页面中的表格时，尽量使用像素作为宽度和高度的单位，这样会避免因为访问者显示器分辨率不同而造成的页面偏差。
6.3.2 添加/删除行或列
可以执行“修改”|“表格”菜单中的子命令，增加或减少行与列。
增加行与列可以使用以下方法。
◎ 将光标置于相应的位置，执行“修改”|“表格”|“插入行”命令，即可插入一行。
◎ 将光标置于相应的位置，执行“修改”|“表格”|“插入列”命令，即可在相应的位置插入一列。
◎ 将光标置于相应的位置，执行“修改”|“表格”|“插入行或列”命令，弹出“插入行或列”对话框，在对话框中进行相应的设置，如图6-16所示。单击“确定”按钮，即可在相应的位置插入行或列，如图6-17所示。
图6-16 “插入行或列”对话框
图6-17 插入行
知识要点
在“插入行或列”对话框中可以进行如下设置。
◎ 插入：包含“行”和“列”两个单选按钮，一次只能选择其中一个来进行插入行或者列的操作。该选项组的初始状态选择的是“行”选项，所以下面的选项就是“行数”。如果选择的是“列”选项，那么下面的选项就变成了“列数”，在“列数”选项的文本框内可以直接输入要插入的列数。
◎ 位置：包含“所选之上”和“所选之下”两个单选按钮。如果“插入”选项选择的是“列”选项，那么“位置”选项后面的两个单选按钮就会变成“在当前列之前”和“在当前列之后”。
删除行或列有以下几种方法。
◎ 将光标置于要删除行或列的位置，执行“修改”|“表格”|“删除行”命令，或执行“修改”|“表格”|“删除列”命令，即可删除行或列，如图6-18所示。
图6-18 删除行
◎ 选中要删除的行或列，执行“编辑”|“清除”命令，即可删除行或列。
◎ 选中要删除的行或列，按Delete键或按BackSpace键也可删除行或列。
6.3.3 拆分单元格
在使用表格的过程中，有时需要拆分单元格以达到自己所需的效果。拆分单元格就是将选中的单元格拆分为多行或多列，具体操作步骤如下。
1 将光标置于要拆分的单元格中，执行“修改”|“表格”|“拆分单元格”命令，弹出“拆分单元格”对话框，如图6-19所示。
图6-19 “拆分单元格”对话框
2 在对话框中的“把单元格拆分”选择“行”，“行数”设置为2，单击“确定”按钮，即可将单元格进行拆分，如图6-20所示。
图6-20 拆分单元格
高手支招
拆分单元格还有以下两种方法：
◎ 将光标置于拆分的单元格中，单击鼠标右键，在弹出的菜单中选择“表格”|“拆分单元格”选项，弹出“拆分单元格”对话框，然后进行相应的设置。
◎ 单击属性面板中的“拆分单元格为行或列”按钮
，它往往是创建复杂表格的重要步骤。
6.3.4 合并单元格
合并单元格就是将选中单元格的内容合并到一个单元格。合并单元格，首先将需要合并的单元格选中，然后执行“修改”|“表格”|“合并单元格”命令，将多个单元格合并成一个单元格。或选中单元格后单击鼠标右键，在弹出的菜单中选择“表格”|“合并单元格”选项，将多个单元格合并成一个单元格，如图6-21所示。
图6-21 合并单元格
提示
也可以单击“属性”面板中的“合并所选单元格，使用跨度”按钮
，它往往是创建复杂表格的重要步骤。
6.3.5 剪切、复制、粘贴单元格
选中表格后执行“编辑”|“拷贝”命令，或者按Ctrl+C组合键就可将选中的表格复制到剪贴板上，而执行“编辑”|“剪切”命令，或者按Ctrl+X组合键也可以将选中的表格复制到剪贴板上，如图6-22所示。执行“编辑”|“粘贴”命令，或者按Ctrl+V组合键即可完成表格的粘贴操作，如图6-23所示。
图6-22 选择“拷贝”命令
图6-23 粘贴表格
6.4 排序及整理表格内容
为了更加快速有效地处理网页中的表格和内容，Dreamweaver CS4提供了多种自动处理功能，包括导入表格数据和排序表格等。本节将介绍表格自动化处理技巧，以提升读者网页表格设计技能。
6.4.1 导入表格式数据
Dreamweaver中导入表格式数据功能能够根据素材来源的结构，为网页自动建立相应的表格，并自动生成表格数据，因此，当遇到大篇幅的表格内容编排，而手头又拥有相关表格式素材时，便可以使网页编排工作轻松得多。
将光标置于要导入表格数据的位置，执行“插入”|“表格对象”|“导入表格式数据”命令，弹出如图6-24所示的“导入表格式数据”对话框。
图6-24 “导入表格式数据”对话框
知识要点
在“导入表格式数据”对话框中可以进行如下设置。
◎ 数据文件：输入要导入数据文件的保存路径和文件名，或单击右边的“浏览”按钮进行选择。
◎ 定界符：选择定界符，使之与导入的数据文件格式匹配。有“Tab”、“逗点”、“分号”、“引号”和“其他”5个选项。
◎ 表格宽度：设置导入表格的宽度。
◎ 匹配内容：勾选此单选按钮，创建一个根据最长文件进行调整的表格。
◎ 设置为：勾选此单选按钮，在后面的文本框中输入表格的宽度及其单位。
◎ 单元格边距：单元格内容和单元格边界之间的像素数。
◎ 单元格间距：相邻的表格单元格间的像素数。
◎ 格式化首行：设置首行标题的格式。
◎ 边框：以像素为单位设置表格边框的宽度。
下面通过实例讲述导入表格数据的方法，效果如图6-25所示，具体操作步骤如下。
图6-25 导入表格数据效果
起始文件：CD-ROM/起始文件/第3天下午/6.4.1/index.htm
完成文件：CD-ROM/完成文件/第3天下午/6.4.1/index1.htm
1 打开网页文档，如图6-26所示。
图6-26 打开网页文档
2 将光标置于要导入表格数据的位置，执行“插入”|“表格对象”|“导入表格式数据”命令，弹出“导入表格式数据”对话框，如图6-27所示。
图6-27 “导入表格式数据”对话框
3 在对话框中单击“数据文件”文本框右边的“浏览”按钮，弹出“打开”对话框，选择数据文件，如图6-28所示。
图6-28 “打开”对话框
4 单击“打开”按钮，将数据文件添加到文本框中，在对话框的“定界符”下拉表中选择“逗点”选项，“表格宽度”选中“匹配内容”单选按钮，如图6-29所示。
图6-29 “导入表格式数据”对话框
5 单击“确定”按钮，导入表格式数据，如图6-30所示。
图6-30 导入表格式数据
6 对导入的表格设置背景颜色，如图6-31所示。
图6-31 设置表格的背景颜色
提示
在导入数据表格时注意定界符必须是逗点，否则可能会造成表格格式的混乱。
7 保存文档，按F12键在浏览器中预览，效果如图6-25所示。
6.4.2 排序表格
排序表格的功能主要针对具有格式数据的表格而言，它根据表格中的数据进行排序操作。选中要排序的表格，执行“命令”|“排序表格”命令，弹出“排序表格”对话框，如图6-32所示。
图6-32 “排序表格”对话框
知识要点
在“排序表格”对话框中可以进行如下设置。
◎ 排序按：确定哪个列的值将用于对表格排序。
◎ 顺序：确定是按字母还是数字顺序以及是升序还是降序对列排序。
◎ 再按：确定在不同列上第二种排列方法的排列顺序。在其后面的下拉列表中指定应用第二种排列方法的列，在后面的下拉列表中指定第二种排序方法的排序顺序。
◎ 排序包含第一行：指定表格的第一行应该包括在排序中。
◎ 排序标题行：指定使用与body行相同的条件对表格thead部分中的所有行排序。
◎ 排序脚注行：指定使用与body行相同的条件对表格tfoot部分中的所有行排序。
◎ 完成排序后所有行颜色保持不变：指定排序之后表格行属性应该与同一内容保持关联。
下面通过实例讲述排序表格的方法，效果如图6-33所示，具体操作步骤如下。
图6-33 排序表格效果
起始文件：CD-ROM/起始文件/第3天下午/6.4.2/index.htm
完成文件：CD-ROM/完成文件/第3天下午/6.4.2/index1.htm
1 打开网页文档，选中表格，如图6-34所示。
图6-34 打开网页文档
2 执行“命令”|“排序表格”命令，弹出“排序表格”对话框，将“排序按”设置为列1，“顺序”设置为“按数字顺序”，在右边的下拉列表中选择“降序”，如图6-35所示。
图6-35 “排序表格”对话框
3 单击“确定”按钮，对表格进行排序，如图6-36所示。
图6-36 对表格进行排序
知识要点
如果表格中含有合并或拆分的单元格，则无法使用表格排序功能。
4 保存文档，按F12键在浏览器中预览，效果如图6-33所示。
6.5 综合练习
表格最基本的作用就是让复杂的数据变得更有条理，让人容易看懂，在设计页面时，往往要利用表格来布局定位网页元素。下面通过几个实例掌握表格的使用方法。
练习1——利用表格排列数据
下面通过实例讲述利用表格排列数据，效果如图6-37所示，具体操作步骤如下。
图6-37 利用表格排列数据的效果
起始文件：CD-ROM/起始文件/第3天下午/综合练习1/index.htm
完成文件：CD-ROM/完成文件/第3天下午/综合练习1/index1.htm
1 打开网页文档，如图6-38所示。
图6-38 打开网页文档
2 将光标置于要导入表格数据的位置，执行“插入”|“表格对象”|“导入表格式数据”命令，弹出“导入表格式数据”对话框，单击“数据文件”文本框右边的“浏览”按钮，弹出“打开”对话框，选择相应的数据文件，如图6-39所示。
图6-39 “打开”对话框
3 单击“打开”按钮，将数据文件添加到文本框中，在“定界符”下拉列表中选择“逗点”，如图6-40所示。
图6-40 设置“导入表格式数据”对话框
指点迷津
一定要确保指定保存数据文件时使用分隔符。如果未能指定分隔符，则无法正确地导入文件，也无法在表格中对你的数据进行正确的格式设置。
4 单击“确定”按钮，导入表格式数据，如图6-41所示。
图6-41 导入表格式数据
5 选中表格，执行“命令”|“排序表格”命令，弹出“排序表格”对话框，在对话框中将“排序按”设置为“列3”，“顺序”设置为“按数字顺序”，在后面的下拉列表中选择“降序”，如图6-42所示。
图6-42 “排序表格”对话框
6 单击“确定”按钮，对表格进行排序，如图6-43所示。
图6-43 对表格进行排序
7 保存文档，按F12键在浏览器中预览，效果如图6-37所示。
练习2——创建圆角表格
在网页中，有时会用一些大的色块区域作为某个版块内容的底色，来达到突出该版块的目的。这种效果可以通过填充表格的背景颜色来实现。其中，圆角表格是最常用的一种背景方式。但是在Dreamweaver中，表格都是矩形的，边角都为直角，填充背景颜色只能得到矩形的色块，那么圆角该如何处理呢？我们有一个办法，就是把这个圆角做成图像，然后再插入到表格中来，虽然它和设置背景色的原理不同，但是在浏览器中的显示却没有分别。下面通过实例讲述创建圆角表格的方法，效果如图6-44所示，具体操作步骤如下。
图6-44 创建圆角表格效果
起始文件：CD-ROM/起始文件/第3天下午/综合练习2/index.htm
完成文件：CD-ROM/完成文件/第3天下午/综合练习2/index1.htm
1 打开网页文档，如图6-45所示。
图6-45 打开网页文档
2 将光标置于相应的位置，执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为3，“列数”设置为1，“表格宽度”设置为575像素，如图6-46所示。
图6-46 “表格”对话框
3 单击“确定”按钮，插入表格，此表格记为表格1，如图6-47所示。
图6-47 插入表格1
4 将光标置于表格1的第1行单元格中，执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择图像images/lfbg_jj_top，如图6-48所示。
图6-48 “选择图像源文件”对话框
5 单击“确定”按钮，插入图像，如图6-49所示。
图6-49 插入图像
6 将光标置于表格1的第2行单元格中，执行“插入”|“表格”命令，插入2行2列的表格，“表格宽度”设置为100%，此表格记为表格2，如图6-50所示。
图6-50 插入表格2
7 将光标置于表格2的第1行第1列单元格中，执行“插入”|“图像”命令，插入图像images/jj_r2_c3.png，如图6-51所示。
图6-51 插入图像
8 将光标置于表格2的第1行第2列单元中，拖住鼠标至表格2的第2行第2列单元格中，合并单元格，如图6-52所示。
图6-52 合并单元格
9 将光标置于合并后的单元格中，执行“插入”|“图像”命令，插入图像images/lfbg_jj_ctn.png，如图6-53所示。
图6-53 插入图像
10 将光标置于表格2的第2行第1列单元格中，执行“插入”|“表格”命令，插入1行2列的表格，此表格记为表格3，如图6-54所示。
图6-54 插入表格3
11 将光标置于表格3的第1列单元格中，执行“插入”|“图像”命令，插入图像images/jj_r4_c3.png，如图6-55所示。
图6-55 插入图像
12 将光标置于表格3的第2列单元格中，单击属性面板中的“页面属性”按钮，在弹出的“选择图像源文件”对话框中选择背景图像文件images/jj_bg.png，单击“确定”按钮，添加背景图像文件，如图6-56所示。
图6-56 “页面属性”对话框
13 单击“确定”按钮，插入背景图像，如图6-57所示。
图6-57 插入背景图像
14 将光标置于背景图像上，输入相应的文字，将“大小”设置为12像素，“颜色”设置为#d76011，如图6-58所示。
图6-58 输入相应的文字
15 将光标置于表格1的第3行单元格中，执行“插入”|“图像”命令，插入图像images/lfbg_jj_bot.png，如图6-59所示。
图6-59 插入图像
16 保存文档，按F12键在浏览器中预览，效果如图6-44所示。
指点迷津
为什么当浏览器缩小时页面会很难看？
当浏览器改变尺寸（缩小或者放大）时，有的网页会发生变形，导致页面很难看，这是由于排版页面表格的宽度单位导致的。
练习3——创建细线表格
有些读者可能会说，这不就是加了边框颜色的表格，把边框宽度设成最小的值1么，有什么新鲜的。没关系，你可以试一下，就算你把边框宽度设成最小的值1，它也不是真正的细线表格。真正的细线表格不是通过设置边框来制作的。边框为1的表格在浏览器中看起来还是有些蠢笨，虽然它已经是最小值了，但在实际应用中基本上没有人会使用这种表格，可以说网页上很多的表格都是细线表格，因此读者也一定要熟练掌握制作细线表格的方法。下面通过实例讲述创建细线表格的方法，效果如图6-60所示，具体操作步骤如下。
图6-60 创建细线表格效果
起始文件：CD-ROM/起始文件/第3天下午/综合练习3/index.htm
完成文件：CD-ROM/完成文件/第3天下午/综合练习3/index1.htm
1 打开网页文档，将光标置于要插入表格的单元格中，将背景颜色设置为#87B038，如图6-61所示。
图6-61 打开网页文档
2 将光标置于要插入表格的位置，执行“插入”|“表格”命令，在弹出的“表格”对话框中将“行数”设置为8，“列数”设置为3，“表格宽度”设置为600像数，如图6-62所示。
图6-62 “表格”对话框
3 单击“确定”按钮，插入表格，如图6-63所示。
图6-63 插入表格
4 选中表格，在“属性”面板中将“填充”设置为3，“间距”设置为1，如图6-64所示。
图6-64 设置表格属性
5 将光标置于第1行第1列单元格中，按住鼠标左键向右拖动至第8行第3列单元格，在“属性”面板中将“背景颜色”设置为#FFFFFF，如图6-65所示。
图6-65 设置单元格的背景颜色
6 在单元格中分别输入内容，如图6-66所示。
图6-66 输入内容
7 保存文档，按F12键在浏览器中预览，效果如图6-60所示。
6.6 本章小结
表格在网页设计中的地位非常重要，可以说如果表格使用不好的话，就不可能设计出出色的网页。Dreamweaver提供的表格工具不但可以实现一般功能的数据组织，还可以用于定位网页中的各种元素和设计规划页面的布局。本章主要学习了表格的基本知识和操作，最后的几个综合实例通过逐步的详细讲解，帮助读者学习到如何利用表格来进行网页的排版布局，并且还学到一些表格的高级应用和制作时的注意事项等。如果读者能够完成这些实例的话，相信对表格的排版技术就会有一个更深层次的认识，完全能利用表格排版布局出各种复杂的网页。
6.7 课后习题
1.填空题
（1）表格由____、____和____三部分组成。____贯穿表格的左右，____则是上下方式的，____是输入信息的地方。
（2）为了更加快速有效地处理网页中的表格和内容，Dreamweaver CS4提供了多种自动处理功能，包括____和____等。
2.操作题
（1）给如图6-67所示的网页创建细线表格效果，如图6-68所示。
图6-67 起始文件
图6-68 细线表格效果
起始文件：CD-ROM/起始文件/第3天下午/操作题1/index.htm
完成文件：CD-ROM/完成文件/第3天下午/操作题1/index1.htm
1 将光标置于要插入表格的单元格中，“将背景颜色”设置为#999900，如图6-69所示。
图6-69 设置背景颜色
2 执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为6，“列数”设置为6，“表格宽度”设置为461像素，“单元格边距”设置为1，“单元格间距”设置为1，如图6-70所示。
图6-70 “表格”对话框
3 单击“确定”按钮，插入表格，如图6-71所示。
图6-71 插入表格
4 选中所有的单元格，将“背景颜色”设置为#FFFFFF，如图6-72所示。
图6-72 设置单元格属性
5 分别在表格中输入文字，在“属性”面板中将“大小”设置为12像素，“文本颜色”设置为#19217b，如图6-73所示。
图6-73 输入文字
（2）创建如图6-74所示的利用表格布局网页的效果。
图6-74 利用表格布局网页的效果
完成文件：CD-ROM/完成文件/第3天下午/操作题2/index1.htm