网页设计与制作第6章-使用表格课件.ppt

1、 表格在网页中的用途非常广泛，这不仅表现在它可以有序地排列数据，还表现在可以精确地定位网页元素，是网页排版布局的重要工具。本章将介绍有关表格的基本知识以及使用表格布局网页的基本方法。第第6 6章章 使用表格使用表格学习目标了解表格的构成和作用。了解表格的构成和作用。掌握插入表格的基本方法。掌握插入表格的基本方法。掌握设置表格和单元格属性的基本方法。掌握设置表格和单元格属性的基本方法。掌握编辑表格的基本方法。掌握编辑表格的基本方法。掌握使用表格进行网页布局的方法。掌握使用表格进行网页布局的方法。掌握导入和导出表格的基本方法。掌握导入和导出表格的基本方法。掌握对表格进行排序的基本方法。掌握对表格进

2、行排序的基本方法。6.1 认识表格 6.1.1 表格的构成6.1.2 表格的作用6.1.1 表格的构成表格是一种组织和整理数据的基本手段，常常出现在印刷介质、手写记录、计算机软件、建筑装饰、交通标志等地方，在通讯交流、科学研究和数据分析等领域也得到广泛应用。网页中的表格，实际上是由一系列行和列构成的网格，单元格是构成表格的最基本单位。6.1.2 表格的作用表格是用于在网页上显示表格式数据以及对文本和图像进行布局的重要工具。表格可以将网页内容按特定的行、列规则进行排列。单元格内可以存放数字、文本或图像等网页元素。具体来说，表格的作用可以归纳为以下3个方面。组织数据：这是表格最基本的作用，如成绩单

3、、工资表、销售表等。页面布局：这是表格组织数据作用的延伸，由简单地组织一些常规数据发展成组织网页元素，进行版面布局。制作特殊效果：如制作细线边框、按钮等。6.2 插入和设置表格 6.2.1 教学案例列车时刻表6.2.2 插入表格6.2.3 表格属性6.2.4 行列和单元格属性6.2.5 添加表格内容6.2.1 教学案例列车时刻表按照要求使用表格制作一个列车时刻表，在浏览器中的显示效果如图6-2所示。(1) 创建一个新文档“6-2-1.htm”，将页面字体设置为“宋体”，大小设置为“16px”，浏览器标题为“列车时刻表”。(2) 插入一个7行5列的表格，表格宽度为“600px”，边框粗细为“1”

4、，单元格边距和间距均为“0”，第1行为标题行，表格标题为“列车时刻表”。(3) 将第1行所有单元格的宽度均设置为“20%”，背景颜色设置为“#CCCCCC”，将第1列所有单元格的高度均设置为“25”，将第27行所有单元格的水平对齐方式均设置为“居中对齐”。(4) 将表格设置为“居中对齐”显示并在单元格中输入相应的文本。6.2.1 教学案例列车时刻表6.2.2 插入表格插入表格在文档中插入表格的方法是，将鼠标光标置于要插入表格的位在文档中插入表格的方法是，将鼠标光标置于要插入表格的位置，然后采用以下某种方式打开【表格】对话框进行参数设置即可。置，然后采用以下某种方式打开【表格】对话框进行参数设置

5、即可。选择菜单命令【插入】选择菜单命令【插入】/【表格】。【表格】。在【插入】面板的【常用】类别中单击【表格】按钮。在【插入】面板的【常用】类别中单击【表格】按钮。在【插入】面板的【布局】类别中单击【表格】按钮。在【插入】面板的【布局】类别中单击【表格】按钮。6.2.3 表格属性表格属性一、选择表格一、选择表格单击表格左上角来选择表格。单击表格左上角来选择表格。单击表格任何一个单元格的边框线来选择表格。单击表格任何一个单元格的边框线来选择表格。将鼠标光标置于表格内，选择菜单命令【修改】【表格】将鼠标光标置于表格内，选择菜单命令【修改】【表格】【选择表格】来选择表格。【选择表格】来选择表格。将鼠

