Dreamweaver CC教程:调整表格、列和行的大小
Dreamweaver CC教程:调整表格、列和行的大小
调整表格、列和行的大小
调整表格大小
您可以调整整个表格或每个行或列的大小。当调整整个表格的大小时,表格中的所有单元格按比例更改大小。如果表格的单元格指定了明确的宽度或高度,则调整表格大小将更改“文档”窗口中单元格的可视大小,但不更改这些单元格的指定宽度和高度。
您可以通过拖动表格的一个选择柄来调整表格的大小。当选中了表格或插入点位于表格中时,Dreamweaver 将在该表格的顶部或底部显示表格宽度和表格标题菜单。
有时 HTML 代码中设置的列宽度与它们在屏幕上的外观宽度不匹配。发生这种情况时,您可以使宽度一致。Dreamweaver 中可以显示表格与列的宽度和标题菜单,能够帮助您对表格进行布局;您可以根据需要启用或禁用宽度和菜单。
调整列和行的大小
可在属性检查器中或通过拖动列或行的边框来更改列宽或行高。如果调整大小比较麻烦,可以清除列宽或行高并重新开始。
注意:
您还可以使用代码视图直接在 HTML 代码中更改单元格的宽度和高度。
当选中了表格或插入点位于表格中时,Dreamweaver 将在列的顶部或底部显示列宽度和列标题菜单;您可以根据需要启用或禁用列标题菜单。
调整表格大小
选择表格。如果采用实时视图,选择表格时将会显示“元素显示”。单击三明治图标,进入表格格式设置模式。
要在实时视图中退出表格格式设置模式,请按 Esc 键或单击表格外边的区域。您可以使用“编辑”>“表格”菜单选项进一步修改表格。
注意:“编辑”>“表格”菜单中的选项会因所选的是整个表格还是单个单元格而异。在实时视图中,当选择整个表格时,“元素显示”会显示“表格”,而当选择特定的单元格时,则会显示“td”。若要从单元格格式设置切换为表格格式模式,请单击表格边框。
更改列宽度并保持整个表的宽度不变
相邻列的宽度也更改了,因此实际上调整了两列的大小。可视化反馈将显示如何对列进行调整;表格的总度不改变。
在保持表格宽度不变的前提下更改列宽
注意:
在以百分比形式指定宽度(而不是以像素指定宽度)的表格中,如果您拖动最右侧列的右边框,整个表格的宽度将会变化,并且所有的列都会成比例地变宽或变窄。
更改某个列的宽度并保持其他列的大小不变
这个列的宽度就会改变。可视化反馈将显示各列如何调整;表的总宽度将更改以容纳正在调整的列。
在保持其他列的宽度不变的前提下更改列宽
以可视方式更改行高
拖动行的下边框。
使代码中的列宽与可视宽度一致
1、单击一个单元格。
2、单击表格标题菜单,然后选择“使所有宽度一致”。
Dreamweaver 将重置代码中指定的宽度以匹配可视宽度。
清除表格中所有设置的宽度和高度
1、选择表格。
2、执行下列操作之一:
清除设置的列宽度
在列中单击,然后单击列标题菜单,选择“清除列宽”。
启用或禁用表格和列的宽度和菜单(在“设计”视图中)
选择“视图”>“设计视图选项”>“可视化助理”>“表格宽度”。
相关内容
-
Dreamweaver CC教程:Dreamweaver 支持的编程语言
Dreamweaver CC教程:Dreamweaver 支持的编程语言,编程语言,支...
-
Dreamweaver CC教程:正则表达式
Dreamweaver CC教程:正则表达式,正则表达式,搜索,换行符,教程,...
-
Dreamweaver CC教程:在代码视图中预览图像和颜色
Dreamweaver CC教程:在代码视图中预览图像和颜色,图像,教程,视...
-
Dreamweaver CC教程:提取 JavaScript
Dreamweaver CC教程:提取 JavaScript,文件,选择,脚本,教程,文...
-
Dreamweaver CC教程:设置 PHP 首选参数
Dreamweaver CC教程:设置 PHP 首选参数,教程,站点,参数,设置,...
-
Dreamweaver CC教程:分析代码
Dreamweaver CC教程:分析代码,教程,支持,红色,错误,显示,检查,...
-
Dreamweaver CC教程:自定义代码主题
Dreamweaver CC教程:自定义代码主题,自定义,教程,选择,默认,主...
-
Dreamweaver CC教程:用多个光标添加或更改文本
Dreamweaver CC教程:用多个光标添加或更改文本,光标,更改,文本...
-
Dreamweaver CC教程:启用linting并指定linting规
Dreamweaver CC教程:启用linting并指定linting规则,启用,文件,...
-
Dreamweaver CC教程:清理代码
Dreamweaver CC教程:清理代码,清理,删除,文档,教程,标签,用于,...
-
Dreamweaver CC教程:在“设计”视图中
Dreamweaver CC教程:在“设计”视图中编写和编辑脚...
-
Dreamweaver CC教程:编辑服务器端包含的内容
Dreamweaver CC教程:编辑服务器端包含的内容,服务器端,教程,检...
-
Dreamweaver CC教程:编辑代码片段
Dreamweaver CC教程:编辑代码片段,代码片段,教程,字段,对话框,...
-
Dreamweaver CC教程:验证 XML 文档
Dreamweaver CC教程:验证 XML 文档,文档,验证,教程,浏览器,报...
-
Dreamweaver CC教程:如何充分利用代码片段
Dreamweaver CC教程:如何充分利用代码片段,代码片段,教程,编码...