将插入点放在您希望表格显示的位置。
了解如何使用表格在网站中显示内容。 此外,还可了解如何拆分和合并表格单元格以及如何导入和导出表格式数据。
表格是在 HTML 页面上显示表格数据的强大工具。表格由一行或多行组成;每行又由一个或多个单元格组成。 虽然列通常不在 HTML 代码中明确指定,但 Dreamweaver 允许您操纵列以及行和单元格。
建议您不要使用表格来布局网页。尝试使用入门模板("文件">"新建">"入门模板")来开始使用预设计的布局。您可以在这些布局中插入您自己的文本和图像,并使用 CSS 设置其样式。
HTML 中的表格格式优先级
当在“设计”视图中对表格进行格式设置时,您可以设置整个表格或表格中所选行、列或单元格的属性。 如果将整个表格的某个属性(例如背景颜色或对齐)设置为一个值,而将单个单元格的属性设置为另一个值,则单元格格式设置优先于行格式设置,行格式设置又优先于表格格式设置。
表格格式设置的优先顺序如下:
- 单元格
- 行数
- 表格
例如,如果您将单个单元格的背景颜色设置为蓝色,然后将整个表格的背景颜色设置为黄色,蓝色单元格不会变为黄色,因为单元格格式优先于表格格式。
当您在列上设置属性时,Dreamweaver 会更改与列中每个单元格对应的 td 标记的属性。
关于拆分和合并表格单元格
您可以合并任何数量的相邻单元格(只要整个选择是一条线或一个矩形单元格),以产生跨越多个列或行的单个单元格。您可以将单元格拆分为任何数量的行或列,无论它之前是否已合并。Dreamweaver 会自动重构表格(添加任何必要的 colspan 或 rowspan 属性)以创建指定的排列。
在以下示例中,前两行中间的单元格已合并为跨越两行的单个单元格。
插入表格并添加内容
使用插入面板或"插入"菜单创建新表格。然后,向表格单元格添加文本和图像的方法与在表格外添加文本和图像的方法相同。
如果您的文档为空白,您只能将插入点放在文档的开头。
选择“插入”>“表格”。
在插入面板的 HTML 类别中,单击"表格"。
行
确定表格行的数目。
列
确定表格列的数目。
表格宽度
指定表格的宽度(以像素为单位或浏览器窗口宽度的百分比)。
边框粗细
指定表格边框的宽度(以像素为单位)。
单元格间距
决定相邻的表格单元格之间的像素数。
如果没有明确指定边框粗细或单元格间距和单元格边距的值,则大多数浏览器都按边框粗细和单元格边距设置为 1、单元格间距设置为 2 来显示表格。 若要确保浏览器显示表格时不显示边距或间距,请将“单元格边距”和“单元格间距”设置为 0。
单元格边距
确定单元格边框与其内容之间的像素数。
无
对表格不启用列或行标题。
左对齐
使表格的第一列成为标题列,以便您可以为表格的每个 行 输入标题。
顶对齐
使表格的第一行成为标题行,以便您可以为表格的每个 列 输入标题。
两者兼有
使您能够在表格中输入列标题和行标题。
最好使用标题以方便使用屏幕阅读器的 Web 站点访问者。 屏幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪表格信息。
标题
提供显示在表格外部的表格标题。
摘要
给出了表格的说明。 屏幕阅读器会读取摘要文本,但该文本不会显示在用户的浏览器中。
导入和导出表格
您可以将在其他应用程序(如 Microsoft Excel)中创建并以分隔文本格式(项目以制表符、逗号、冒号或分号分隔)保存的表格数据导入到 Dreamweaver 中,并将其格式化为表格。
您也可以将表格数据从 Dreamweaver 导出到文本文件中,相邻单元格的内容以分隔符分隔。您可以使用逗号、冒号、分号或空格作为分隔符。导出表格时,会导出整个表格;您无法选择表格的部分内容进行导出。
如果您只需要表格中的部分数据(例如,前六行或前六列),请复制包含该数据的单元格,将这些单元格粘贴到表格外(以创建新表格),然后导出新表格。
导入表格数据
选择"文件">"导入">"导入表格数据"。
数据文件
要导入的文件的名称。 单击"浏览"按钮选择文件。
分隔符
要导入的文件中所使用的分隔符。
如果您选择“其它”,则弹出菜单的右侧会出现一个文本框。 输入您的文件中使用的分隔符。
将分隔符指定为先前保存数据文件时所使用的分隔符。 如果不这样做,则无法正确地导入文件,也无法在表格中对您的数据进行正确的格式设置。
表格宽度
表格的宽度。
选择“匹配内容”使每个列足够宽以适应该列中最长的文本字符串。
选择“设置”以像素为单位指定固定的表格宽度,或按占浏览器窗口宽度的百分比指定表格宽度。
边框
指定表格边框的宽度(以像素为单位)。
单元格边距
单元格内容与单元格边界之间的像素数。
单元格间距
相邻的表格单元格之间的像素数。
如果没有明确指定边框、单元格间距和单元格边距的值,则大多数浏览器都按边框和单元格边距设置为 1、单元格间距设置为 2 来显示表格。 若要确保浏览器显示表格时不显示边距或间距,请将“单元格边距”和“单元格间距”设置为 0。 若要在边框设置为 0 时查看单元格和表格边框,请选择“查看”>“可视化助理”>“表格边框”。
格式化首行
确定是否对表格的顶行应用格式,以及应用什么格式。从 4 个格式选项中选择:无格式、粗体、斜体或粗体斜体。
导出表格
分隔符
指定应使用哪个分隔符字符来分隔导出文件中的项目。
换行符
指定您将在哪个操作系统中打开导出的文件:Windows、Macintosh 或 UNIX。(不同的操作系统有不同的方式来指示文本行的结束。)
选择表格元素
您可以一次选择整个表格、行或列。您也可以选择一个或多个单元格。
当您将指针移动到表格、行、列或单元格上时,Dreamweaver 会突出显示该选择内容中的所有单元格,以便您了解将选择哪些单元格。这在您处理无边框表格、跨多列或多行的单元格或嵌套表格时很有用。您可以在偏好设置中更改突出显示颜色。
如果您将指针定位在表格边框上,然后按住 Control 键(Windows)或 Command 键(Macintosh),则会突出显示表格的整个结构(即表格中的所有单元格)。这在您有嵌套表格并想查看其中一个表格的结构时很有用。
选择整个表格
执行以下任一操作来选择表格:
- 单击表格的左上角来选择表格。
- 在表格单元格中单击,然后在"文档"窗口左下角的标记选择器中选择标记。
- 单击某个表格单元格,单击表格标题菜单,然后选择“选择表格”。 所选表格的下缘和右缘出现选择柄。
- 在表格单元格中单击,然后选择"编辑">"表格">"选择表格"。
选择单独或多个行\n或列
选择单个列
选择单个单元格
- 单击单元格,然后在“文档”窗口左下角的标签选择器中选择 <td> 标签。
- 按住 Ctrl 单击 (Windows) 或按住 Command 单击 (Macintosh) 该单元格。
选择一行或矩形\n单元格块
从一个单元格拖到另一个单元格。
单击一个单元格,然后按住 Ctrl (Windows) 或 Command (Macintosh) 单击以选中该单元格,接着按住 Shift 单击另一个单元格。
选择不相邻的单元格
如果您按住 Ctrl 键单击或按住 Command 键单击\n的每个单元格、行或列尚未选择,则会将其添加到选择内容中。如果已经\n选择,则会将其从选择内容中移除。
更改\n表格元素的突出显示颜色
要更改表格元素的高亮颜色,请单击“鼠标滑过”颜色框并使用拾色器来选择一种高亮颜色(或在文本框中输入高亮颜色的十六进制值)。
若要对表格元素启用或禁用高亮显示功能,请选择或取消选择“鼠标滑过”的“显示”选项。
这些选项会影响当您将指针移动到对象上时 Adobe Dreamweaver 突出显示的所有对象。
设置表格属性
您\n可以使用属性检查器编辑表格。
表格 ID
表格的 ID。
行和列
表格中行和列的数量。
W
表格的宽度,以像素为单位或表示为占浏览器窗口宽度的百分比。
通常不需要设置表格的高度。
单元格边距
单元格内容与\n单元格边界之间的像素数。
单元格间距
相邻的表格单元格之间的像素数。
对齐
确定表格相对于同一段落中的其它元素(例如文本或图像)的显示位置。
“左对齐”沿其它元素的左侧对齐表格(因此同一段落中的文本在表格的右侧换行);“右对齐”沿其它元素的右侧对齐表格(文本在表格的左侧换行);“居中对齐”将表格居中(文本显示在表格的上方和/或下方)。 “缺省”指示浏览器应该使用其默认对齐方式。
当将对齐方式设置为“默认”时,其他内容不显示在表格的旁边。 若要在其他内容旁边显示表格,请使用“左对齐”或“右对齐”。
边框
指定表格边框的宽度(以像素为单位)。
如果没有明确指定边框、单元格间距和单元格边距的值,则大多数浏览器按边框和单元格边距均设置为 1 且单元格间距设置为 2 显示表格。 若要确保浏览器不显示表格中的边距和间距,请将“边框”、“单元格边距”和“单元格间距”都设置为 0。 若要在边框设置为 0 时查看单元格和表格边框,请选择“查看”>“可视化助理”>“表格边框”。
类
对该表格设置一个 CSS 类。
可能需要展开表格的属性检查器才能看到以下属性。 要展开表格的属性检查器,单击右下角的展开箭头。
清除列宽度"和"清除行高度
和“清除行高”从表格中删除所有明确指定的行高或列宽。
将表格宽度转换成像素
和"转换表格高度为像素"将表格中每列的宽度或\n高度设置为其当前像素宽度\n(也将整个表格的宽度设置为其当前像素\n宽度)。
将表格宽度转换成百分比
和"转换表格高度为百分比"将表格中每列的宽度或\n高度设置为其当前宽度(以\n文档窗口宽度的百分比表示)(也将整个\n表格的宽度设置为其当前宽度(以文档\n窗口宽度的百分比表示))。
如果您在文本框中输入了值,请按 Tab 键或 Enter 键\n(Windows) 或 Return 键 (Macintosh) 应用该值。
设置单元格、行或列属性
您可以使用属性检查器编辑\n表格中的单元格和行。
水平
指定单元格、行或列内容的\n水平对齐方式。您可以将内容对齐到单元格的左侧、\n右侧或中心,也可以指示浏览器\n使用其默认对齐方式(常规单元格通常为左对齐,\n标题单元格通常为居中对齐)。
垂直
指定单元格、行或列内容的\n垂直对齐方式。您可以将内容对齐到单元格的顶部、中部、\n底部或基准,或指示浏览器应\n使用其默认对齐方式(通常为中部对齐)。
宽和高
所选单元格的宽度和高度,以像素为单位或按整个表格宽度或高度的百分比指定。 若要指定百分比,请在值后面使用百分比符号 (%)。 若要让浏览器根据单元格的内容以及其它列和行的宽度和高度确定适当的宽度或高度,请将此域留空(默认设置)。
默认情况下,浏览器选择行高和列宽的依据是能够在列中容纳最宽的图像或最长的行。 这就是为什么当您将内容添加到某个列时,该列有时变得比表格中其他列宽得多的原因。
您可以按占表格总高度的百分比指定一个高度,但是浏览器中行可能不以指定的百分比高度显示。
背景
使用拾色器选择的单元格、列或行的背景颜色。
合并单元格
将所选的单元格、行或列合并为一个单元格。 只有当单元格形成矩形或直线的块时才可以合并这些单元格。
拆分单元格
将一个单元格分成两个或更多个单元格。 一次只能拆分一个单元格;如果选择了多个单元格,此按钮将被禁用。
不换行
防止换行,将给定单元格中的所有文本保持在一行上。如果启用了"不换行",单元格会加宽以容纳您键入或粘贴到单元格中的所有数据。(通常,单元格会水平展开以容纳单元格中最长的单词或最宽的图像,然后根据需要垂直展开以容纳其他内容。)
标题
将选定的单元格格式化为表格标题单元格。表格标题单元格的内容默认为粗体和居中。
您可以将宽度和高度指定为像素或百分比,并且可以在像素和百分比之间进行转换。
当您设置列的属性时,Dreamweaver 会更改与列中每个单元格对应的 td 标记的属性。但是,当您设置行的某些属性时,Dreamweaver 会更改 tr 标记的属性,而不是更改行中每个 td 标记的属性。当您对行中的所有单元格应用相同格式时,将格式应用于 tr 标记会生成更简洁的 HTML 代码。
设置表格和单元格的格式
您可以通过设置表格及其单元格的属性或将预设设计应用于表格来更改表格的外观。在设置表格和单元格属性之前,请注意格式设置的优先顺序是单元格、行和表格。
要设置表格单元格内文本的格式,请使用与设置表格外文本格式相同的步骤。
更改表格、行、单元格或列的格式
有关选项的更多信息,请单击属性检查器上的"帮助"图标。
当您设置列的属性时,Dreamweaver 会更改与列中每个单元格对应的 td 标记的属性。但是,当您设置行的某些属性时,Dreamweaver 会更改 tr 标记的属性,而不是更改行中每个 td 标记的属性。当您对行中的所有单元格应用相同格式时,将格式应用于 tr 标记会生成更简洁的 HTML 代码。
在"代码"视图中添加或编辑表格的辅助功能值
要快速定位代码中的标记,请在表格中单击,然后在"文档"窗口底部的标记选择器中选择 <table> 标记。
在"设计"视图中添加或编辑表格的辅助功能值
- 要编辑表格题注,请高亮显示题注并键入新题注。
要编辑题注对齐方式,请将\n插入点置于表格题注中,右键单击(Windows)或按住 Control 键单击\n(Macintosh),然后选择"编辑标记代码"。
要编辑表格摘要,请选择表格,右键单击\n(Windows)或按住 Control 键单击(Macintosh),然后选择"编辑标记代码"。
调整表格、列和行的大小
调整表的大小
您\n可以调整整个表格或单个行和列的大小。当\n您调整整个表格的大小时,表格中的所有单元格都会\n按比例更改大小。如果表格的单元格指定了明确的宽度或\n高度,调整表格大小会更改\n文档窗口中单元格的可视大小,但不会更改单元格的指定\n宽度和高度。
您可以通过\n拖动选择手柄来调整表格大小。当选择表格或插入点\n位于表格中时,Dreamweaver 会在表格的顶部或底部\n显示表格宽度以及表格页眉菜单。
有时 HTML\n代码中设置的列宽度与其在屏幕上的显示宽度不匹配。发生这种情况时,您可以使宽度保持一致。表格和列宽度\n以及页眉菜单在 Dreamweaver 中显示,可\n帮助您布置表格;您可以根据需要启用或禁用宽度\n和菜单。
调整列和行的大小
您可以在属性检查器中\n更改列的宽度或行的高度,\n也可以通过拖动列或行的边框来更改。如果调整大小时遇到问题,\n您可以清除列宽度或行高度并重新开始。
您\n还可以使用代码视图\n直接在 HTML 代码中更改单元格宽度和高度。
当选择表格或插入点\n位于表格中时,Dreamweaker 会在列的顶部或底部\n显示列宽度以及列页眉菜单;您可以根据需要\n启用或禁用列页眉菜单。
调整表格大小
选择表格。 如果采用实时视图,选择表格时将会显示“元素显示”。 单击三线图标以进入表格格式模式。
要水平调整表格大小,请拖动\n右侧的选择手柄。
要垂直调整表格大小,请拖动底部的选择\n手柄。
要在两个方向上调整表格大小,请拖动\n右下角的选择手柄。
要在实时视图中退出表格格式设置模式,请按 Esc 键或单击表格外边的区域。 您可以使用"编辑">"表格"菜单选项来进一步修改表格。
注意:“编辑”>“表格”菜单中的选项会因所选的是整个表格还是单个单元格而异。 在实时视图中,当选择整个表格时,“元素显示”会显示“表格”,而当选择特定的单元格时,则会显示“td”。 要从单元格格式切换到表格格式模式,请单击表格边框。
更改列的宽度并保持\n整个表格宽度
在设计视图中,拖动要更改的列的右边框。
相邻列的宽度也会更改,因此实际上\n调整了两个列的大小。可视反馈显示列将如何\n调整;整个表格宽度不会更改。
在\n具有基于百分比的宽度(而非像素)的表格中,如果您拖动\n最右侧列的右边框,整个表格的宽度都会更改,\n并且所有列都会按比例变宽或变窄。
更改列的宽度并保持\n其他列的大小
在设计视图中,按住 Shift 键并拖动列的边框。
这个列的宽度就会改变。 可视化反馈展开\n列的调整方式;表格的整体宽度会更改\n以适应您正在调整大小的列。
以可视方式更改行高
使代码中的列宽度与\n可视化宽度保持一致
Dreamweaver 重置代码中指定的宽度\n以匹配可视化宽度。
清除表格中所有设置的宽度或高度
选择"编辑">"表格">"清除单元格宽度",或"编辑">"表格">"清除单元格高度"。
在属性检查器(“窗口”>“属性”)中,单击“清除行高”按钮
或“清除列宽”按钮
。单击表格封面菜单,然后选择"全部清除"高度或"全部清除"宽度。
清除设置的列宽度
在设计视图中启用或禁用表格和列宽度及菜单
选择"视图">"设计视图选项">"可视化辅助工具">"表格宽度"。
添加及删除行和列
要添加和删除\n行和列,请使用"修改">"表格"或列封面菜单。
在表格的最后一个单元格中按 Tab 键会\n自动向表格添加另一行。
添加单个行或列
选择"编辑">"表格">"插入行"或"编辑">"表格">"插入列"。
在插入点的上面出现一行或在插入点的左侧出现一列。
单击列标题菜单,然后选择“左侧插入列”或“右侧插入列”。
添加多行或多列
选择"编辑">"表格">"插入行或列",完成对话框,然后单击"确定"。
插入
指示是插入行还是插入列。
行数或列数
要插入的行数或列数。
位置
指定新行或列应出现在\n所选单元格的行或列之前还是之后。
删除行或列
单击要删除的行或列中的单元格,然后选择"编辑">"表格">"删除行",或"编辑">"表格">"删除列"。
选择完整的行或列,然后按 Delete 键。
- 在属性检查器(“窗口”>“属性”)中,执行下列操作之一:
- 若要添加或删除行,请增加或减小“行”值。
- 若要添加或删除列,请增加或减小“列”值。
如果您正在删除包含数据的行和列,Dreamweaver 不会发出警告。
拆分和合并单元格
使用属性检查器或"编辑">"表格"子菜单中的选项来拆分或合并单元格。
合并表格中的两个或多个单元格
在下面的插图中,选择是一个单元格矩形,\n因此这些单元格可以合并。
在\n以下图解中,所选内容不是矩形,因此\n无法合并单元格。
选择"编辑">"表格">"合并单元格"。
在扩展的 HTML 属性检查器("窗口">"属性")中,单击"合并单元格"。
如果您看不到该按钮,请单击属性检查器右下角的展开箭头,以便看到所有选项。
单个单元格的内容放置在最终的合并单元格中。 所选的第一个单元格的属性将应用于合并的单元格。
拆分单元格
选择"编辑">"表格">"拆分单元格"。
在扩展的 HTML 属性检查器("窗口">"属性")中,单击"拆分单元格"。
如果没有看到此按钮,请单击属性检查器右下角的展开箭头,以便可以看到所有选项。
拆分单元格
指定将单元格拆分成行还是列。
行数/列数
指定要将单元格拆分成\n多少行或多少列。
增加或减少单元格跨越的\n行数或列数
选择"编辑">"表格">"增加行跨度",或"编辑">"表格">"增加列跨度"。
选择"编辑">"表格">"减少行跨度",或"编辑">"表格">"减少列跨度"。
复制、粘贴和删除单元格
您可以复制、粘贴或删除\n单个表格单元格或一次处理多个单元格,同时保留单元格的\n格式。
您可以在插入点粘贴单元格,也可以\n在现有表格的选定位置粘贴以替换选定内容。要粘贴多个\n表格单元格,剪贴板的内容必须与\n表格结构或表格中将要粘贴单元格的选定位置兼容。
剪切或复制表格单元格
在以下图解中,所选内容是矩形\n单元格,因此可以剪切或复制这些单元格。
在\n以下图解中,所选内容不是矩形,因此\n无法剪切或复制这些单元格。
如果您选择了整行或整列并选择\n"编辑">"剪切",则会从表格中移除整行或整列(而不仅仅是单元格的内容)。
粘贴表格单元格
若要用您正在粘贴的单元格替换现有的单元格,请选择一组与剪贴板上的单元格具有相同布局的现有单元格。 (例如,如果您复制或剪切了一块 3 x 2 的单元格,则可以选择另一块 3 x 2 的单元格通过粘贴进行替换。)
若要在特定单元格上方粘贴一整行单元格,请单击该单元格。
若要在特定单元格左侧粘贴一整列单元格,请单击该单元格。
如果剪贴板中的单元格不到一整行或一整列,并且您单击某个单元格然后粘贴剪贴板中的单元格,则您所单击的单元格和与它相邻的单元格可能(根据它们在表格中的位置)被您粘贴的单元格替换。
- 若要用粘贴的单元格创建一个新表格,请将插入点放置在表格之外。
如果您要将整行或整列粘贴到现有\n表格中,则会将这些行或列添加到表格中。如果您要粘贴\n单个单元格,则会替换所选单元格的内容。\n如果您要在表格外粘贴,则会使用这些行、列或单元格\n来定义新表格。
移除单元格内容但保持\n单元格完整
确保所选内容不完全由\n完整的行或列组成。
按 Delete 键。
如果在您选择\n"编辑">"清除"或按 Delete 键时只选择了完整的行或列,则会从表格中移除整行或整列,而不仅仅是其内容。
删除包含\n合并单元格的行或列
选择"编辑">"表格">"删除行",或"编辑">"表格">"删除列"。
嵌套表格
嵌套表格是指位于另一个表格的单元格内的表格。您可以像设置任何其他表格一样设置嵌套表格的格式;但是,其宽度受到所在单元格宽度的限制。
对表格进行排序
您可以根据单个列的内容对表格行进行排序。您也可以根据两列的内容执行更复杂的表格排序。
不能对包含 colspan 或 rowspan 属性的表格进行排序,即包含合并单元格的表格。
选择"编辑">"表格">"排序表格",在对话框中设置选项,然后单击"确定"。
排序方式
确定将使用哪个列的值对表格行进行排序。
顺序
确定是按字母顺序还是数值顺序对列进行排序,以及是按升序(A 到 Z,较小数字到较大数字)还是降序排列。
当列内容为数字时,请选择"数值"。对一位数和两位数列表应用字母排序会导致数字按单词排序(排序结果为 1、10、2、20、3、30),而不是按数字排序(排序结果为 1、2、3、10、20、30)。
再按/顺序
确定在不同列上进行辅助排序的排序顺序。在"然后按"弹出菜单中指定辅助排序列,在"顺序"弹出菜单中指定辅助排序顺序。
排序包含第一行
指定表格第一行应包含在排序中。如果第一行是不应移动的标题,请不要选择此选项。
对标题行进行排序
指定使用与正文行相同的条件对表格 thead 部分(如果有)中的所有行进行排序。(注意,thead 行保留在 thead 部分中,排序后仍显示在表格顶部。)有关 thead 标记的信息,请参阅"引用"面板(选择"帮助">"引用")。
对脚注行进行排序
指定使用与正文行相同的条件对表格 tfoot 部分(如果有)中的所有行进行排序。(注意,tfoot 行保留在 tfoot 部分中,排序后仍显示在表格底部。)有关 tfoot 标记的信息,请参阅"引用"面板(选择"帮助">"引用")。
使排序完成后所有行的颜色保持相同
指定表格行属性(如颜色)在排序后应保持与相同内容关联。如果您的表格行采用两种交替颜色进行格式设置,请不要选择此选项,以确保排序后的表格仍具有交替颜色的行。如果行属性特定于每行的内容,则选择此选项以确保这些属性在已排序的表格中与正确的行保持关联。