6、标光标置于表格内，在鼠标右键快捷菜单中选择【表格】将鼠标光标置于表格内，在鼠标右键快捷菜单中选择【表格】【选择表格】命令来选择表格。【选择表格】命令来选择表格。将鼠标光标移到预选择的表格内，表格顶部或底部弹出绿线将鼠标光标移到预选择的表格内，表格顶部或底部弹出绿线的标志，单击绿线中的的标志，单击绿线中的 按钮，从弹出的下拉菜单中选择【选择表格】按钮，从弹出的下拉菜单中选择【选择表格】命令。命令。将鼠标光标移到预选择的表格内，单击文档窗口左下角标签将鼠标光标移到预选择的表格内，单击文档窗口左下角标签选择器中的选择器中的标签来选择表格。标签来选择表格。6.2.3 表格属性表格属性选定表格后，在表格

7、的【属性】面板中会显示所创建表格的基选定表格后，在表格的【属性】面板中会显示所创建表格的基本属性，如行数、列数、宽度、填充、间距、边框及对齐方式等，本属性，如行数、列数、宽度、填充、间距、边框及对齐方式等，此时可以根据需要继续修改这些属性。此时可以根据需要继续修改这些属性。6.2.4 行列和单元格属性行列和单元格属性设置表格的行列和单元格属性，首先要选择行、列或单元格，然后在【属性】面板中进行设置。选择表格的行或列最常用的方法有以下几种。当鼠标光标位于欲选择的行首或列顶变成黑色箭头形状时，单击鼠标左键即可选择该行或该列。此时如果按住鼠标左键并拖曳，可以选择连续的行或列，也可以按住Ctrl键依次

8、单击欲选择的行或列，这样可以选择不连续的多行或多列。6.2.4 行列和单元格属性行列和单元格属性按住鼠标左键从左至右或从上至下拖曳，将选择相应的行或列。6.2.4 行列和单元格属性行列和单元格属性将鼠标光标移到欲选择的行中，单击文档窗口左下角标签选择器中的标签选择该行。6.2.4 行列和单元格属性行列和单元格属性选择单个单元格的方法通常有以下两种。将鼠标光标置于单元格内，然后按住Ctrl键，单击单元格可以将其选择。将鼠标光标置于单元格内，然后单击文档窗口左下角的标签将其选择。选择相邻单元格的方法有以下两种。在开始的单元格中按住鼠标左键并拖曳到最后的单元格。将鼠标光标置于开始的单元格内，然后按住

9、Shift键不放单击最后的单元格。选择不相邻单元格的方法有以下两种。按住Ctrl键，依次单击欲选择的单元格。按住Ctrl键，在已选择的连续单元格中依次单击欲去除的单元格。6.2.4 行列和单元格属性行列和单元格属性行、列、单元格的【属性】面板参数选项都是一样的，惟一不同的是左下角的名称，有行、列或单元格的区别。行、列、单元格的【属性】面板仍然有【属性（HTML）】面板和【属性（CSS）】面板两种形式，但这主要是针对文本设置而言的，对于表格的行、列或单元格属性设置来说，选择【属性（HTML）】面板与选择【属性（CSS）】面板结果都是一样的。插入表格并设置好属性后，还需要向表格中添加内容，如文本、

10、图像等。在表格中添加文本就如同在文档中操作一样，除了直接输入文本外，也可以从其他文档中复制文本，然后将其粘贴到表格内。随着文本的增多，表格也会自动增高。在单元格中添加图像时，如果单元格的尺寸小于所插入图像的尺寸，则插入图像后，单元格的尺寸将自动增高或者增宽。为了美观，在表格单元格中添加内容后，可以根据需要适当调整单元格的填充或间距，使单元格中的内容与边框有适当的距离，或不同的单元格之间有适当的距离。6.2.5 添加表格内容添加表格内容6.3 编辑表格6.3.1 教学案例教学案例个人简历个人简历6.3.2 拷贝、剪切和粘贴表格拷贝、剪切和粘贴表格 6.3.3 插入、删除行和列插入、删除行和列 6

