表格的操作(情境3-1-4)

1v表格是网页中的一种重要元素，表格除了用于组织数据以方便显示和浏览外，还常常用于网页其它元素的布局定位。本章主要介绍表格在网页制作中的应用，包括插入表格、表格的格式设置、表格的基本操作以及表格在布局中的应用等。第4章表格24.1表格的插入v在文档窗口的“设计视图”中，通常使用以下方法插入表格。v①选择菜单【插入】|【表格】，或在插入工具栏中选择“常用”类别，单击其中的“表格”按钮(图4.1)。v②在弹出的表格对话框(如图4.2所示)中，输入行数、列数等相关参数后点击“确定”按钮，就在文档中当前位置插入一个表格。v也可以将其它应用软件制作的表格数据导入成为一个表格，操作方法在4.5节介绍。34.2表格的有关参数v表格除了要设置行数、列数外，还要设置表格宽度、边框、边距、间距等参数。v(1)表格的宽度v在设置表格宽度时，可以选择两种单位——像素和百分比。选择像素，在浏览时，不管浏览器窗口如何调整，表格的宽度都保持不变；当选择百分比时，表示其相对于浏览器窗口宽度的百分比，当浏览器窗口的宽度改变时，表格宽度会随之调整。v(2)表格的边框v边框用于指定表格边框的粗细(以像素为单位)。如果希望浏览器显示的表格没有边框，可将边框粗细设置为0，这时，在浏览器中将看不到表格的边框。44.2表格的有关参数v(3)单元格的边距v“单元格边距”又称为“填充”，用来设置单元格内对象距单元格边缘的距离。v(4)单元格的间距v“单元格间距”用来设置相邻单元格之间的距离。v表格边框、单元格边距、单元格间距的表现形式如图4.3所示。表格插入以后，如果对表格的行列数或其它参数不满意，可以对表格的行和列进行添加和删除、对单元格进行合并和拆分、对表格的边框、单元格的边距和间距进行设置。54.3表格的基本操作v4.3.1选取表格元素v在对表格进行编辑前，首先要选取表格元素，要选择表格，可以采取以下几种方法之一。v①将插入点定位在表格中，然后单击状态栏中标签选择区中的table标签，如图4.4所示。v②将鼠标指针移到表格的上边框或下边框，当鼠标指针变成如图4.5所示的形状时，单击鼠标即可选中表格。64.3表格的基本操作v③在表格的任意位置右键单击，然后在弹出的菜单中选择【表格】|【选择表格】命令选中表格。v④将插入点定位在表格中，选择菜单【修改】|【表格】|【选择表格】命令选中表格。v选中表格后，表格四周会出现黑线，并且显示表格的控制柄。当鼠标移到控制柄上时，鼠标指针会变成双向箭头，此时按下鼠标左键拖动，可以调整表格的大小。v如果要选择表格中的单元格，可以采用以下几种方法之一。74.3表格的基本操作v①将鼠标指针置于单元格中，沿任意方向拖动，可以选中一个或多个连续的单元格，如图4.6所示。v②将鼠标指针置于单元格中，按下Ctrl键的同时单击多个单元格，可以选中一组不连续的单元格，如图4.7所示。v③将鼠标指针置于单元格中，按下Shift键，再将鼠标指针移到其它单元格单击，可以选择矩形区域的所有单元格。v④要选中整行或整列的单元格，将鼠标指针移到行的左端或者列的上端，当鼠标指针变为黑色箭头(或)时，单击鼠标，即可选中整行或整列中的单元格。84.3表格的基本操作v4.3.2修改表格v表格创建以后，可以对表格添加或删除行或列，对表格中的单元格进行合并或拆分。v要删除表格的行(列)，可以采取下列方法之一。v①选中要删除的表格行(列)，直接按下Del键。v②在要删除的表格行(列)的任意一个单元格上单击鼠标右键，在弹出的菜单中选择【表格】|【删除行】(【删除列】)，则会删除该行(列)，如图4.8所示。v要增加表格的行(列)，首先将鼠标置于要增加新行(列)的位置，然后采取下列方法之一。94.3表格的基本操作v①右键单击，在弹出的菜单中选择【表格】|【插入行】(【插入列】)命令，就会在鼠标指针所在单元格的上(左)面插入行(列)。如果选择【表格】|【插入行或列】命令，会弹出对话框(如图4.9)，可以在其中设置插入的是行还是列，插入多少行/列，是插入到当前单元格之上(前)还是之下(后)。设置完毕后单击“确定”即可为表格插入行或者列。v②选择主菜单【插入】|【表格对象】，在【表格对象】的子菜单中有四个命令，分别是【在上面插入行】、【在下面插入行】、【在左边插入列】和【在右边插入列】，如图4.10所示。执行相应的命令，就可以为表格插入行(列)。104.3表格的基本操作v修改表格行列数还可以在选中整个表格后，在文档窗口下方的“表格属性”面板中，修改行数和列数。如图4.11所示。v在Dreamweaver中，可以根据需要将一个单元格拆分成几个单元格，也可以将几个单元格合并成为一个单元格。v要拆分单元格执行以下操作：将插入点置于要拆分的单元格，执行主菜单【修改】|【表格】|【拆分单元格】，或在要拆分的单元格中右键单击，在弹出的快捷菜单中选择【表格】|【拆分单元格】，弹出如图4.12所示的对话框，114.3表格的基本操作v在对话框中选择是拆分为行还是列，在行数(列数)后设置要拆分的行数(列数)，设置完成后点击“确定”，原有的一个单元格就被分成了多个单元格，如图4.13所示。v以将鼠标指针置于要拆分的单元格内，然后在文档窗口下方的“单元格属性”面板中，点击“拆分单元格为行或列”按钮(如图4.14)，也会弹出如图4.12所示的对话框。v要合并单元格，首先要选定进行合并的一组单元格(该组单元格必须连续且组成矩形区域，否则无法合并)，124.3表格的基本操作v然后执行主菜单【修改】|【表格】|【合并单元格】，或者右键单击，在弹出的菜单中选择【表格】|【合并单元格】完成合并。v属性面板中的“合并单元格”按钮(图4.15)也具有合并单元格的功能。v4.3.3制作一个单线表格v在实际应用当中，表格的边框在浏览器中线条太粗，不美观。即使把表格边框宽度设置为1，单元格间距设置为0，效果仍然不理想(如图4.16所示)。在很多情况下(如用表格制作的导航栏)，需要制作更为美观的单线表格。134.3表格的基本操作v制作单线表格的步骤如下：v①创建一个表格。设置表格的行、列数(如3行3列)，边框为0，间距为1。根据需要调整表格的大小。v②选择表格，为表格添加一种背景颜色(即边线颜色)。v③选中所有单元格，为单元格添加与页面背景相同的颜色(通常为白色)。v④保存文件，按下F12键，在浏览器中显示效果如图4.17所示。v由以上步骤可以看出，单线表格实际上设置了表格间距的颜色，然后把间距值设置为昀小。表格边线实质上是表格间距。144.3表格的基本操作v4.3.4表格的嵌套v表格的单元格中再插入表格即构成表格的嵌套。表格的嵌套广泛应用于网页的排版当中。通常在网页排版时，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等冲突，给表格的制作带来困难。其次，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到页面内容。引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其154.3表格的基本操作职，互不冲突。另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到不同于总表格的效果。v插入总表格后，将插入点置于要插入嵌套表格的单元格内，按照4.1节所述方法插入表格，即完成嵌套表格的创建。嵌套表格的效果如图4.18所示。164.4表格数据的导入和导出v4.4.1表格数据的导入v在Dreamweaver中，可以将其它应用软件制作完成后的表格数据导入到网页文档中。能够导入的数据有EXCEL表格数据和其它应用软件制作的文本格式表格数据两种。v导入EXCEL表格数据，可选择主菜单【文件】|【导入】|【EXCEL文档】命令，浏览一个外部EXCEL文档，并将其导入到当前页面中。也可以在打开的EXCEL文档中将要导入的内容复制后，粘贴到当前页面中。174.4表格数据的导入和导出v导入文本格式的表格数据要求文件中要以制表符、逗号、分号、引号或者其它定界符分隔数据项。导入时，选择主菜单【文件】|【导入】|【表格式数据】命令，弹出“导入表格式数据”对话框(如图4.19)。对话框中各项含义如下：v【数据文件】文本框用于输入需要导入的数据文件的保存路径和文件名，单击其后的“浏览”按钮可以在打开的对话框中选择要导入的文件。v【定界符】用于选择欲导入的文件以什么符号来分隔表格数据，也可以在后面的文本框输入指定的定界符。184.4表格数据的导入和导出v“表格宽度”、“单元格边距”、“单元格间距”和“边框”等用于设置所生成的表格的有关参数。v【格式化首行】项设置首行标题的格式。v例如，将下面以“Tab制表符”分隔的一个文本文件导入为网页中的表格后效果如图4.20所示。第一季度销售额第二季度销售额第三季度销售额第四季度销售额华北：40.6万华北：52.6万华北：54.4万华北：70.5万华南：53.2万华南：50.8万华南：72.1万华南：62.9万194.4表格数据的导入和导出v4.4.2表格数据的导出v如果要将网页中的表格数据导出为文本文件，首先将插入点置于该表格的任意单元格内，执行主菜单【文件】|【导出】|【表格】命令，弹出“导出表格”对话框(如图4.21所示)，设置文本文件中要使用的定界符和换行符，点击“导出”按钮，在随后出现的“表格导出为”对话框中确定目标位置和文件名后，点击“保存”按钮即可得到数据文本文件。204.5修饰表格v表格插入后，可以通过属性面板修改其相关属性，还可以通过【命令】菜单中的【排序表格】和【格式化表格】命令对表格进行处理。v4.5.1在属性面板中修饰表格v选中一个表格后，即可在表格的属性面板中对其属性进行修改设置。表格的属性面板如图4.22所示。v在该面板中，除了前面已经介绍的“行数”、“列数”、“宽度”、“填充”、“间距”、“边框”外，还有以下设置项：v【表格Id】：可以在此处为表格起一个名字，用于脚本程序调用。214.5修饰表格v【高】：可以以像素或比例为单位设置表格的高度。v【对齐】：用于确定表格相对于页面的显示位置，包括左对齐、右对齐和居中对齐。当对齐方式为默认时，表格的旁边不能显示其它内容。v【类】：可以将CSS规则应用于表格对象。v【背景色】：设置表格的背景颜色。v【边框颜色】：设置表格的边框颜色。v【背景图像】：为表格添加背景图像。v在表格属性面板中，还有“清除已设置的列宽”按钮、224.5修饰表格v“将表格宽度转化为像素”按钮、“将表格宽度转化为百分比”按钮、“清除已设置的行高”按钮、“将表格高度转化为像素”按钮、“将表格高度转化为百分比”按钮。v如果选择表格中的单元格，在属性面板中则可以设置选中的单元格的属性(图4.23)，既可以选中单独的单元格，也可以同时选中多个单元格。可以进行单元格的宽度、高度、背景图像、背景颜色、边框颜色、拆分、合并等设置，其中“不换行”指的是使单元格中的所有文本都在一行上，若要将所选的单元格设置为标234.5修饰表格题格式，可以选中“标题”复选框，默认情况下，表格标题内容显示为粗体居中。另外，“水平”和“垂直”可以。对单元格内的文本对齐方式进行设置。v4.5.2排序表格v如果要使表格中的数据按一定的规律排列，可以使用【排序表格】命令对表格中数据进行排序。例如，有如图4.24所示的表格数据需要排序，首先将插入点定位到表格内，选择主菜单【命令】|【排序表格】命令，弹出“排序表格”对话框，如图4.25所示，在对话框中进行相应设置，单击“确定”按钮完成排序。244.5修饰表格v该对话框中各项参数的含义如下：v【排序按】列表框：用于确定依据哪一列的值对表格行进行排序。v【顺序】：确定是按字母顺序还是按数字顺序(数值大小)以及是以升序还是降序进行排序。v【再按】：确定所选择的“顺序”列内容相同的行再按什么方式排序。v【排序包含第一行】：该选项指定表格的第一行是否参加排序。如果第一行是不应移动的标题，则不选择