第四章 表 格.ppt

1、除了组织数据以方便显示和导航外，第4章表、第1、4章表、第4章表、第2、表是网页中常用于对其他元素进行布局定位的重要元素。本章主要介绍表格在网页制作中的应用，包括插入表格、表格的格式设置、表格的基本操作以及表格在版面中的应用；插入第4章表格单元格、3，4.1表格；在“文档”窗口的设计视图中，通常使用以下方法插入表格：选择菜单“插入”“表格”，或选择“插入”工具栏上的“常规”类别，然后单击表格按钮(图4.1)。在弹出表格对话框中输入行数、列数等相关参数后，单击确定按钮将在文档的当前位置插入表格，如图4.2所示。您还可以将在其他应用程序中创建的表单数据导入到表中，如4.5节所述。4章表格单元格、4

2、，4.2表格中的参数、行和列数之外，还设置表格宽度、边界、边距和间距等参数。(1)设置表格宽度表格的宽度时，可以选择两个单位像素和百分比。选择像素后，无论浏览器窗口如何曹征，导航时都将保留表格的宽度。选择百分比表示相对于浏览器窗口宽度的百分比，当浏览器窗口宽度更改时，表格宽度会调整。(2)表的外框用于指定表边框的粗细(以像素为单位)。对于第4章表格5，4.2表的参数，如果浏览器要显示不带边框的表格，请将边框粗细设置为0。浏览器不会显示表格的边框。(3)单元格边距，也称为“边距”，用于设置单元格边缘到单元格内对象的距离。(4)“单元间距”“单元间距”设置相邻单元之间的距离。表格边框、单元格边距和

3、单元格间距如图4.3所示。第4章表格单元、6，4.3表格的基本操作、插入表格后表格中的行或其他参数不满意时，可以添加和删除表格中的行和列、合并和分割单元，以及设置表格的边界、单元的边距和间距。编辑4.3.1表格元素选取表格之前，若要先选取表格元素并选取表格，您可以使用以下方法之一：将插入点放置在表格中(如图4.4所示)，然后单击状态栏上标签选择区域的标签。将鼠标指针移动到表格的上边框或下边框，当鼠标指针指向4章表格单元格、7，4.3表格的默认操作、大头针图标变成图4.5所示的形状，您就可以通过单击选择表格了。在表格中的任意位置单击鼠标右键，然后从弹出菜单中选择选择表格命令以选择表格。将插入点放

4、置在表格中，然后选择菜单“修改|选择表格”命令以选择表格。选取表格后，表格周围会出现黑线，并显示表格的操作框。将鼠标移动到手柄上时，鼠标指针变为双向箭头，此时，您可以通过按住鼠标左键拖动来调整表的大小。要选择表中的单元格，可以使用以下方法之一：第4章表格单元格、8，4.3表格的默认行为、将鼠标指针放在单元格上并沿任意方向拖动可选择一个或多个连续的单元格，如图4.6所示。您可以选择一组不连续的单元格，方法是将鼠标指针放在单元格中，然后按住Ctrl键并单击多个单元格，如图4.7所示。您可以将滑鼠指标放置在储存格上，按住Shift键，然后将滑鼠指标移动到另一个储存格，以选取矩形区域中的所有储存格。要

5、选择整行或整列中的单元格，请将鼠标指针移动到行的左端或列的顶部，当鼠标指针变为黑色箭头(或)时，在执行第4章表、9，4.3表的默认操作时，单击鼠标以选择整行或整列中的单元格。4.3.2修改表格表格建立后，您可以在表格中加入或移除列或栏，以及合并或分割表格中的储存格。要删除表中的行(列)，请执行以下操作之一：选择要删除的表行(列)，然后直接按Del键。右键单击要删除的表行(列)中的一个单元格，然后从弹出菜单中选择“表|删除行”(“删除列”)，将删除行(列)，如图4.8所示。要增加表格中的行(列)，请先将鼠标放在要添加新行(列)的位置，然后执行以下方法之一：第4章表格、10，4.3表格的默认行为，

6、右键单击并从弹出菜单中选择“表格”|“插入行”(“插入列”)命令，会在鼠标指针所在单元格的上(左)侧插入行(列)。选择插入表格|行或列命令时，将弹出对话框，如图4.9所示。使用此对话框可以设置要插入的行数或列数、要插入的行数/列数、当前单元格的上方(之前)或下方(之后)。完成设置后，单击“确定”插入表中的行或列。选择主菜单“插入”“表格对象”。如图4.10所示，表格对象的子菜单包含四个命令：“在上方插入行”、“在下方插入行”、“在左侧插入列”和“在右侧插入列”。该命令将在第4章表格、11，4.3表格的默认行为和表格中插入行(列)。修改表格行数选定整个表格后，还可以在文档窗口下的“表格属性”面板