11、.3.4 合并和拆分单元格合并和拆分单元格 6.3.5 调整表格大小调整表格大小 6.3.6 删除表格和内容删除表格和内容 6.3.1 教学案例个人简历按照要求使用表格制作一份个人简历，在浏览器中的显示效果如图6-26所示。(1)创建一个新文档“6-3-1.htm”，将页面字体设置为“宋体”，大小设置为“16px”，浏览器标题为“个人简历”。(2)先插入一个6行5列的表格，表格宽度为“650px”，边框粗细为“1”，表格标题为“个人简历”，设置其大小为“24px”，加粗显示。(3)根据需要添加行并进行单元格合并，然后将第1行第14个单元格的宽度均设置为“20%”，将第1列第15个单元格的高度和

12、“个人经历”后面一列中的5个单元格的高度均设置为“40”，将倒数第一行第1个单元格的高度设置为“150”。(4)将表格设置为“居中对齐”显示，单元格边距和间距均为“0”。(5)在单元格中输入相应的文本，并设置这些单元格“居中对齐”。6.3.1 教学案例个人简历6.3.2 拷贝、剪切和粘贴表格拷贝/粘贴表格当鼠标光标位于单个单元格内时，粘贴整个表格后将在单元格内插入一个表格。如果鼠标光标位于表格外，那么将粘贴一个新的表格.6.3.2 拷贝、剪切和粘贴表格拷贝/粘贴行或列选择与所拷贝内容结构相同的行或列，然后使用粘贴命令，拷贝的内容将取代行或列中原有的内容。若不选择行或列，将鼠标光标置于单元格内，

13、粘贴后将自动在当前行的上面添加1行或在当前列的左侧添加1列。若鼠标光标位于表格外，粘贴后将自动生成一个新的表格。6.3.2 拷贝、剪切和粘贴表格拷贝/粘贴单元格若被拷贝的内容是一部分单元格，并将其粘贴到被选择的单元格上，则被选择的单元格内容将被拷贝的内容替换，前提是拷贝和粘贴前后的单元格结构要相同。若鼠标光标在表格外，则粘贴后将生成一个新的表格。6.3.3 插入、删除行和列一、增加行或列首先将鼠标光标移到欲插入行或列的单元格内，然后采取以下几种方法进行操作。选择菜单命令【修改】/【表格】/【插入行】，则在鼠标光标所在单元格的上面增加1行。同样，选择菜单命令【修改】/【表格】/【插入列】，则在鼠

14、标光标所在单元格的左侧增加1列。也可使用右键快捷菜单命令【表格】/【插入行】或【表格】/【插入列】进行操作。6.3.3 插入、删除行和列选择菜单命令【插入】/【表格对象】/【在上面插入行】，则在鼠标光标所在单元格的上面增加1行，其他菜单命令以此类推。在【插入】面板的【布局】类别中单击【在上面插入行】按钮，则在鼠标光标所在单元格的上面增加1行，其他按钮以此类推。6.3.3 插入、删除行和列选择菜单命令【修改】/【表格】/【插入行或列】或在右键快捷菜单命令中选择【表格】/【插入行或列】，打开【插入行或列】对话框并进行参数设置。6.3.3 插入、删除行和列二、删除行或列如果要删除行或列，首先需要将鼠

15、标光标置于要删除的行或列中，或者将要删除的行或列选中，然后选择菜单命令【修改】/【表格】/【删除行】或【删除列】进行删除。也可使用右键快捷菜单命令进行操作。实际上，最简捷的方法就是先选定要删除的行或列，然后按Delete键。6.3.4 合并和拆分单元格一、合并单元格合并单元格是指将多个单元格合并成为一个单元格。首先选择欲合并的单元格，然后可采取以下方法进行操作。选择菜单命令【修改】/【表格】/【合并单元格】。单击鼠标右键，在弹出的快捷菜单中选择【表格】/【合并单元格】命令。单击【属性】面板左下角的【合并单元格】按钮。6.3.4 合并和拆分单元格二、拆分单元格拆分单元格是针对单个单元格而言的，可

