Dreamweaver CC教程:设置单元格、行或列属性
Dreamweaver CC教程:设置单元格、行或列属性
设置单元格、行或列属性
您可以使用属性检查器编辑表格中的单元格和行。
1、选择列或行。
2、在属性检查器(“窗口”>“属性”)中,设置以下选项:
水平
指定单元格、行或列内容的水平对齐方式。您可以将内容对齐到单元格的左侧、右侧或使之居中对齐,也可以指示浏览器使用其默认的对齐方式(通常常规单元格为左对齐,标题单元格为居中对齐)。
垂直
指定单元格、行或列内容的垂直对齐方式。您可以将内容对齐到单元格的顶端、中间、底部或基线,或者指示浏览器使用其默认的对齐方式(通常是中间)。
宽和高
所选单元格的宽度和高度,以像素为单位或按整个表格宽度或高度的百分比指定。若要指定百分比,请在值后面使用百分比符号 (%)。若要让浏览器根据单元格的内容以及其他列和行的宽度和高度确定适当的宽度或高度,请将此域留空(默认设置)。
默认情况下,浏览器选择行高和列宽的依据是能够在列中容纳最宽的图像或最长的行。这就是为什么当您将内容添加到某个列时,该列有时变得比表格中其他列宽得多的原因。
注意:
您可以按占表格总高度的百分比指定一个高度,但是浏览器中行可能不以指定的百分比高度显示。
背景
单元格、列或行的背景颜色(使用拾色器选择)。
合并单元格
将所选的单元格、行或列合并为一个单元格。只有当单元格形成矩形或直线的块时才可以合并这些单元格。
拆分单元格
将一个单元格分成两个或更多个单元格。一次只能拆分一个单元格;如果选择的单元格多于一个,则此按钮将禁用。
不换行
防止换行,从而使给定单元格中的所有文本都在一行上。如果启用了“不换行”,则当您键入数据或将数据粘贴到单元格时单元格会加宽来容纳所有数据。(通常,单元格在水平方向扩展以容纳单元格中最长的单词或最宽的图像,然后根据需要在垂直方向进行扩展以容纳其他内容。)
标题
将所选的单元格格式设置为表格标题单元格。默认情况下,表格标题单元格的内容为粗体并且居中。
注意:
您可以按像素或百分比指定宽度和高度,并且可以在像素和百分比之间互相转换。
注意:
当您设置列的属性时,Dreamweaver 会更改该列中每个单元格所对应的 td 标签的属性。但是,当您设置行的某些属性时,Dreamweaver 将更改 tr 标签的属性,而不是更改行中每个 td 标签的属性。在将同一种格式应用于行中的所有单元格时,将格式应用于 tr 标签会生成更加简明清晰的 HTML 代码。
3、按 Tab 或 Enter (Windows) 或 Return (Macintosh) 以应用该值。
相关内容
-
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教程:ECMAScript 6 linting
Dreamweaver CC教程:ECMAScript 6 linting,配置文件,设置,选择...
-
Dreamweaver CC教程:Linting 结果和输出面板
Dreamweaver CC教程:Linting 结果和输出面板,输出,教程,文档,...
-
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教程:编辑代码片段,代码片段,教程,字段,对话框,...