关于表格
表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成;每行又由一个或多个单元格组成。虽然 HTML 代码中通常不明确指定列,但 Dreamweaver 允许您操作列、行和单元格。
当选定了表格或表格中有插入点时,Dreamweaver 会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些菜单可以快速访问与表格相关的常用命令。可以启用或禁用宽度和菜单。
如果您未看到表格的宽度或列的宽度,则说明没有在 HTML 代码中指定该表格或列的宽度。如果出现两个数,则说明“设计”视图中显示的可视宽度与 HTML 代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小,或者添加到单元格中的内容比该单元格的设置宽度大时,会出现这种情况。
例如,如果您将某列的宽度设置为 200 像素,而添加的内容将宽度延长为 250 像素,则该列将显示两个数:200(代码中指定的宽度)和 (250)(带括号,表示该列呈现在屏幕上的可视宽度)。
注:您还可以使用 CSS 定位来对页进行布局。
HTML 中的表格格式设置优先顺序
当在“设计”视图中对表格进行格式设置时,您可以设置整个表格或表格中所选行、列或单元格的属性。如果将整个表格的某个属性(例如背景颜色或对齐)设置为一个值,而将单个单元格的属性设置为另一个值,则单元格格式设置优先于行格式设置,行格式设置又优先于表格格式设置。
表格格式设置的优先顺序如下:
单元格
行数
表格
例如,如果将单个单元格的背景颜色设置为蓝色,然后将整个表格的背景颜色设置为黄色,则蓝色单元格不会变为黄色,因为单元格格式设置优先于表格格式设置。
注:当您设置列的属性时,Dreamweaver 更改对应于该列中每个单元格的 td 标签的属性。
关于拆分和合并表格单元格
只要整个选择部分的单元格形成一行或一个矩形,您便可以合并任意数目的相邻的单元格,以生成一个跨多个列或行的单元格。您可以将单元格拆分成任意数目的行或列,而不管之前它是否是合并过的。Dreamweaver 自动重新构造表格(添加任何必需的 colspan 或 rowspan 属性),以创建指定的排列方式。
在下面的示例中,前两行中间的单元格已经合并成一个跨两行的单元格。
插入表格并添加内容
使用“插入”面板或“插入”菜单来创建一个新表格。然后,按照在表格外添加文本和图像的方式,向表格单元格中添加文本和图像。
注:布局模式功能从 Dreamweaver CS4 开始已被弃用。布局模式使用布局表格创建页面布局,而 Adobe 已不再推荐这样做。
导入和导出表格式数据
可以将在另一个应用程序(例如 Microsoft Excel)中创建并以分隔文本的格式(其中的项以制表符、逗号、冒号或分号隔开)保存的表格式数据导入到 Dreamweaver 中并设置为表格格式。
您也可以将表格数据从 Dreamweaver 导出到文本文件中,相邻单元格的内容由分隔符隔开。您可以使用逗号、冒号、分号或空格作为分隔符。当导出表格时,将导出整个表格,您不能选择导出部分表格。
如果只需要表格中的某些数据(例如前六行或前六列),则复制包含这些数据的单元格,将这些单元格粘贴到表格外(创建新表格),然后导出这个新表格。
导入表格数据
导出表格
选择表格元素
可以一次选择整个表、行或列。也可以选择一个或多个单独的单元格。
当您在表格、行、列或单元格上移动鼠标指针时,Dreamweaver 将高亮显示选择区域中的所有单元格,以使您知道将选择哪些单元格。当您的表格没有边框、单元格跨多列或多行或者表格嵌套时,这一点很有用。可以在首选参数中更改高亮颜色。
如果您将鼠标指针定位到表格边框上,然后按住 Ctrl (Windows) 或 Command (Macintosh),则将高亮显示该表格的整个表格结构(即表格中的所有单元格)。当您的表格有嵌套并且希望查看其中一个表格的结构时,这一点很有用。
选择整个表格
执行下列操作之一:
单击表格的左上角、表格的顶缘或底缘的任何位置或者行或列的边框。
注:当您可以选择表格时,鼠标指针会变成表格网格图标
(除非您单击行或列边框)。
单击某个表格单元格,然后在“文档”窗口左下角的标签选择器中选择 <table> 标签。
单击某个表格单元格,然后选择“修改”>“表格”>“选择表格”。
单击某个表格单元格,单击表格标题菜单,然后选择“选择表格”。所选表格的下缘和右缘出现选择柄。
选择单个或多个行或列
选择单个列
选择单个单元格
执行下列操作之一:
单击单元格,然后在“文档”窗口左下角的标签选择器中选择 <td> 标签。
按住 Ctrl 单击 (Windows) 或按住 Command 单击 (Macintosh) 该单元格。
单击单元格,然后选择“编辑”>“全选”。
选择了一个单元格后再次选择“编辑”>“全选”可以选择整个表格。
选择一行或矩形的单元格块
执行下列操作之一:
从一个单元格拖到另一个单元格。
单击一个单元格,然后按住 Ctrl (Windows) 或 Command (Macintosh) 单击以选中该单元格,接着按住 Shift 单击另一个单元格。
这两个单元格定义的直线或矩形区域中的所有单元格都将被选中。
选择不相邻的单元格
按住 Ctrl (Windows) 或 Command (Macintosh) 单击要选择的单元格、行或列。
如果您按住 Ctrl 或 Command 单击的单元格、行或列尚未选中,则会添加到选择区域中。如果已将其选中,则再次单击会将其从选择中删除。
更改选择表格元素时的高亮颜色
选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。
从左侧的“分类”列表中选择“高亮显示”,进行以下更改之一,然后单击“确定”。
要更改表格元素的高亮颜色,请单击“鼠标滑过”颜色框并使用颜色选择器来选择一种高亮颜色(或在文本框中输入高亮颜色的十六进制值)。
若要对表格元素启用或禁用高亮显示功能,请选择或取消选择“鼠标滑过”的“显示”选项。
注:这些选项会影响当鼠标指针滑过时 Dreamweaver 高亮显示的所有对象,例如绝对定位的元素(AP 元素)。
设置表格属性
您可以使用属性检查器编辑表格。
设置单元格、行或列属性
您可以使用属性检查器编辑表格中的单元格和行。
使用扩展表格模式更容易地编辑表格
“扩展表格”模式临时向文档中的所有表格添加单元格边距和间距,并且增加表格的边框以使编辑操作更加容易。利用这种模式,您可以选择表格中的项目或者精确地放置插入点。
例如,您可能扩展一个表格以便将插入点放置在图像的左边或右边,从而避免无意中选中该图像或表格单元格。
A.标准模式下的表格
B.扩展表格模式下的表格
注:一旦做出选择或放置插入点,您应该回到“设计”视图的“标准”模式来进行编辑。诸如调整大小之类的一些可视操作在“扩展表格”模式中不会产生预期结果。
切换到扩展表格模式
如果您使用的是“代码”视图,请选择“查看”>“设计”或“查看”>“代码和设计”(在“代码”视图下无法切换到“扩展表格”模式)。
执行下列操作之一:
选择“查看”>“表格模式”>“扩展表格模式”。
在“插入”面板的“布局”类别中,单击“扩展表格模式”。
“文档”窗口的顶部会出现标有“扩展表格模式”的条。Dreamweaver 会向页上的所有表格添加单元格边距与间距,并增加表格边框。
切换出扩展表格模式
执行下列操作之一:
在“文档”窗口顶部标有“扩展表格模式”的条中,单击“退出”。
选择“查看”>“表格模式”>“标准模式”。
在“插入”面板的“布局”类别中,单击“标准模式”。
设置表格和单元格的格式
可以通过设置表格及表格单元格的属性或将预先设置的设计应用于表格来更改表格的外观。在设置表格和单元格的属性前,请注意格式设置的优先顺序为单元格、行和表格。
请按照设置表格外文本格式的过程,设置表格单元格内文本的格式。
更改表格、行、单元格或列的格式
若要在“代码”视图中添加或编辑表格的辅助功能值,请执行以下操作:
在代码中编辑适当的属性。
若要快速找到代码中的标签,请单击表格,然后选择“文档”窗口底部的标签选择器中的 <table> 标签。
在“设计”视图中添加或编辑表格的辅助功能值
若要编辑表格题注,请高亮显示此题注,然后键入新题注。
若要编辑题注对齐,请将插入点放置在表格的题注中,右键单击 (Windows) 或按住 Control 单击 (Macintosh),然后选择“编辑标签代码”。
若要编辑表格摘要,请选择该表格,右键单击 (Windows) 或按住 Control 单击 (Macintosh),然后选择“编辑标签”。
调整表格、列和行的大小
调整表的大小
您可以调整整个表格或每个行或列的大小。当调整整个表格的大小时,表格中的所有单元格按比例更改大小。如果表格的单元格指定了明确的宽度或高度,则调整表格大小将更改“文档”窗口中单元格的可视大小,但不更改这些单元格的指定宽度和高度。
您可以通过拖动表格的一个选择柄来调整表格的大小。当选中了表格或插入点位于表格中时,Dreamweaver 将在该表格的顶部或底部显示表格宽度和表格标题菜单。
有时 HTML 代码中设置的列宽度与它们在屏幕上的外观宽度不匹配。发生这种情况时,您可以使宽度一致。Dreamweaver 中可以显示表格与列的宽度和标题菜单,能够帮助您对表格进行布局;您可以根据需要启用或禁用宽度和菜单。
调整列和行的大小
可在属性检查器中或通过拖动列或行的边框来更改列宽或行高。如果调整大小比较麻烦,可以清除列宽或行高并重新开始。
注:您还可以使用“代码”视图直接在 HTML 代码中更改单元格的宽度和高度。
当选中了表格或插入点位于表格中时,Dreamweaver 将在列的顶部或底部显示列宽度和列标题菜单;您可以根据需要启用或禁用列标题菜单。
调整表格、列和行的大小
调整表格大小
选择表格。
若要在水平方向调整表格的大小,请拖动右边的选择柄。
若要在垂直方向调整表格的大小,请拖动底部的选择柄。
若要在两个方向调整表格的大小,请拖动右下角的选择柄。
更改列宽度并保持整个表的宽度不变
拖动您想更改的列的右边框。
相邻列的宽度也更改了,因此实际上调整了两列的大小。可视化反馈将显示如何对列进行调整;表格的总度不改变。
注:在以百分比形式指定宽度(而不是以像素指定宽度)的表格中,如果您拖动最右侧列的右边框,整个表格的宽度将会变化,并且所有的列都会成比例地变宽或变窄。
更改某个列的宽度并保持其它列的大小不变
按住 Shift,然后拖动列的边框。
这个列的宽度就会改变。可视化反馈将显示各列如何调整;表的总宽度将更改以容纳正在调整的列。
以可视方式更改行高
拖动行的下边框。
使代码中的列宽与可视宽度一致
清除表格中所有设置的宽度和高度
选择表格。
执行下列操作之一:
选择“修改”>“表格”>“清除单元格宽度”或“修改”>“表格”>“清除单元格高度”。
在属性检查器(“窗口”>“属性”)中,单击“清除行高”按钮
或“清除列宽”按钮
。
单击表格标题菜单,然后选择“清除所有高度”或“清除所有宽度”。
清除设置的列宽度
在列中单击,然后单击列标题菜单,选择“清除列宽”。
启用或禁用表格和列的宽度和菜单
选择“查看”>“可视化助理”>“表格宽度”。
右键单击 (Windows) 或按住 Control 单击 (Macintosh) 表格,然后选择“表格”>“表格宽度”。
添加及删除行和列
若要添加和删除行和列,请使用“修改”>“表格”或列标题菜单。
在表格的最后一个单元格中按 Tab 会自动在表格中另外添加一行。
添加单个行或列
单击某个单元格并执行下列操作之一:
选择“修改”>“表格”>“插入行”或“修改”>“表格”>“插入列”。
在插入点的上面出现一行或在插入点的左侧出现一列。
单击列标题菜单,然后选择“左侧插入列”或“右侧插入列”。
添加多行或多列
删除行或列
执行下列操作之一:
单击要删除的行或列中的一个单元格,然后选择“修改”>“表格”>“删除行”或“修改”>“表格”>“删除列”。
选择完整的一行或列,然后选择“编辑”>“清除”或按 Delete。
使用属性检查器添加或删除行或列
选择表格。
在属性检查器(“窗口”>“属性”)中,执行下列操作之一:
若要添加或删除行,请增加或减小“行”值。
若要添加或删除列,请增加或减小“列”值。
注:当删除包含数据的行和列时,Dreamweaver 不发出警告。
拆分和合并单元格
使用属性检查器或“修改”>“表格”子菜单中的命令拆分或合并单元格。
合并表格中的两个或多个单元格
拆分单元格
增加或减少单元格所跨的行或列的数目
执行下列操作之一:
选择“修改”>“表格”>“增加行宽”或“修改”>“表格”>“增加列宽”。
选择“修改”>“表格”>“减小行宽”或“修改”>“表格”>“减小列宽”。
复制、粘贴和删除单元格
您可以一次复制、粘贴或删除单个表格单元格或多个单元格,并保留单元格的格式设置。
您可以在插入点粘贴单元格或通过粘贴替换现有表格中的所选部分。若要粘贴多个表格单元格,剪贴板的内容必须和表格的结构或表格中将粘贴这些单元格的所选部分兼容。
剪切或复制表格单元格
粘贴表格单元格
删除单元格内容,但使单元格保持原样
删除包含合并单元格的行或列
选择行或列。
选择“修改”>“表格”>“删除行”或“修改”>“表格”>“删除列”。
嵌套表格
嵌套表格是在另一个表格的单元格中的表格。可以像对任何其它表格一样对嵌套表格进行格式设置;但是,其宽度受它所在单元格的宽度的限制。
单击现有表格中的一个单元格。
选择“插入”>“表格”,设置“表格”选项,然后单击“确定”。
对表格进行排序
您可以根据单个列的内容对表格中的行进行排序。您还可以根据两个列的内容执行更加复杂的表格排序。
您不能对包含 colspan 或 rowspan 属性的表格(即包含合并单元格的表格)进行排序。