第7章 表格.ppt

1、第7章 表格,表格（Table）在网页制作中是一个非常重要的概念，是由不同的行、列、单元格组成的一种能够有效描述信息的组织方式。表格在网页中使用非常普遍，使用表格进行布局，规划网页中的各种元素，会得到非常好的效果。通过本章的学习，对表格有一个基本的认识，掌握用表格布局的方法。 当选定了表格或表格中有插入点时，Dreamweaver 会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些菜单可以快速访问与表格相关的常用命令。 如果您未看到表格的宽度或列的宽度，则说明没有在 HTML 代码中指定该表格或列的宽度。如果出现两个数，则说明“设计”视图中显示的可视宽度与 H

2、TML 代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小，或者添加到单元格中的内容比该单元格的设置宽度大时，会出现这种情况。,HTML 中的表格格式设置优先顺序,当在“设计”视图中对表格进行格式设置时，您可以设置整个表格或表格中所选行、列或单元格的属性。如果将整个表格的某个属性（例如背景颜色或对齐）设置为一个值，而将单个单元格的属性设置为另一个值，则单元格格式设置优先于行格式设置，行格式设置又优先于表格格式设置。 表格格式设置的优先顺序如下： 单元格 行数 表格 例如，如果将单个单元格的背景颜色设置为蓝色，然后将整个表格的背景颜色设置为黄色，则蓝色单元格不会变为黄色，因为单元格格式设

3、置优先于表格格式设置。 注： 当设置列的属性时，Dreamweaver 更改对应于该列中每个单元格的 td 标签的属性。,7.1 表格的基本操作,本节主要介绍表格的基本组成部分以及一些基本操作，如插入表格、选择表格、添加或删除行和列、单元格的拆分与合并等。掌握这些基本用法，利用表格就可以实现对网页的布局，如清华大学的网站就是用了大量表格来进行布局的，如图10.1所示。,7.1.1 表格的组成,表格通常由标题、行、列、单元格、边框几部分组成，如图10.2所示，是一个3行3列的表格，边框粗细为2像素。其中，标题位于表格第一行，用来说明表格的主题。表格中的每一个格就是单元格；水平方向的一系列单元格组

4、合在一起就是行；垂直方向的一系列单元格组合在一起就是列；边框是分隔单元格的线框。,7.1.2 插入表格并添加内容,Dreamweaver CS4提供了多种插入表格的方法，下面来介绍如何插入表格并添加内容，以及设置表格参数。 使用“插入”面板或“插入”菜单来创建一个新表格。然后，按照在表格外添加文本和图像的方式，向表格单元格中添加文本和图像。具体操作步骤如下： 1、在 “设计”视图中，将插入点放在需要表格出现的位置。 注： 如果您的文档是空白的，则只能将插入点放置在文档的开头。 选择“插入”“表格”。 在“插入”面板的“常用”类别中，单击“表格”。 2、设置“表格”对话框的属性，然后单击“确定”

5、创建表格。 行数： 确定表格行的数目。 列数 ：确定表格列的数目。,7.1.2 插入表格并添加内容,表格宽度： 以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。 边框粗细： 指定表格边框的宽度（以像素为单位）。 单元格间距： 决定相邻的表格单元格之间的像素数。 如果没有明确指定边框粗细或单元格间距和单元格边距的值，则大多数浏览器都按边框粗细和单元格边距设置为 1、单元格间距设置为 2 来显示表格。若要确保浏览器显示表格时不显示边距或间距，请将“单元格边距”和“单元格间距”设置为 0。 单元格边距： 确定单元格边框与单元格内容之间的像素数。 标题 ：提供一个显示在表格外的表格标题。,表格

6、数据的设置,在网页制作时，有时需要输入大量的表格数据。Dreamweaver可以实现把表格数据导入到网页中或把网页中的表格数据导出。另外，使用Dreamweaver还可以对表格中的数据进行排序操作。 1、导入表格数据 2、导出表格数据 导出表格全部内容 复制、粘贴表格部分内容 3、表格数据排序,7.1.3 选择表格对象,对插入的表格进行编辑之前，首先选择表格要编辑的区域，可以选择整个表格、一行、一列、连续或不连续的多个单元格。具体操作步骤如下：,选择整个表格,请执行下列操作之一： 单击表格的左上角、表格的顶缘或底缘的任何位置或者行或列的边框。 注： 当您可以选择表格时，鼠标指针会变成表格网格图

