第4章 表格的应用
4.1 创建表格
表格是网页布局设计的常用工具，其在网页中的应用已经突破了传统的用来记载大量数据的功能，它可以使插入页面中的图像和文本等对象被限定在某一固定位置。相对于没有使用表格的页面，使用表格的页面显得更加整齐有序。合理使用布局表格，会使网页对象被组织得更加紧密，使整个页面看起来更加紧凑，如图4-1所示的页面就是使用表格将大量的网页元素对象定位在网页特定的位置上。
图 4-1
在设计网页时，可以直接绘制表格，也可以导入表格数据，并将其转化为表格。
表格是网页中对文本和图像布局的强有力的工具。一个表格通常由行、列和单元格组成，每行由一个或多个单元格组成。表格中的横向称为行，纵向称为列，一行与一列相交所产生的区域则称为单元格。要将相关数据有序地组织在一起，必须先插入表格，然后才能有效组织数据。
4.1.1 设置页面属性
绘制表格的具体操作步骤如下。
（1）启动Adobe Dreamweaver CS6，新建一个空白文档。选择“修改/页面属性”菜单命令，弹出“页面属性”面板，在左侧“分类”选项列表框中选择“外观”选项，将“大小”选项设为13，“左边距”“右边距”“上边距”“下边距”选项均设为0，如图4-2所示。
图 4-2
（2）在左侧“分类”选项列表框中，选择“跟踪图像”选项，单击“跟踪图像”选项文本框右侧的“浏览”按钮，弹出“选择图像源文件”对话框，选择DW04/images/index.jpg，如图4-3所示，单击“确定”按钮，将“透明度”选项设为70%，如图4-4所示，单击“确定”按钮，效果如图4-5所示。
图 4-3
图 4-4
图 4-5
（3）在“插入/常用”面板中单击“表格”按钮，在弹出的“表格”对话框中进行设置，如图4-6所示，单击“确定”按钮，效果如图4-7所示。
图 4-6
图 4-7
“表格”对话框中各选项的含义如下。
行数：确定表格行的数目。
列数：确定表格列的数目。
表格宽度：以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度。
边框粗细：指定表格边框的宽度（以像素为单位）。
单元格边距：确定单元格框与单元格内容之间的像素值。
单元格间距：确定相邻的表格单元格之间的像素。
如果没有明确指定边框粗细、单元格间距和单元格边距的值，则大多数浏览器将默认边框粗细和单元格边距的值为1，若要确保浏览器显示的表格没有边距或间距，则将“单元格间距”和“单元格边距”都设置为0。
无：对表格不启用列或行标题。
左：将表格的第一列作为标题列，以便在表格中的每一行输入一个标题。
顶部：将表格的第一行作为标题行，以便在表格中的每一列输入一个标题。
两者：在表格中输入列标题和行标题。
标题：显示在表格外的表格标题，它可以方便使用屏幕阅读器的Web站点访问者，屏幕阅读器读取表格标题，并且帮助Web站点访问者跟踪表格信息。
摘要：表格的说明。屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。
4.1.2 设置表格属性
在绘制表格或者导入表格数据后，根据需要可能要对表格属性项进行修改设置，才能达到设计的要求。下面介绍表格属性的设置方法。
1．选择整个表格
（1）将鼠标指针移动到表格的上方，当鼠标指针的形状变为表格形状时，单击鼠标左键即可选中整个表格，如图4-8所示。
图 4-8
（2）将鼠标指针移动到表格的格线处，当鼠标指针的形状变为上下方向的箭头时，单击鼠标左键即可选中整个表格，如图4-9所示。
图 4-9
（3）将光标置于表格中，单击窗口左下角的table标记即可选中整个表格。
（4）将光标置于表格中，在菜单栏中选择“修改”→“表格”→“选择表格”菜单命令，即可选中整个表格。
（5）将光标置于表格之外，按住“Shift”键，然后在表格中的任意处单击鼠标左键即可选择整个表格。
选中表格后，表格的外框变成粗黑色，并在右方、下方和右下方各会显示一个黑色控制点，“属性”面板也会变为表格“属性”面板，在其中可以设置表格的属性。
2．选择单元格
选择单元格既可以选择单个单元格，也可以选择一整行或者一整列，还可以选择不连续的多个单元格。
选择单个单元格，直接单击要选择的单元格即可。选择行（或列），可按如下几种操作方法进行。
（1）将鼠标指针置于所要选择的行的左方（或列的上方），待鼠标指针形状变为向右（或向下）的箭头时，单击鼠标左键，则可以选中该行（或该列）；将鼠标指针置于所要选择的行的左方（或列的上方），待鼠标指针形状变为向右（或向下）的箭头时，拖拽鼠标可以选中连续的多行（或多列）。
（2）将鼠标置于待选择的单元格中，然后按住鼠标左键不放并拖动鼠标，横向拖动可以选择一行，纵向拖动可以选择一列，如果向对角线方向拖动，行和列可以同时选择。
（3）通过与“Ctrl”键的结合使用，可以选择多个不连续单元格。按住“Ctrl”键，然后单击需要选择的单元格，即可选中该单元格。如果想取消选择某单元格，只需在按住“Ctrl”键的同时，再次单击该单元格即可。
3．调整表格大小
插入表格以后，有时还需要对表格的大小进行调整，下面介绍设置表格大小的方法。
（1）相对大小和绝对大小。在设置表格大小时，有两种方式可以选择：一种是通过占版面的百分比来控制表格的大小；另一种是通过实际像素值来控制表格的大小。表格大小有相对和绝对之分，通过百分比方式表示的表格大小是相对大小，通过像素方式表示的表格大小是绝对大小。
如果通过百分比方式设置表格的大小，则在改变版面大小后，表格大小也跟着调整。若将表格的宽和高设置为100%，则无论版面窗口多大，表格都将充满整个窗口。
如果通过像素设置表格大小，则在改变版面尺寸后，表格大小不会跟着调整。当版面变大时，表格相对于版面来说似乎变小了，但表格的实际大小不变。
（2）改变表格大小。改变表格大小，可以通过拖拽鼠标的方式实现，也可以通过属性面板实现。
选中表格后，其右方、下方和右下方各会显示一个黑色控制点，按住鼠标左键不放，拖动右方和下方的黑色控制点，可以改变表格的宽和高；拖动右下方的控制点，可以同时改变表格的宽和高。如图4-10所示是通过拖动右下方的控制点，同时改变表格的宽和高。
图 4-10
在表格属性面板上的宽和高文本框中直接输入相关数值，即可重新设置表格大小。
（3）相对大小、绝对大小之间的转换。对于设置好的表格，在不改变大小的前提下，在百分比和像素两种方式之间可以互相转换。其方法如下。
选中要转换表示方式的表格。在属性面板上有四个方式转换按钮，可以将表格宽度或高度的表示方式由百分比方式转换为像素方式，或者由像素方式转换为百分比方式。
将表格宽度表示方式转化为像素表示方式；
将表格宽度表示方式转换为百分比表示方式。
（4）清除行高和列宽。表格属性面板上的“清除行高”和“清除列宽”两项用于清除行高和列宽。单击
或
按钮，也可以将表格中行或列多余的部分删除，清除行高和列宽前后的效果如图4-11和图4-12所示。
图 4-11
图 4-12
（5）设置填充和间距。选中表格后，表格“属性”面板上的“填充”用于设置插入单元格中的对象到单元格边框之间的距离（即单元格边距）；“间距”用于设置单元格边框之间的距离（即单元格间距），如图4-13所示是“填充”值设置为“15”，“间距”设置为“10”后的效果。
图 4-13
4．设置表格对齐方式
与单元格对齐不同，表格对齐是将表格作为一个对象在网页中控制其位置，而单元格对齐是单元格内的元素对象相对于单元格的对齐方式。
表格有三种对齐方式，即左对齐、右对齐、居中对齐，默认情况下是左对齐。表格对齐的方法是：选中表格后，在表格属性面板的“对齐”下拉框中，选择其中一种对齐方式。
提示
一般情况下建议选择居中对齐，这是因为在不同的显示器分辨率下，看到左对齐和右对齐的效果是不同的。
在“属性”面板“对齐”选项下拉列表中选择“居中对齐”。将光标放到表格的边线上，出现双向箭头图标，按住鼠标左键不放将其向左拖拽，松开鼠标左键，效果如图4-14所示。
图 4-14
将光标置入到第1列单元格中，在“插入/常用”面板中单击“表格”按钮，在弹出的“表格”对话框中进行设置，如图4-15所示，单击“确定”按钮，效果如图4-16所示。
图 4-15
图 4-16
5．设置表格边框
表格中的一些效果是通过设置表格边框的属性来实现的，我们可以设置表格边框的粗细和颜色。
（1）边框的粗细。如果没有明确指定边框的值，则大多数浏览器默认边框值为1。通过改变“属性”面板上该文本框中的数值，可以调整表格边框的粗细。如图4-17所示是表格的边框设置为“0”“1”和“10”的效果。
图 4-17
在很多情况下，表格的边框值设置为“0”，相当于布局网页的辅助工具只有在编辑时可以看到，在编辑区查看单元格和表格边框，在菜单栏中依次单击“查看”“可视化助理”“表格边框”选项即可。
提示
在文档工具栏中依次单击
（可视化助理按钮）和“表格边框”也可以查看单元格和表格边框的虚线框。
（2）边框的颜色。表格的边框颜色默认情况下是灰色的，通过“CSS样式”面板或HTML代码，可以为表格的边框选择其他的颜色。为表格边框设置颜色的操作方法如下。
① 选中要改变边框颜色的表格。
② 切换到“代码”视图或“拆分”视图，在对应的表格代码的“<table”后按空格键，然后输入“bordercolor=”，将弹出一个颜色选择面板，如图4-18和图4-19所示。
图 4-18
图 4-19
（3）在弹出的调色板中选择一种颜色。
4.1.3 插入图像
（1）将光标置入到第1行单元格中，在“插入/常用”面板中单击“图像”按钮，在弹出的“图像”对话框中，选择Dw04/4.1.3 images/ing_01.jpg，如图4-20所示，单击“确定”按钮，效果如图4-21所示。
图 4-20
图 4-21
（2）将光标置入到第2行单元格中，在“插入/常用”面板中单击“表格”按钮，在弹出的“表格”对话框中进行设置，如图4-22所示，单击“确定”按钮，效果如图4-23所示。
图 4-22
图 4-23
（3）将光标置入到第1列单元格中，在“属性”面板“宽”选项文本框中输入“87”，如图4-24所示。
图 4-24
（4）在“插入/常用”面板中单击“图像”按钮，在弹出的“表格”对话框中进行设置，单击“确定”按钮，效果如图4-25所示。
图 4-25
（5）用相同的方法分别将图片“ing_07.jpg”“ing_08.jpg”“ing_09.jpg”插入到其他单元格中，效果如图4-26所示。
图 4-26
4.1.4 插入表格并设置背景图像
（1）将光标置入到右侧单元格中，在“插入/常用”面板中单击“表格”按钮，在弹出的“表格”对话框中进行设置，如图4-27所示，单击“确定”按钮，效果如图4-28所示。
图 4-27
图 4-28
（2）将光标置入到第1行第1列单元格中，在“属性”面板中单击“背景”选项右侧的“浏览文件”按钮，弹出“选择图像源文件”对话框，在目录中选择Dw/4.1.3 images/ing_02.jpg，单击“确定”按钮，为单元格添加背景图像，效果如图4-29所示。
图 4-29
（3）在“属性”面板“宽”选项和“高”选项文本框中，分别输入“473”“61”，如图4-30所示。
图 4-30
（4）将光标置入到第2行第1列单元格中，在“插入/常用”面板中单击“图像”按钮，在弹出的“选择图像源文件”对话框中，选择Dw04/4.1.3 images/ing_04.jpg，单击“确定”按钮，效果如图4-31所示。
图 4-31
（5）将光标置入到第3行第1列单元格中，将“属性”面板中的“高”选项设置为312，“背景颜色”选项设为白色，如图4-32所示。
图 4-32
（6）将光标置入到第4行第1列单元格中，在“属性”面板的“高”选项文本框中输入“41”，“背景颜色”选项设为灰色（#cccccc）。
（7）将表格的第2列单元格全部选中，在“属性”面板中单击“合并单元格”按钮，将光标置入到单元格中，在“属性”面板“宽”选项文本框中输入“19”。
（8）在“插入/常用”面板中单击“图像”按钮，在“选择图像源文件”对话框中选择Dw/4.1.3 images/ing_03.jpg，单击“确定”按钮。
（9）将光标置入到第1行第1列单元格中，在“插入/常用”面板中单击“表格”按钮，在弹出的“表格”对话框中进行设置，单击“确定”按钮，效果如图4-33所示。
图 4-33
（10）选中单元格，在“属性”面板中选择“水平”选项下拉列表中的“居中对齐”，再选择“垂直”选项下拉列表中的“居中”，分别在单元格中输入白色文字，效果如图4-34所示。
图 4-34
4.1.5 网页中的数据表格
有时需要将Word文档中的内容或Excel文档中的表格数据导入到网页中进行发布，或将网页中的表格数据导出到Word文档或Excel文档中进行编辑，Dreamweaver CS6提供了实现这种操作的功能。
1．导入表格数据
（1）选择“文件/打开”菜单命令，在弹出的菜单中选择“Dw04/4.1.5images/index.html”文件，如图4-35所示。
图 4-35
（2）将光标放置在要导入表格数据的位置，如图4-36所示，选择“插入记录/表格对象/导入表格式数据”菜单命令，弹出对话框，在对话框中单击“数据文件”选项右侧的“浏览”按钮，弹出“打开”对话框，选择Dw04/4.1.5 images/jianjie.txt，如图4-37所示。
图 4-36
图 4-37
（3）单击“打开”按钮，返回到对话框中，在“定界符”选项的下拉列表中选择“逗点”，如图4-38所示，单击“确定”按钮，导入表格式数据，如图4-39所示。
图 4-38
图 4-39
（4）保持表格的选取状态，在“属性”面板中，将“宽”选项设为“460”，“背景颜色”选项设为浅粉色（#F3F3F3），“填充”“间距”和“边框”选项均设为“0”，效果如图4-40所示。
图 4-40
（5）将光标置入到第1行第1列中，按住“SHIFT”键的同时，单击表格的第6行第4列，将表格的单元格全部选中，在“属性”面板中将“水平”选项设为“居中对齐”，“垂直”选项设为“居中”，“高”选项设为“25”，如图4-41所示，表格效果如图4-42所示。
图 4-41
图 4-42
（6）将导入表格的第2行单元格全部选中，在“属性”面板中，将“背景颜色”选项设为浅黄色（#F4DAAAA），用相同的方法，将其他单元格设置相同的背景颜色，效果如图4-43所示。
图 4-43
（7）保存文档，按“F12”键预览效果，如图4-44所示。
图 4-44
2．排序表格
（1）返回图4-44，选中表格，选择“命令/排序表格”菜单命令，弹出“排序表格”对话框，在“排序表格”选项的下拉列表中，选择“列2”，“顺序”下拉列表中选择“按字母顺序”，在后面的下拉列表中选择“降序”，如图4-45所示，单击“确定”按钮，表格进行排序，效果如图4-46所示。
图 4-45
图 4-46
（2）保存文档，按“F12”键预览效果，如图4-47所示。
图 4-47