使用表格布局页面

1、 本章将介绍在本章将介绍在Dreamweaver CS3Dreamweaver CS3中创建和编辑表格的基本方法。中创建和编辑表格的基本方法。第6章使用表格布局页面学习目标理解表格的构成和作用。理解表格的构成和作用。掌握表格的基本操作和属性设置方法。掌握表格的基本操作和属性设置方法。掌握导入和导出表格的方法。掌握导入和导出表格的方法。掌握排序表格的方法。掌握排序表格的方法。掌握使用表格进行网页布局的方法。掌握使用表格进行网页布局的方法。6.1认识表格表格的构成表格的构成 表格的作用表格的作用6.1.1 表格的构成表格是由行和列组成的，行和列又是由单元格组成的，所以，表格是由行和列组成的，行和列

2、又是由单元格组成的，所以，单元格是组成表格的最基本单位。单元格之间的间隔称为单元格单元格是组成表格的最基本单位。单元格之间的间隔称为单元格间距；单元格内容与单元格边框之间的间隔称为单元格边距（或间距；单元格内容与单元格边框之间的间隔称为单元格边距（或填充填充）。）。6.2.2 表格的作用组织数据：这是表格最基本的作用，如成绩单、工资组织数据：这是表格最基本的作用，如成绩单、工资表、销售表等。表、销售表等。网页布局：这是表格组织数据作用的延伸，由简单地网页布局：这是表格组织数据作用的延伸，由简单地组织一些数据发展成组织网页元素，进行版面布局。组织一些数据发展成组织网页元素，进行版面布局。制作特殊

3、效果：如制作细线边框、按钮等。若结合制作特殊效果：如制作细线边框、按钮等。若结合CSSCSS样式，会制作出更多的效果。样式，会制作出更多的效果。6.2 创建表格插入表格插入表格选择表格选择表格编辑表格编辑表格6.2.1 插入表格 通过以下任意一种方式打开通过以下任意一种方式打开【表格【表格】对话框来插入表格。】对话框来插入表格。选择选择【插入记录【插入记录】/【表格【表格】命令】命令在在【插入【插入】/【常用【常用】工具栏中单击】工具栏中单击 （表格）按钮（表格）按钮在在【插入【插入】/【布局【布局】工具栏中单击】工具栏中单击 （表格）按钮。（表格）按钮。按按Ctrl+Alt+T组合键组合键6

4、.2.2 选择表格一、选择整个表格一、选择整个表格二、二、选择表格的行或列选择表格的行或列三、选择单元格三、选择单元格6.2.2 选择表格一、选择整个表格一、选择整个表格单击表格左上角或单击表格中任何一个单元格的边框线单击表格左上角或单击表格中任何一个单元格的边框线将鼠标光标置于表格内，选择将鼠标光标置于表格内，选择【修改【修改】/ /【表格【表格】/ /【选择表格【选择表格】命令，或在鼠】命令，或在鼠标右键快捷菜单中选择标右键快捷菜单中选择【表格【表格】/ /【选择表格【选择表格】命令。】命令。将鼠标光标移到预选择的表格内，表格上端或下端弹出绿线的标志，单击绿线将鼠标光标移到预选择的表格内，

5、表格上端或下端弹出绿线的标志，单击绿线中的中的 按钮，从弹出的下拉菜单中选择按钮，从弹出的下拉菜单中选择【选择表格【选择表格】命令，如图】命令，如图6-66-6所示。所示。将鼠标光标移到预选择的表格内，单击文档窗口左下角相应的将鼠标光标移到预选择的表格内，单击文档窗口左下角相应的“”标签。标签。6.2.2 选择表格二、选择表格的行或列二、选择表格的行或列当鼠标光标位于欲选择的行首或列顶时，鼠标光标变成黑色箭头形状，这时单当鼠标光标位于欲选择的行首或列顶时，鼠标光标变成黑色箭头形状，这时单击鼠标左键，便可选择行或列。如果按住鼠标左键不放并移动黑色箭头，可以击鼠标左键，便可选择行或列。如果按住鼠标

6、左键不放并移动黑色箭头，可以选择连续的行或列。选择连续的行或列。按住鼠标左键从左至右或从上至下拖曳，将选择相应的行或列。按住鼠标左键从左至右或从上至下拖曳，将选择相应的行或列。将鼠标光标移到欲选择的行中，单击文档窗口左下角的将鼠标光标移到欲选择的行中，单击文档窗口左下角的“tr”标签选择行。标签选择行。将鼠标光标移到表格内，单击欲选择列的绿线标志中的将鼠标光标移到表格内，单击欲选择列的绿线标志中的 按钮，从弹出的下拉菜按钮，从弹出的下拉菜单中选择单中选择【选择列【选择列】命令。】命令。有时需要选择不相邻的多行或多列，可以通过下面的方法来实现。有时需要选择不相邻的多行或多列，可以通过下面的方法来