7、中修改行数和列数。如图4.11所示。在Dreamweaver中，可以根据需要将一个单元格拆分为多个单元格，或将多个单元格合并为一个单元格。要拆分单元格，请将插入点放置在要拆分的单元格中，然后执行主菜单“修改|拆分表格”，或者在要拆分的单元格中单击鼠标右键，从弹出快捷菜单中选择“拆分表格”，然后在图4章表格单元格、12，4.3表格中的默认操作、4.12中显示的对话框、对话框中选择是否使用行或列进行拆分，设置行(列数)后要拆分的行(列数将鼠标指针放在要拆分的单元格上，然后单击文档窗口下“单元格属性”面板中的“按行或列拆分单元格”按钮(如图4.14所示)，将出现图4.12所示的对话框。要合并单元格，

8、请先选择要合并的一组单元格。单元组必须连续，除非形成矩形区域，否则不能合并。执行第4章、表、13，4.3表的基本操作，然后执行主菜单“修改”|“表”|“合并单元格”，或右键单击并从弹出菜单中选择“表”|“合并单元格”，以完成合并。属性面板中的合并单元格按钮(图4.15)也具有合并单元格的功能。4.3.3创建单线表格实际应用时，表格的边框在浏览器中太粗，看起来不好。将表格边框宽度设置为1，单元格间距设置为0，效果也不好，如图4.16所示。在很多情况下(如表格创建的导航栏)，需要创建更漂亮的单线表格。第4章表格、14，4.3表格的基本操作和单行表格的创建步骤如下：建立表格。设置表中边框为0、间距为

9、1的行和列的数量(例如，3行3列)。根据需要调整表的大小。选取表格以将背景颜色(边界颜色)加入至表格。选择所有单元格，将与页面背景相同的颜色(通常为白色)添加到单元格。保存文件，然后按F12键在浏览器中查看效果，如图4.17所示。以上步骤表明单线表格实际上设定了表格间距的颜色，然后将间距值设定为最小值。表格边界本质上是表格间距。将表格重新插入到第4章表格单元格、15，4.3表格的基本操作以及4.3.4表格的嵌套表格的单元格中，将构成表格的嵌套。表格的嵌套广泛用于网页的排版。一般而言，网页布局时外部需要控制整体布局的表格，如果内部排版的细节也通过整个表格实现，则很容易发生行高列宽等冲突，表格创建

10、困难。第二，浏览器在解释网页时下载整个网页的结构，然后显示表格。如果不使用嵌套，表格将非常复杂，浏览器必须等待很长时间才能查看页面内容。引入嵌套表，整个表负责整个排版，嵌套表负责每个子列的排版，每个部分的第4章表，16，4.3表的基本操作，没有相互冲突。此外，使用表格的背景图像、边框、单元格间距和单元格边距等属性嵌套表格，可以获得与整个表格不同的效果。插入总计表格后，请将插入点放在要插入嵌套表格的单元格中，然后按照4.1部分中的说明插入表格。也就是说，完成嵌套表格的创建。嵌套表的效果如图4.18所示。导入和导出第4章表格单元格、17，4.4表格数据、导入4.4.1表格数据您可以将Dreamwe

11、aver中已完成其它应用程序软件制作的表格数据导入到网页文档中。可以导入的数据有两种：EXCEL表数据和在其他应用程序中创建的文本格式表数据。要导入EXCEL表数据，请选择主菜单“文件”|“导入”|“EXCEL文档”命令，找到外部EXCEL文档，然后将其导入到当前页面。还可以从打开的EXCEL文档中复制要导入的内容，然后将其粘贴到当前页面。要导入和导出第4章表格单元格、18，4.4表格数据，以及导入文本格式表格数据，必须使用制表符、逗号、分号、引号或其他分隔符分隔文件中的数据项。导入时，选择主菜单“文件”|“导入”|“表格式数据”命令(图4.19)，以弹出“导入表格式数据”对话框。对话框的含义

12、如下：“数据文件”文本框用于输入要导入的数据文件的存储路径和文件名，您可以在单击“浏览”按钮后打开的对话框中选择要导入的文件。您可以选择用哪些符号分隔要从中导入边界符号表数据的文件，也可以在随后的文本框中输入指定的边界符号。第4章表格单元格、19，4.4表格数据导入和导出、表格宽度、单元格边距、单元格间距和边界来设置生成的表格的参数。第一行格式设置项目用于设置第一行标题的格式。例如，如果将下面以“制表符”分隔的文本文件导入到网页上的表格中，效果将类似于图4.20。第一季度销售额第二季度销售额第三季度销售额第四季度销售额华北：40.6万华北：52.6万华北：54.4万华北：70.5万华南：53.

13、2万华南：50.8万华南：72.1万华南：62.9万，4章票格，20，4 如果要将4.4.2表数据导出网页中的表数据导出到文本文件，则可以通过以下方法获取数据文本文件：首先将插入点放在表中的任意单元格中，运行主菜单“文件”|“导出”|“表”命令，打开“导出表”对话框(如图4.21所示)， 插入、第4章表格、21，4.5修饰表格和表格后，您可以通过属性面板修改相关属性，并通过命令菜单上的表格排序和格式化命令处理表格。在4.5.1属性面板中选择表格修饰表格后，可以在表格的属性面板中修改其属性。表的属性面板如图4.22所示。除了前面所述的行、列数、宽度、填充、间距和边框外，此面板还包含以下设置项：表

14、Id:您可以在此指定要用于脚本调用的表的名称。第4章表格、22，4.5修订表格、“高”:您可以按像素或百分比设置表格的高度。对齐：用于确定表格相对于页面的显示位置，如左对齐、右对齐和居中对齐。如果排序是默认值，则表格旁边不显示其他内容。类：使您可以将CSS规则应用于表对象。背景颜色：设定表格的背景颜色。边框颜色:设置表的边框颜色。背景图像：向表中添加背景图像。表格属性面板包含“清除设置的列宽”按钮、“第4章表格单元格”、“23，4.5修饰表格”、“将表格宽度转换为像素”按钮、“将表格宽度转换为百分比”按钮、“清除设置的行高”按钮、“将表格高度转换为像素”按钮和“表格”选取表格中的储存格时，您可

15、以在属性面板中设定所选储存格的属性(图4.23)。您可以选取个别储存格，或同时选取多个储存格。蜡褫眕扢离等啋迹腔遵仅询仅掖劓芞砉掖劓晇伎晚遗晇伎莞煦睿磁甜胀。此处不换行是指单元格中的所有文本都位于一行中，如果要设置标签、第4章表格单元格、24，4.5修饰表格、标题格式等，请选中“标题”复选框。默认情况下，表格标题内容以粗体居中显示。也可以水平和垂直。设定储存格中文字的对齐方式。4.5.2要按特定规则对表中的数据排序，可以使用表排序命令对表中的数据排序。例如，如果您有需要排序的表数据(如图4.24所示)，请先将插入点放在表内，选择主菜单“命令”|“排序表”命令，弹出“排序表”对话框，在对话框中指

16、定相应的设置，然后单击确定按钮完成排序(如图4.25所示)，4张表，25，4.5修饰表。在此对话框中，每个参数的含义如下：“排序依据”列表框：用于确定对表行进行排序所依据的列的值。顺序：决定是按字母顺序还是数字顺序(数字大小)，以及是按升序还是降序排序。重新排序：确定选定“顺序”列内容相同的行的排序方式。排序包含第一行):此选项指定表中的第一行是否参与排序。如果第一行是移动时渡边杏的标题，则不选择此选项。第4章表格、26，4.5修订表格、表头列对齐和页尾列对齐：指定表格分割为thead、tbody和tfoot三部分时thead和tfoot的对齐方式。通常不选择。排序完成后所有行颜色裴珉姬：指定排序后表格行属性(如颜色)与相同内容保持关联。如果表格列使用两种替代颜色，请勿选取此选项，以使排序的表格仍具有颜色替代列。如果行属性特定于每行的内容，请选择此选项以确保这些属性在排序后与表中的相应行保持关联，如果选择按图4.24中表的“分数”降序排序，则第一行不是，第四章表、27，4.5修订表、参与排序、排序结果如图4.26所示。4.5.3表格格式Dreamweaver使您可以使用系统特定的表格模板来设置表格格式，从而省去很多繁琐的表格设置步骤，提高了工作效率。如果将插入点放在表中，运行主菜单“命令|设置表格式”命令，然后弹