搜索
第四章表格的使用本章内容导航插入表格表格基本操作表格属性设置表格操作高级技术知识结构：1.基础知识：表格的作用表格的插入方法2.重点知识表格或单元格的选定新行或新列的插入单元格合并与拆分表格及单元格属性设置方法３.提高知识表格内容的移动排序、导入/导出表格数据的方法插入表格插入表格方法和步骤在表格中添加内容从其他文档导入表格式数据嵌套表格插入表格的具体操作如下：（1）在Dreamweaver“文档”窗口的“设计”视图中，将插入点置于需要插入表格的位置。如果文档是空白的，则只能将插入点放置在文档的开头。（2）执行下列操作之一打开“表格”对话框，如图４-1所示。选择[插入][表格]菜单命令；在“插入栏”的“常用”选项卡中单击“表格”按钮；按【Ctrl+Alt+T】键（3）在“表格”对话框中可对各项参数进行如下设置。“表格大小”栏“页眉”栏“辅助功能”栏（4）完成设置后的“表格”对话框如图４-1所示。单击按钮完成表格的创建，效果如图４-2所示。“表格大小”栏行数：定义表格行的数目。列数：定义表格列的数目。表格宽度：以像素为单位或按占浏览器窗口宽度的百分比来定义该表格在浏览器中的显示宽度。边框粗细：指定表格边框的宽度（以像素为单位）。大多数浏览器默认情况按边框粗细设置为“1”显示表格。若要确保浏览器不显示表格边框，需将边框粗细设置为“0”。若要在边框粗细设置为“0”时查看单元格和表格边框，可选择[查看][可视化助理][表格边框]菜单命令。单元格边距：确定单元格边框和单元格内容之间相距的像素数。单元格间距：确定相邻的表格单元格之间相距的像素数。如果没有明确指定单元格间距和单元格边距的值，则大多数浏览器按单元格边距设置为“1”，单元格间距设置为“2”显示表格。若要确保浏览器不显示表格中的边距和间距，可将“单元格边距”和“单元格间距”设置为“0”。“页眉”栏无：对表格不启用列或行标题；左侧：可以将表格的第一列作为标题列，以便为表中的每一行输入一个标题；顶部：可以将表格的第一行作为标题行，以便为表中的每一列输入一个标题；两者：可在表格中输入列标题和行标题。“辅助功能”栏标题：提供一个显示在表格外的表格标题。对齐标题：指定表格标题相对于表格的显示位置。摘要：给出表格的说明，该文本不会显示在浏览器中。图４-1图４-2在表格中添加内容将表格插入到文档后即可向表格中添加文本或图像等内容。向表格中添加内容的方法很简单，只需将光标定位到要输入内容的单元格，再输入文本或在“插入栏”的“常用”选项卡中单击按钮即可。从其他文档导入表格式数据可以将在另一个应用程序（例如MicrosoftExcel）中创建，并以分隔文本的格式（其中的各项以制表符、逗号、冒号、分号或其他分隔符隔开）保存的表格式数据导入到Dreamweaver中，并设置为表格的格式，其具体操作如下：（1）执行下列操作之一：选择[文件][导入][表格式数据]菜单命令；选择[插入][表格对象][导入表格式数据]菜单命令。（2）执行以上操作后将打开“导入表格式数据”对话框，如图４-3所示。在“导入表格式数据”对话框中，输入有关包含数据的文件信息。数据文件：是要导入的文件名称。可单击按钮选择一个文件。定界符：是正在导入的文件中所使用的分隔符。如果选择“其他”，则一个文本框出现在该下拉列表的右侧，在其中可输入文件中使用的分隔符。表格宽度：是创建的表格所需的宽度。选中单选项可使每个列足够宽以适应该列中最长的文本字符串。选中单选项以像素为单位指定固定的表格宽度，或按占浏览器窗口宽度的百分比指定表格宽度。单元格边距：确定单元格内容和单元格边框之间的像素数。单元格间距：确定相邻的表格单元格之间的像素数。格式化首行：确定应用于表格首行的格式设置（如果存在）。有无格式、粗体、斜体或加粗斜体4种选择。边框：指定表格边框的宽度（以像素为单位）。（3）设置完成后的“导入表格式数据”对话框如图４-3所示。单击按钮即可完成设置，效果如图４-4所示。图４-3图４-4嵌套表格嵌套表格是表格布局中一个十分重要的环节。嵌套表格是指在一个表格的单元格中再插入一个表格。嵌套表格的宽度受所在单元格的宽度的限制。嵌套表格的编辑方法与表格相同。嵌套表格的具体操作如下。（1）将光标定位到要插入表格的单元格中。（2）在“插入栏”的“常用”选项卡中单击按钮，打开“插入表格”对话框。（3）根据实际需要分别在行数、列数、宽度和边框等项中指定嵌套表格的属性。（4）设置完成后单击按钮即可。表格基本操作选定操作单元格的合并及拆分插入或删除行或列表格创建好后可能不满足的要求，这时就需再对表格进行一些操作，如单元格的合并及拆分、行或列的删除等，下面具体讲解。选定操作表格的选取是编辑表格的前提，要在表格中进行任何操作都离不开选取表格。整个表格的选择整行或整列的选择单元格整个表格的选择执行以下操作中的任一项都可以选择整个表格：将鼠标移到表格上，当鼠标光标变为形时，单击鼠标左键即可；将鼠标移到表格的边框线上，表格四周的边框线呈现红色，当鼠标光标变为形或形时单击鼠标左键，如图４-5（a）所示；将鼠标光标定位到表格中，表格弹出绿线的标志，单击标有大小的绿线中的按钮，如图４-5（b）所示。然后从列表中选择“选择表格”命令。图４-5（b）（a）整行或整列的选择将鼠标移到要选取行的左侧，当所选行的边框线变为红色时单击鼠标左键即可。行的选取有外层表格的行和嵌套表格的行的选取。图４-6（a）所示为外层表格行的选取，图４-6（b）所示为嵌套表格行的选取。图４-6（a）（b）也可将光标定位到所选行最左侧的单元格中，再水平拖动鼠标到该行最后一个单元格中释放鼠标来选取位于最上层的嵌套表格的行。列的选取方法与行类似，只是从表格上方选取，如图４-7（a）所示为选取外层表格的列，如图４-7（b）所示为选取嵌套表格的列。图４-7（a）（b）单元格单元格的选取分为单个单元格的选取和单元格区域的选取两种情况。单个单元格的选取方法很简单，只需将光标定位到要选取的单元格中即可。单元格区域选取的具体操作如下:（1）将光标定位到要选取的单元格区域的最左上方或最右下方的单元格中，如图４-8所示。（2）在光标所在单元格中按住鼠标左键不放，拖动鼠标到需要选取的单元格区域的最后一个单元格中释放鼠标即可，如图４-9所示。图４-9图４-8单元格的合并及拆分单元格的合并与拆分是网页设计中经常用到的。合并单元格拆分单元格合并单元格合并单元格的具体操作如下。（1）选取要合并的单元格区域，如图４-10所示。（2）单击“属性”面板左下角的按钮，合并后的效果如图４-11所示。图４-10图４-11拆分单元格拆分单元格时，可以将单元格拆分成几行，也可将单元格拆分成几列，其拆分方法相同。下面以拆分成列为例进行介绍，其具体操作如下。（1）将光标定位要拆分的单元格中。（2）单击“属性”面板中的按钮，打开如图４-12所示的“拆分单元格”对话框。（3）在“把单元格拆分”栏中选中单选项。（4）在“列数”数值框中输入要拆分成的列数，如输入4。（5）单击按钮即可按设置的参数拆分指定单元格，效果如图４-13所示。图４-12图４-13插入或删除行或列用表格设计网页时行列的插入是最常用的，下面学习如何在表格中插入行或列。插入单行或单列添加多行或多列删除行或列插入单行或单列添加单行或单列的具体操作如下。（1）将光标定位到单元格中。（2）执行下列操作之一：选择[修改][表格][插入行]菜单命令或[修改][表格][插入列]菜单命令，执行此操作后将在插入点的上面出现一行或在插入点的左侧出现一列；单击“列标题菜单”按钮，然后选择“左侧插入列”或“右侧插入列”，如图４-14所示，执行此操作后将在插入点的左侧或右侧出现一列，如图４-15所示。图４-14图４-15添加多行或多列添加多行或多列的具体操作如下：（1）将光标定位到单元格中。（2）选择[修改][表格][插入行或列]菜单命令打开“插入行或列”对话框。（3）在“插入行或列”对话框中进行如图４-16所示的设置。（4）单击按钮。所需的行或列出现在表格中，效果如图４-17所示。图４-16图４-17删除行或列要删除行或列可执行如下操作之一：单击要删除的行或列中的一个单元格，然后选择[修改][表格][删除行]菜单命令或[修改][表格][删除列]菜单命令；选择完整的一行或一列，然后选择[编辑][清除]菜单命令或按【Delete】键。执行以上操作后整个行或列即从表格中删除。表格属性设置表格属性的设置单元格属性设置为了使表格更具特色，需要在“表格”属性面板中对表格线的颜色、表格或单元格的背景、边框等进行设置。“表格”属性面板中显示了所插入的表格的所有特性，通过修改面板中的参数可快速地编辑表格外观。如果窗口中没有显示属性面板，可选择[窗口][属性]菜单命令打开。表格属性的设置设置表格属性的具体操作如下:（1）选取表格，展开“表格”属性面板，如图４-18所示。图４-18（2）在“表格Id”文本框中输入表格名，如输入“Biao1”。（3）在“行”和“列”数值框中可修改表格的行数和列数，修改完后按【Enter】键进行确认。（4）在“宽”和“高”数值框中可修改表格宽度和高度，并在其后的列表中选择“像素”或“百分比”作为度量单位。（5）在“填充”数值框中修改单元格内容和单元格边界之间相距的像素数。（6）在“间距”数值框中设置相邻的单元格之间相距的像素数。（7）在“对齐”下拉列表框中选择表格与同一段落中的文本或图像的对齐方式。（8）在“边框”数值框中设置边框线的粗细。（9）在“边框颜色”颜色块中设置边框线的颜色。（10）在“类”下拉列表框中可选择CSS样式。（11）在“背景颜色”色块中设置表格的背景色。（12）在“背景图像”文本框中指定作为背景图片的位置，或单击文本框右侧的按钮指定背景图片的路径。（13）单击按钮可删除表格的列宽值，单击按钮可删除行高值。（14）单击按钮将表格宽度从浏览器窗口的百分比转换为像素。单击按钮则从像素转换为百分比。（15）设置完成后按【Enter】键进行确认。如图5-19所示是按如图４-18所示进行设置后的显示效果。图４-19单元格属性设置在编辑网页时除可以设置整个表格的属性外，还可以设置行、列或单元格的属性，其具体操作如下。（1）选取要设置属性的单元格、行或列，“单元格”属性面板显示如图４-20所示。图４-20（2）在“水平”下拉列表框中设置单元格中文本在水平方向上的对齐方式。在“垂直”列表中设置单元格中的文本在垂直方向上的对齐方式。（3）在“宽”和“高”数值框中分别设置单元格的宽度和高度。默认单位为像素，若用百分比则应在数值后加上百分号（%）。（4）在“背景”文本框中指定单元格、行或列的背景图像路径，也可单击按钮从其他位置选择一幅图像。（5）在“背景颜色”和“边框”色块中设置单元格、列或行的背景颜色和边框颜色。（6）设置完成后按【Enter】键进行确认。如图5-21所示灰色单元格区域为如图４-20所示进行设置的效果。图４-21表格操作高级技术表格整列内容的移动表格的排序数据的导入/导出除了对表格进行以上基本操作外，还可以对表格整列内容进行位置移动、对表格内容排序、导入/导出表格数据等高级操作，下面具体讲解。表格整列内容的移动要对表格内容进行移动，其具体操作如下。（1）选择要移动的列，如图４-22所示。（2）选择[编辑][剪切]菜单命令或按【Ctrl+X】键执行剪切操作。（3）将光标定位到目标位置后一列的任一单元格中，再选择[编辑][粘贴]菜单命令或按【Ctrl+V】键执行粘贴操作，即可将所选列移动到光标所在列的左侧，如图４-23所示。图４-23图４-22表格的排序表格作为处理数据的常见形式，对其中的数据进行排序是必不可少的，在Dreamweaver中对表格内容进行排序的具体操作如下。（1）选中要排序的表格，如图４-24所示。（2）选择[命令][排序