7、实现。按住按住CtrlCtrl键，依次单击欲选择的行或列。键，依次单击欲选择的行或列。按住按住CtrlCtrl键，在已选择的连续行或列中依次单击欲去除的行或列。键，在已选择的连续行或列中依次单击欲去除的行或列。6.2.2 选择表格三、选择单元格三、选择单元格(1) (1) 选择单个单元格的方法有以下两种。选择单个单元格的方法有以下两种。将鼠标光标置于单元格内，然后按住将鼠标光标置于单元格内，然后按住CtrlCtrl键，单击单元格可以将其选择。键，单击单元格可以将其选择。将鼠标光标置于单元格内，然后单击文档窗口左下角的将鼠标光标置于单元格内，然后单击文档窗口左下角的标签将其选择。标签将其选择。

8、(2) (2) 选择相邻单元格的方法有以下两种。选择相邻单元格的方法有以下两种。在开始的单元格中按住鼠标左键并拖曳到最后的单元格。在开始的单元格中按住鼠标左键并拖曳到最后的单元格。将鼠标光标置于开始的单元格内，然后按住将鼠标光标置于开始的单元格内，然后按住ShiftShift键不放，单击最后的单元格。键不放，单击最后的单元格。(3) (3) 选择不相邻单元格的方法有以下两种。选择不相邻单元格的方法有以下两种。按住按住CtrlCtrl键，依次单击欲选择的单元格。键，依次单击欲选择的单元格。按住按住CtrlCtrl键，在已选择的连续行或列中依次单击欲去除的行或列。键，在已选择的连续行或列中依次单击

9、欲去除的行或列。6.2.3 编辑表格插入行或列插入行或列删除行或列删除行或列合并单元格合并单元格拆分单元格拆分单元格复制和粘贴表格复制和粘贴表格移动表格移动表格 6.2.3 编辑表格一、插入行或列一、插入行或列选择选择【修改【修改】/ /【表格【表格】/ /【插入行【插入行】命令，则在鼠标光标所在单元格的上面增】命令，则在鼠标光标所在单元格的上面增加加1 1行。同样，选择行。同样，选择【修改【修改】/ /【表格【表格】/ /【插入列【插入列】命令，则在鼠标光标所在单】命令，则在鼠标光标所在单元格的左侧增加元格的左侧增加1 1列。也可使用鼠标右键菜单命令进行操作。列。也可使用鼠标右键菜单命令进行

10、操作。6.2.3 编辑表格选择选择【插入记录【插入记录】/ /【表格对象【表格对象】菜单中的】菜单中的【在上面插入行【在上面插入行】、】、【在下面插【在下面插入行入行】、】、【在左边插入列【在左边插入列】、】、【在右边插入列【在右边插入列】命令来插入行或列。】命令来插入行或列。选择选择【修改【修改】/ /【表格【表格】/ /【插入行或列【插入行或列】命令，打开】命令，打开【插入行或列【插入行或列】对话框】对话框进行设置，如图进行设置，如图6-106-10所示，加以确认后即可完成插入操作。也可在鼠标右键所示，加以确认后即可完成插入操作。也可在鼠标右键菜单中选择菜单中选择【表格【表格】/ /【插入

11、行或列【插入行或列】命令打开该对话框。】命令打开该对话框。6.2.3 编辑表格二、删除行或列二、删除行或列 如果要删除行或列，首先需要将鼠标光标置于要删除的行或列中，或者将要如果要删除行或列，首先需要将鼠标光标置于要删除的行或列中，或者将要删除的行或列选中，然后选择删除的行或列选中，然后选择【修改【修改】/ /【表格【表格】菜单中的】菜单中的【删除行【删除行】或】或【删除列【删除列】命令，将行或列删除。最简捷的方法就是利用选择表格行或列的】命令，将行或列删除。最简捷的方法就是利用选择表格行或列的方法选定要删除的行或列，然后按键盘上的方法选定要删除的行或列，然后按键盘上的DeleteDelete

12、键。也可使用鼠标右键菜键。也可使用鼠标右键菜单进行以上操作。单进行以上操作。6.2.3 编辑表格三、合并单元格三、合并单元格 合并单元格是指将多个单元格合并为一个单元格。首先选择欲合并合并单元格是指将多个单元格合并为一个单元格。首先选择欲合并的单元格，然后可采取以下几种方法进行操作。的单元格，然后可采取以下几种方法进行操作。选择选择【修改【修改】/ /【表格【表格】/ /【合并单元格【合并单元格】命令。】命令。单击鼠标右键，在弹出的快捷菜单中选择单击鼠标右键，在弹出的快捷菜单中选择【表格【表格】/ /【合并单元格【合并单元格】命令。】命令。单击单击【属性【属性】面板左下角的】面板左下角的 按钮