7、标 （除非您单击行或列边框）。 单击某个表格单元格，然后在“文档”窗口左下角的标签选择器中选择 标签。 单击某个表格单元格，然后选择“修改”“表格”“选择表格”。 单击某个表格单元格，单击表格标题菜单，然后选择“选择表格”。所选表格的下缘和右缘出现选择柄。,选择单个或多个行或列,1、定位鼠标指针使其指向行的左边缘或列的上边缘。 2、当鼠标指针变为选择箭头时，单击以选择单个行或列，或进行拖动以选择多个行或列。 选择单个列 1、在该列中单击。 2、单击列标题菜单，然后选择“选择列”。 选择一行或矩形的单元格块 请执行下列操作之一： 从一个单元格拖到另一个单元格。 单击一个单元格，然后按住 Ctrl

8、单击以选中该单元格，接着按住 Shift 单击另一个单元格。这两个单元格定义的直线或矩形区域中的所有单元格都将被选中。,选择单元格,选择单个单元格 请执行下列操作之一： 单击单元格，然后在“文档”窗口左下角的标签选择器中选择 标签。 按住 Ctrl 单击该单元格。 单击单元格，然后选择“编辑”“全选”。 提示：选择了一个单元格后再次选择“编辑”“全选”可以选择整个表格。 选择不相邻的单元格 按住 Ctrl 单击要选择的单元格、行或列。 如果您按住 Ctrl 或 Command 单击的单元格、行或列尚未选中，则会添加到选择区域中。如果已将其选中，则再次单击会将其从选择中删除。,7.1.4 添加或

9、删除表格的行和列,在表格中添加行或列是表格经常用到的基本操作之一。下面以网页“电子简历”为例，来学习如果在表格中添加行和列。具体操作步骤如下：,添加或删除行和列,若要添加和删除行和列，请使用“修改”“表格”或列标题菜单。 在表格的最后一个单元格中按 Tab 会自动在表格中另外添加一行。 添加单个行或列 单击某个单元格并执行下列操作之一： 选择“修改”“表格”“插入行”或“修改”“表格”“插入列”。在插入点的上面出现一行或在插入点的左侧出现一列。 单击列标题菜单，然后选择“左侧插入列”或“右侧插入列”。 选择“插入”表格对象”插入行或列” 右键单击，选择“表格”“插入行”、“插入列”或“插入行或

10、列”,添加或删除行和列,添加多行或多列 1、单击一个单元格。 2、选择“修改”“表格”“插入行”或“插入列”，完成对话框，然后单击“确定”。 插入 ：指示是插入行还是插入列。 行数或列数 ：要插入的行数或列数。 位置：指定新行或新列应该显示在所选单元格所在行或列的前面还是后面。 删除行或列 请执行下列操作之一： 单击要删除的行或列中的一个单元格，然后选择“修改”“表格”“删除行”或“修改”“表格”“删除列”。 右键单击，选择“表格”“删除行”、“删除列”。 选择完整的一行或列，然后选择“编辑”“清除”或按 Delete。,添加或删除行和列,使用属性检查器添加或删除行或列 1、选择表格。 2、在

11、属性检查器（“窗口”“属性”）中，执行下列操作之一： 若要添加或删除行，请增加或减小“行”值。 若要添加或删除列，请增加或减小“列”值。 注： 当删除包含数据的行和列时，Dreamweaver 不发出警告。,7.1.5 单元格的拆分与合并,在应用表格时，有时需要对单元格进行拆分与合并。实际上，不规则的表格是由规则的表格拆分合并而成。拆分是指将一个单元格拆分为多个单元格。合并是指将多个连续的单元格合并成一个单元格。具体操作步骤如下：,单元格的拆分与合并,使用属性检查器或“修改”“表格”子菜单中的命令拆分或合并单元格。 合并表格中的两个或多个单元格 1、选择连续行中形状为矩形的单元格。 2、请执行

12、下列操作之一： 选择“修改”“表格”“合并单元格”。 在属性检查器（“窗口”“属性”）中，单击“合并单元格”。 右键单击，选择“表格”“合并单元格”。 注： 如果没有看到此按钮，请单击属性检查器右下角的箭头，以便可以看到所有选项。 单个单元格的内容放置在最终的合并单元格中。所选的第一个单元格的属性将应用于合并的单元格。,单元格的拆分与合并,拆分单元格 1、单击某个单元格并执行下列操作之一： 选择“修改”“表格”“拆分单元格”。 在属性检查器（“窗口”“属性”）中，单击“拆分单元格”。 2、在“拆分单元格”对话框中，指定如何拆分单元格: 拆分单元格: 指定将单元格拆分成行还是列。 行数/列数:

