搜索
第5章表格的应用关于表格插入表格导入和导出表格式数据选择表格元素使用“扩展表格”模式编辑表格设置表格和单元格的格式调整表格、列和行的大小添加及删除行和列拆分和合并单元格复制、粘贴和删除单元格嵌套表格对表格进行排序5.1关于表格表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格。虽然HTML代码中通常不明确指定列，但Dreamweaver允许操作列、行和单元格。当选定了表格或表格中有插入点时，Dreamweaver会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。根据需要可以启用或禁用宽度和菜单。如果未看到表的宽度或列的宽度，说明没有在HTML代码中指定该表或列的宽度。如果出现2个数字，说明“设计”视图中显示的可视宽度与HTML代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小，或将内容添加到比设置宽度大的单元格时会发生这种情况。例如，如果将某列的宽度设置为200像素，而添加的内容将宽度延长为250像素，则该列将显示两个数字：“200”（代码中指定的宽度）和“（250）”（位于括号中，表示该列呈现在屏幕上的可视宽度）。5.1.1HTML中的表格格式设置优先顺序当在“设计”视图中对表格进行格式设置时，可以设置整个表格或表格中所选行、列或单元格的属性。如果将整个表格的某个属性（例如背景颜色或对齐）设置为一个值，而将单个单元格的属性设置为另一个值，则单元格格式设置优先于行格式设置，行格式设置又优先于表格格式设置。表格格式设置的优先顺序如下：（1）单元格。（2）行。（3）表格。例如，如果将单个单元格的背景颜色设置为蓝色，然后将整个表格的背景颜色设置为黄色，则蓝色单元格不会变为黄色，因为单元格格式设置优先于表格格式设置。注意：当设置列的属性时，Dreamweaver更改对应于该列中每个单元格的td标签的属性。5.2插入表格使用“插入”工具栏或“插入”菜单来创建一个新表格。然后，按照在表格外添加文本和图像的方式，向表格单元格中添加文本和图像。只要整个选择部分的单元格形成一行或一个矩形，便可以合并任意数目的相邻的单元格，以生成一个跨多个列或行的单元格。可以将单元格拆分成任意数目的行或列，而不管之前它是否是合并的。Dreamweaver可以自动重新构造表格（添加任何必需的colspan或rowspan属性），以创建指定的排列方式。在下图中，前两行中间的单元格已经合并成一个跨两行的单元格。5.1.2关于拆分和合并表格单元格步骤1在“文档”窗口的“设计”视图中，将插入点放在需要表格出现的位置。注意：如果文档是空白的，则只能将插入点放置在文档的开头。步骤2执行下列操作之一：选择“插入”|“表格”命令。在“插入”工具栏的“常用”类别中，单击“表格”按钮。步骤3打开“表格”对话框，如右图所示，在“表格大小”区域中指定下列选项：行数：确定表格具有的行的数目。列数：表格宽度：指定表格的宽度，在其右侧的下拉列表框中选择像素或百分比。边框粗细：指定表格边框的宽度（以像素为单位）。确定表格具有的列的数目。提示：如果没有明确指定边框粗细的值，则大多数浏览器按边框粗细设置为1显示表格。若要确保浏览器显示的表格没有无边框，将边框粗细设置为0。无：对表不启用列或行标题。左：可以将表的第一列作为标题列，以便为表中的每一行输入一个标题。顶部：可以将表的第一行作为标题行，以便为表中的每一列输入一个标题。两者：能够在表中输入列标题和行标题。提示：如果没有明确指定单元格间距和单元格边距的值，大多数浏览器按单元格边距都设置为1，单元格间距设置为2显示表格。若要确保浏览器不显示表格中的边距和间距，将“单元格边距”和“单元格间距”设置为0。步骤4在“页眉”区域中选择一个标题选项：提示：最好使用标题，以方便使用屏幕阅读器的Web站点访问者。屏幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪表格信息。单元格边距：确定单元格边框和单元格内容之间的像素数。单元格间距：确定相邻的表格单元格之间的像素数。步骤5在“辅助功能”区域中指定下列选项：标题：提供了一个显示在表格外的表格标题。5.3导入和导出表格式数据对齐标题：指定表格标题相对于表格的显示位置。摘要：给出表格的说明。屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。步骤6单击“确定”按钮。可以将在另一个应用程序（例如MicrosoftExcel）中创建，并以分隔文本的格式（其中的项以制表符、逗号、冒号、分号或其他分隔符隔开）保存的表格式数据导入到Dreamweaver中，并设置为表格的格式。也可以将表格数据从Dreamweaver导出到文本文件中，相邻单元格的内容由分隔符隔开。可以使用逗号、冒号、分号或空格作为分隔符。当导出表格时，将导出整个表格，不能选择导出部分表格。提示：如果只需要表格中的某些数据（例如前六行或前六列），则复制包含这些数据的单元格，将这些单元格粘贴到表格外（创建新表格），然后导出这个新表格。5.3.1导入表格数据选择“文件”|“导入”|“表格式数据”命令。选择“插入”|“表格对象”|“导入表格式数据”命令。数据文件：输入要导入的文件的名称。单击“浏览”按钮选择一个文件。若要导入表格数据，具体操作步骤如下：步骤1执行下列操作之一：步骤2打开“导入表格式数据”对话框，输入有关包含数据的文件的信息，如右图所示。定界符：在下拉列表框中选择导入的文件中所使用的分隔符。如果选择“其他”，在其右侧会出现文本框，输入文件中使用的定界符。注意：确保指定保存数据文件时使用的定界符。如果未能指定定界符，则无法正确地导入文件，也无法在表格中对您的数据进行正确的格式设置。若要导出表格，具体操作步骤如下：步骤1将插入点放置在表格中的任意单元格中。步骤2选择“文件”|“导出”|“表格”命令。5.3.2导出表格表格宽度：将创建表格的宽度。选择“匹配内容”单选按钮，可使每个列足够宽以适应该列中最长的文本字符串。选择“设置为”单选按钮，将以像素为单位指定固定的表格宽度，或按占浏览器窗口宽度的百分比指定表格宽度。单元格边距：输入单元格内容和单元格边框之间的像素数。单元格间距：输入相邻的表格单元格之间的像素数。格式化首行：从下拉列表框中选择应用于表格首行的格式设置：无格式、粗体、斜体或加粗斜体。边框：输入表格边框的宽度（以像素为单位）。步骤3单击“确定”按钮。定界符：在下拉列表框中选择在导出的文件中隔开各项的分隔符。步骤3打开“导出表格”对话框，指定导出表格的选项，如右图所示。步骤4单击“导出”按钮。步骤5打开“表格导出为”对话框，输入文件名称，单击“保存”按钮。换行符：在下拉列表框中选择将在哪个操作系统中打开导出的文件：Windows、Macintosh还是UNIX（不同的操作系统具有不同的指示文本行结尾的方式）。5.4选择表格元素可以一次选择整个表、行或列。也可以选择一个或多个单独的单元格。当将鼠标指针移动到表格、行、列或单元格上时，Dreamweaver将高亮显示选择区域中的所有单元格，以便用户确切了解选中了哪些单元格。当表格没有边框、单元格跨多列或多行或者表格嵌套时，这一点很有用。可以在首选参数中更改高亮颜色。定界符：在下拉列表框中选择在导出的文件中隔开各项的分隔符。步骤3打开“导出表格”对话框，指定导出表格的选项，如右图所示。步骤4单击“导出”按钮。步骤5打开“表格导出为”对话框，输入文件名称，单击“保存”按钮。换行符：在下拉列表框中选择将在哪个操作系统中打开导出的文件：Windows、Macintosh还是UNIX（不同的操作系统具有不同的指示文本行结尾的方式）。提示：如果将鼠标指针定位到表格边框上，则按住Ctrl键，则该表格的整个表格结构（即表格中的所有单元格）将高亮显示。当表格有嵌套并且希望查看其中一个表格的结构时，这一点很有用。若要更改用于选择表格元素的高亮显示颜色，具体操作步骤如下：步骤1选择“编辑”|“首选参数”命令，打开“首选参数”对话框。5.4.1更改表格元素的高亮显示颜色步骤2从左侧的“分类”列表框中选择“标记色彩”，如右图所示。步骤3进行下面其中一项更改：要更改表格元素的高亮颜色，单击“鼠标滑过”颜色框并使用颜色选择器来选择一种高亮颜色，或者在文本框中输入高亮颜色的十六进制值。单击表格的左上角、表格的顶边缘或底边缘的任何位置或者行或列的边框。若要选择整个表格，执行下列操作之一：5.4.2选取表格注意：这些选项会影响鼠标指针所到之处Dreamweaver高亮显示的所有对象，例如层和“布局”模式视图表格及单元格。步骤4单击“确定”按钮。若要对表格元素启用或禁用高亮显示功能，选择或取消选择“鼠标滑过”右侧的“显示”复选框。注意：当用户可以选择表格时，鼠标指针会变成表格网格图标（除非单击行或列边框）。单击某个表格单元格，然后在“文档”窗口左下角的标签选择器中选择table标签。单击某个表格单元格，然后选择“修改”|“表格”|“选择表格”命令。若要选择单个或多个行或列，具体操作步骤如下：步骤1定位鼠标指针使其指向行的左边缘或列的上边缘。步骤2当鼠标指针变为选择箭头或时，单击以选择单个行或列，或进行拖动以选择多个行或列，如下图所示。5.4.3选择行或列所选表格的下边缘和右边缘出现选择柄，如右图所示。单击某个表格单元格，单击表格标题菜单，然后选择“选择表格”，如右图所示。单击单元格，然后在“文档”窗口左下角的标签选择器中选择td标签。按住Ctrl键单击要选择的单元格。单击单元格，然后选择“编辑”|“全选”命令。提示：也可以单击列标题，从下拉菜单中选择“选择列”命令，如右图所示。可以选择单个单元格、一行单元格或单元格块或者不相邻的单元格。5.4.4选择单元格1．选择单个单元格若要选择单个单元格，执行下列操作之一：提示：选择了一个单元格后再次选择“编辑”|“全选”可以选择整个表格。从一个单元格拖到另一个单元格。单击一个单元格，在同一个单元格中按住Ctrl键的同时单击以选中它，然后按住Shift键单击另一个单元格。若要选择一行或矩形的单元格块，执行下列操作之一：若要选择不相邻的单元格，在按住Ctrl键的同时单击要选择的单元格、行或列。如果按住Ctrl键单击尚未选中的单元格、行或列，则会将其选中。如果它已经被选中，则再次单击会将其从选择中删除。3．选择不相邻的单元格2．选择一行或矩形的单元格块这两个单元格定义的直线或矩形区域中的所有单元格都将被选中。5.5使用“扩展表格”模式编辑表格“扩展表格”模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以选择表格中的项目或者精确地放置插入点。例如，可能扩展一个表格以便将插入点放置在图像的左边或右边，从而避免无意中选中该图像或表格单元格，如下图所示。注意：一旦做出选择或放置插入点，应该回到“设计”视图的“标准”模式来进行编辑。调整大小等的一些可视操作在“扩展表格”模式中不会产生预期结果。5.5.1切换到“扩展表格”模式选择“查看”|“表格模式”|“扩展表格模式”命令。在“插入”工具栏的“布局”类别中单击“扩展表格模式”按钮。若要切换到“扩展表格”模式，具体操作步骤如下：步骤1确保正在“设计”视图中工作。步骤2执行下列操作之一：在“文档”窗口的顶部出现标有“扩展表格模式”的条，如右图所示。Dreamweaver可向页面上的所有表格添加单元格边距与间距，并增加表格边框。5.6设置表格和单元格的格式可以通过设置表格及表格单元格的属性或将预先设置的设计应用于表格来更改表格的外观。若要退出“扩展表格”模式，执行下列操作之一：5.5.2退出“扩展表格”模式在“文档”窗口顶部标有“扩展表格模式”的条中，单击“退出”。选择“查看”|“表格模式”|“标准模式”命令。在“插入”工具栏的“布局”类别中单击“标准模式”按钮。5.6.1查看和设置表格、单元格、行和列的属性水平：指定单元格、行或列