16、看成是合并单元格的逆操作。首先需要将鼠标光标定位到要拆分的单元格中，然后采取以下方法进行操作。选择菜单命令【修改】/【表格】/【拆分单元格】。单击鼠标右键，在弹出的快捷菜单中选择【表格】/【拆分单元格】命令。单击【属性】面板左下角的【拆分单元格】按钮，弹出【拆分单元格】对话框。6.3.5 调整表格大小在文档中插入表格后，表格的尺寸大小可以根据实际需要进行调整。通常有两种方法：一种是直接用鼠标拖放表格，另一种是通过【属性】面板重新设置表格的大小。在文档中选择表格后，表格周围出现了缩放手柄。拖放表格右侧手柄可以改变表格宽度，拖放底边手柄可以改变表格高度，拖放表格右下角手柄可以同时改变表格宽度和表格

17、高度。直接拖放行的底边可以改变行高，拖放列的右边可以改变列宽。用鼠标拖放表格可以快捷地改变表格的尺寸大小，但不够准确。如果需要准确地改变表格的尺寸，可在【属性】面板中进行设置。6.3.6 删除表格和内容如果要删除整个表格，可以首先选择整个表格，然后在键盘上按Delete键。如果要删除表格的内容而不想删除表格，可以选择一个或多个单元格（但不能选择整行、整列或者整个表格），然后选择【编辑】/【清除】命令或者按Delete键删除内容。这样，被选择的行、列或单元格内的内容被删除，而表格的结构保持不变。6.4 使用表格布局网页6.4.1 6.4.1 教学案例教学案例心理效应心理效应6.4.2 6.4.2

18、 设置表格背景设置表格背景6.4.3 6.4.3 制作表格细线效果制作表格细线效果6.4.4 6.4.4 插入嵌套表格插入嵌套表格6.4.1 教学案例教学案例心理效应心理效应将素材文档复制到站点文件夹下，然后使用表格布局页面，在浏览器中的显示效果如图6-58所示。6.4.2 设置表格背景由于在表格【属性】面板中没有背景设置选项，可以通过【代码】视图来设置表格的背景。方法是，在【代码】视图中，将鼠标光标置于表格代码所在行某个参数的后面，然后按空格键，弹出表格属性参数下拉列表，双击下拉列表中的“bgcolor”可以设置背景颜色，双击下拉列表中的“background”可以设置背景图像。6.4.3

19、制作表格细线效果目前为目，制作表格细线效果可以使用下面的方法，首先插入一个表格，设置表格的边框为“0”，单元格间距为“1”，然后设置表格背景，最后将表格的所有单元格背景颜色设置为白色“#FFFFFF”即可，如图所示是在浏览器中效果。6.4.4 插入嵌套表格嵌套表格是指在表格的单元格中再插入表格，其宽度受所在单元格的宽度限制，常用于控制表格内的文本或图像的位置。虽然表格可以层层嵌套，但在实践中不主张表格的嵌套层次过多，一般控制在34层即可。大的图像或者多的内容最好不要放在深层嵌套表格中，这样网页的浏览速度会受影响。6.5 使用表格数据功能6.5.1 6.5.1 导入表格数据导入表格数据6.5.2

20、 6.5.2 导出表格数据导出表格数据6.5.3 6.5.3 排序表格数据排序表格数据6.5.1 导入表格数据可以将Excel表格和以分隔文本的格式（其中的项以制表符、逗号、分号或其他分隔符）保存的表格式数据导入到Dreamweaver CS6中。方法是：选择菜单命令【文件】/【导入】/【表格式数据】或【Excel文档】。导入Excel文档与导入Word文档打开的对话框是相似的，而导入表格式数据打开的对话框如图6-78所示。在导入表格式数据时，数据中的定界符须是半角。另外，【导入表格式数据】对话框中的定界符指的是要导入的数据文件中使用的定界符。6.5.2 导出表格数据在Dreamweaver CS6中的表格数据也可以进行导出。方法是：将鼠标光标置于表格中，然后选择菜单命令【文件】/【导出】/【表格】，打开【导出表格】对话框，进行参数设置即可。6.5.3 排序表格数据利用Dreamweaver的【排序表格】命令可以对表格指定列的内容进行排序。方法是：先选中整个表格，然后选择菜单命令【命令】/【排序表格】，打开【排序表格】对话框，在该对话框中进行参数设置即可。