13、。按钮。6.2.3 编辑表格四、合并单元格四、合并单元格 拆分单元格是针对单个单元格而言的，可看成是合并单元格操作的逆操作。拆分单元格是针对单个单元格而言的，可看成是合并单元格操作的逆操作。首先需要将鼠标光标定位到要拆分的单元格中，然后采取以下几种方法进行首先需要将鼠标光标定位到要拆分的单元格中，然后采取以下几种方法进行操作。操作。选择选择【修改【修改】/ /【表格【表格】/ /【拆分单元格【拆分单元格】命令。】命令。单击鼠标右键，在弹出的快捷菜单中选择单击鼠标右键，在弹出的快捷菜单中选择【表格【表格】/ /【拆分单元格【拆分单元格】命令。】命令。单击单击【属性【属性】面板左下角的】面板左下角

14、的 按钮按钮6.2.3 编辑表格五、复制或剪切五、复制或剪切 选择了整个表格、某行、某列或单元格后，选择选择了整个表格、某行、某列或单元格后，选择【编辑【编辑】菜单中的】菜单中的【拷贝【拷贝】或或【剪切【剪切】命令，可以将其中的内容复制或剪切。选择】命令，可以将其中的内容复制或剪切。选择【剪切【剪切】命令，会将】命令，会将被剪切部分从原始位置删除，而选择被剪切部分从原始位置删除，而选择【拷贝【拷贝】命令，被复制部分仍将保留在】命令，被复制部分仍将保留在原始位置。原始位置。6.2.3 编辑表格六、六、粘贴表格粘贴表格 将鼠标光标置于要粘贴表格的位置，然后选择将鼠标光标置于要粘贴表格的位置，然后选

15、择【编辑【编辑】/ /【粘贴【粘贴】命令，便】命令，便可将所复制或剪切的表格、行、列或单元格等粘贴到鼠标光标所在的位置。可将所复制或剪切的表格、行、列或单元格等粘贴到鼠标光标所在的位置。(1) (1) 复制复制/ /粘贴表格粘贴表格 当鼠标光标位于单个单元格内时，粘贴整个表格后，将在单元格内插入一个当鼠标光标位于单个单元格内时，粘贴整个表格后，将在单元格内插入一个嵌套的表格。如果鼠标光标位于表格外，那么将粘贴一个新的表格。嵌套的表格。如果鼠标光标位于表格外，那么将粘贴一个新的表格。6.2.3 编辑表格(2) (2) 复制复制/ /粘贴行或列粘贴行或列 选择与所复制内容结构相同的行或列，然后使用

16、粘贴命令，复制的内容将取选择与所复制内容结构相同的行或列，然后使用粘贴命令，复制的内容将取代行或列中原有的内容。若不选择行或列，将鼠标光标置于单元格内，粘贴代行或列中原有的内容。若不选择行或列，将鼠标光标置于单元格内，粘贴后将自动添加后将自动添加1 1行或行或1 1列。若鼠标光标位于表格外，粘贴后将自动生成一个新列。若鼠标光标位于表格外，粘贴后将自动生成一个新的表格。的表格。6.2.3 编辑表格(3) (3) 复制复制/ /粘贴单元格粘贴单元格 若被复制的内容是一部分单元格，并将其粘贴到被选择的单元格上，则被选若被复制的内容是一部分单元格，并将其粘贴到被选择的单元格上，则被选择的单元格内容将被

17、复制的内容替换，前提是复制和粘贴前后的单元格结构择的单元格内容将被复制的内容替换，前提是复制和粘贴前后的单元格结构要相同。若鼠标光标在表格外，则粘贴后将生成一个新的表格。要相同。若鼠标光标在表格外，则粘贴后将生成一个新的表格。6.2.3 编辑表格七、移动表格内容七、移动表格内容 有时需要移动表格中的数据位置才能更符合实际需要。在有时需要移动表格中的数据位置才能更符合实际需要。在DreamweaverDreamweaver中可中可以整行或整列地移动数据。首先需要选择要移动的行或列并执行剪切操作，以整行或整列地移动数据。首先需要选择要移动的行或列并执行剪切操作，然后移动鼠标光标插入点到目标位置，执

18、行粘贴操作。粘贴的内容将位于插然后移动鼠标光标插入点到目标位置，执行粘贴操作。粘贴的内容将位于插入点所在行的上方或插入点所在列的左方。入点所在行的上方或插入点所在列的左方。6.3设置表格和单元格属性设置表格属性设置表格属性设置单元格属性设置单元格属性6.3.1设置表格属性6.3.2设置单元格属性6.4嵌套表格嵌套表格是指在表格的单元格中再插入表格，其宽度受所在单嵌套表格是指在表格的单元格中再插入表格，其宽度受所在单元格的宽度限制，常用于控制表格内的文本或图像的位置。虽元格的宽度限制，常用于控制表格内的文本或图像的位置。虽然表格可以层层嵌套，但在实践中不主张表格的嵌套层次过多，然表格可以层层嵌套，但在实践中不主张表格的嵌套层次过多，一般控制在一般控制在34层即可。大的图像或者多的内容最好