13、指定将单元格拆分成多少行或多少列。 增加或减少单元格所跨的行或列的数目 1、请执行下列操作之一： 选择“修改”“表格”“增加行宽”或“修改”“表格”“增加列宽”。 选择“修改”“表格”“减小行宽”或“修改”“表格”“减小列宽”。,7.1.6 复制和删除单元格,剪切或复制表格单元格 1、选择连续行中形状为矩形的一个或多个单元格。 2、选择“编辑”“剪切”或“编辑”“拷贝”。 注： 如果您选择了整个行或列然后选择“编辑”“剪切”，则将从表格中删除整个行或列（而不仅仅是单元格的内容）。 删除单元格内容，但使单元格保持原样 1、选择一个或多个单元格。 注： 确保所选部分不是完全由完整的行或列组成的。

14、2、选择“编辑”“清除”或按 Delete。 注： 如果在您选择“编辑”“清除”或按 Delete 时只选择了完整的行或列，则将从表格中删除整个行或列，而不仅仅是它们的内容。 删除包含合并单元格的行或列 1、选择行或列。 2、选择“修改”“表格”“删除行”或“修改”“表格”“删除列”。,7.1.6 复制和删除单元格,粘贴表格单元格 1、选择要粘贴单元格的位置： 若要用您正在粘贴的单元格替换现有的单元格，请选择一组与剪贴板上的单元格具有相同布局的现有单元格。 若要在特定单元格上方粘贴一整行单元格，请单击该单元格。 若要在特定单元格左侧粘贴一整列单元格，请单击该单元格。 注： 如果剪贴板中的单元格

15、不到一整行或一整列，并且您单击某个单元格然后粘贴剪贴板中的单元格，则您所单击的单元格和与它相邻的单元格可能被您粘贴的单元格替换。 若要用粘贴的单元格创建一个新表格，请将插入点放置在表格之外。 2、选择“编辑”“粘贴”。 如果您将整个行或列粘贴到现有的表格中，则这些行或列将被添加到该表格中。如果您粘贴单个单元格，则将替换所选单元格的内容。如果您在表格外进行粘贴，则这些行、列或单元格用于定义一个新表格。,7.1.7 调整表格和单元格的大小,调整表格大小 选择表格。 若要在水平方向调整表格的大小，请拖动右边的选择柄。 若要在垂直方向调整表格的大小，请拖动底部的选择柄。 若要在两个方向调整表格的大小，

16、请拖动右下角的选择柄。 更改列宽度并保持整个表的宽度不变 拖动您想更改的列的右边框。相邻列的宽度也更改了，因此实际上调整了两列的大小。 注： 如果您拖动最右侧列的右边框，整个表格的宽度将会变化，并且所有的列都会成比例地变宽或变窄。 更改某个列的宽度并保持其它列的大小不变 按住 Shift，然后拖动列的边框。,7.2 在表格中添加内容,表格建立后，可以在表格中添加内容。这一节主要来学习如何在表格中添加表格、文本、图像等网页元素。下面以网页中的“站点搜索”栏目为例。,7.2.1 在表格中插入图像,（1）在“编辑区”中，将光标移至要插入图像的单元格中，如图10.24所示。 （2）在“插入”工具栏的“

17、常用”类别中，单击“图像”按钮。在弹出的“选择图像源文件”对话框中，浏览并选中要插入的图像，单击“确定”按钮，表格中即会出现插入的图像，如图10.25所示。,7.2.2 在表格中插入表格,在表格中插入新的表格，称为表格的嵌套，用这种方式可以创建出复杂的表格，是网页布局常用的方法之一。具体操作步骤如下： （1）在“编辑区”中，将光标移到要插入表格的单元格中，如图10.26所示。 （2）在“插入”工具栏的“常用”类别中，单击“表格”按钮。与插入新表格操作相同。在弹出的“表格”对话框中，“行数”文本框中输入表格的行数“2”；“列数”文本框中输入表格的列数“2”；“表格宽度”选择“90%”，单位是“像

18、素”；“边框粗细”为“0”像素，单击“确定”按钮。此时，在单元格中插入了一个2行2列的表格，如图10.27所示。,7.2.3 在表格中添加文本,将光标移至新插入表格的单元格中，通过键盘直接在单元格中输入文字，或通过其他文档采用“复制-粘贴”的方法将文字输入到单元格中，如图10.28所示。,7.3 表格属性,利用属性检查器对表格属性进行设置，可以美化表格，实现网页布局所需要的效果。属性设置包括两部分，一是整个表格的属性设置，如表格的大小、边框、对齐方式、背景等；二是单元格的属性设置，如单元格的大小、对齐方式、边框、背景等。,7.3.1 设置表格属性,本小节主要介绍设置表格外观、背景图像、表格宽度转换等内容。 1设置表格外观 2设置背景图像 3表格宽度转换,7.3.1 设置表格属性,填充： 单元格内容与单元格边框之间的像素数。 间距： 相邻的表格单元格之间的像素数。 对齐 ：确定表格相对于同一段落中的其它元素