使用表格显示内容

  1. Dreamweaver 用户指南
  2. 简介
    1. 响应式网页设计基础知识
    2. Dreamweaver 中的新增功能
    3. 使用 Dreamweaver 进行 Web 开发 - 概述
    4. Dreamweaver/常见问题
    5. 键盘快捷键
    6. Dreamweaver 系统要求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 将 Dreamweaver 设置与 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 文件
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 从库提取 Web 优化的 SVG 文件
  4. Dreamweaver 工作区和视图
    1. Dreamweaver 工作区
    2. 为可视化开发优化 Dreamweaver 工作区
    3. 根据文件名或内容搜索文件 | Mac OS
  5. 设置站点
    1. 关于 Dreamweaver 站点
    2. 设置站点的本地版本
    3. 连接到发布服务器
    4. 设置测试服务器
    5. 导入和导出 Dreamweaver 站点设置
    6. 将现有网站从远程服务器下载到您的本地站点根目录
    7. Dreamweaver 中的辅助功能
    8. 高级设置
    9. 设置用于传输文件的站点偏好设置
    10. 在 Dreamweaver 中指定代理服务器设置
    11. 将 Dreamweaver 设置与 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理文件
    1. 创建和打开文件
    2. 管理文件和文件夹
    3. 从服务器获取文件和将文件上传到服务器
    4. 存回和取出文件
    5. 同步文件
    6. 比较文件的差别
    7. 遮盖 Dreamweaver 站点中的文件和文件夹
    8. 为 Dreamweaver 站点启用设计备注
    9. 防止潜在的 Gatekeeper 漏洞
  7. 布局和设计
    1. 使用可视化助理进行布局
    2. 关于使用 CSS 来设计页面布局
    3. 使用 Bootstrap 设计响应式网站
    4. 在 Dreamweaver 中创建和使用媒体查询
    5. 使用表格显示内容
    6. 颜色
    7. 使用流式网格布局的响应式设计
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解层叠样式表
    2. 使用 CSS Designer 进行页面布局
    3. 在 Dreamweaver 中使用 CSS 预处理器
    4. 如何在 Dreamweaver 中设置 CSS 样式偏好设置
    5. 在 Dreamweaver 中移动 CSS 规则
    6. 在 Dreamweaver 中将内联 CSS 转换为 CSS 规则
    7. 使用 div 标签
    8. 向背景应用渐变效果
    9. 在 Dreamweaver 中创建和编辑 CSS3 过渡效果
    10. 设置代码格式
  9. 页面内容和资源
    1. 设置页面属性
    2. 设置 CSS 标题属性和 CSS 链接属性
    3. 使用文本
    4. 查找和替换文本、标签和属性
    5. DOM 面板
    6. 在实时视图中编辑
    7. 在 Dreamweaver 中对文档编码
    8. 在“文档”窗口中选择和查看元素
    9. 在属性检查器中设置文本属性
    10. 对网页进行拼写检查
    11. 在 Dreamweaver 中使用水平线
    12. 在 Dreamweaver 中添加和修改字体组合
    13. 使用资源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中创建和管理收藏资源
    16. 在 Dreamweaver 中插入和编辑图像
    17. 添加媒体对象
    18. 在 Dreamweaver 中添加视频
    19. 插入 HTML5 视频
    20. 插入 SWF 文件
    21. 添加音频效果
    22. 在 Dreamweaver 中插入 HTML5 音频
    23. 使用库项目
    24. 在 Dreamweaver 中使用阿拉伯语和希伯来语文本
  10. 链接与导航
    1. 关于链接与导航
    2. 链接
    3. 图像地图
    4. 链接疑难解答
  11. jQuery 构件和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和移动构件
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 对网站进行编码
    1. 关于在 Dreamweaver 中编码
    2. Dreamweaver 中的编码环境
    3. 设置编码偏好设置
    4. 自定义代码颜色
    5. 编写和编辑代码
    6. 代码提示和代码完成
    7. 折叠和展开代码
    8. 使用代码片段重用代码
    9. 使用 linting 检查代码
    10. 优化代码
    11. 在设计视图中编辑代码
    12. 使用页面的头内容
    13. 在 Dreamweaver 中插入服务器端包含
    14. 在 Dreamweaver 中使用标签库
    15. 将自定义标签导入 Dreamweaver
    16. 使用 JavaScript 行为(一般说明)
    17. 应用内置 JavaScript 行为
    18. 关于 XML 和 XSLT
    19. 在 Dreamweaver 中执行服务器端 XSL 转换
    20. 在 Dreamweaver 中执行客户端 XSL 转换
    21. 在 Dreamweaver 中为 XSLT 添加字符实体
    22. 设置代码格式
  13. 跨产品工作流
    1. 安装和使用 Dreamweaver 的扩展
    2. Dreamweaver 中的应用程序内更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文档(仅限 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 编辑 Dreamweaver 站点中的内容
    6. Dreamweaver 和 Business Catalyst 集成
    7. 创建个性化的电子邮件营销活动
  14. 模板
    1. 关于 Dreamweaver 模板
    2. 识别模板和基于模板的文档
    3. 创建 Dreamweaver 模板
    4. 在模板中创建可编辑区域
    5. 在 Dreamweaver 中创建重复区域和表格
    6. 在模板中使用可选区域
    7. 在 Dreamweaver 中定义可编辑的标签属性
    8. 如何在 Dreamweaver 中创建嵌套模板
    9. 编辑、更新和删除模板
    10. 在 Dreamweaver 中导出和导入 xml 内容
    11. 在现有文档中应用或删除模板
    12. 在 Dreamweaver 模板中编辑内容
    13. Dreamweaver 中模板标签的语法规则
    14. 设置模板区域的高亮显示偏好设置
    15. 在 Dreamweaver 中使用模板的好处
  15. 移动设备和多屏幕
    1. 创建媒体查询
    2. 更改移动设备的页面方向
    3. 使用 Dreamweaver 创建适用于移动设备的 Web 应用程序
  16. 动态网站、页面和 Web 表单
    1. 了解 Web 应用程序
    2. 设置计算机以进行应用程序开发
    3. 数据库连接疑难解答
    4. 在 Dreamweaver 中删除连接脚本
    5. 设计动态页
    6. 动态内容源概述
    7. 定义动态内容源
    8. 向页面添加动态内容
    9. 在 Dreamweaver 中更改动态内容
    10. 显示数据库记录
    11. 在 Dreamweaver 中提供动态数据和进行疑难解答
    12. 在 Dreamweaver 中添加自定义服务器行为
    13. 使用 Dreamweaver 生成表单
    14. 使用表单从用户处收集信息
    15. 在 Dreamweaver 中创建和启用 ColdFusion 表单
    16. 创建 Web 表单
    17. 增强了对表单元素的 HTML5 支持
    18. 使用 Dreamweaver 开发表单
  17. 以可视化方式生成应用程序
    1. 在 Dreamweaver 中生成主页和详细页
    2. 生成搜索页和结果页
    3. 生成记录插入页
    4. 在 Dreamweaver 中生成更新记录页
    5. 在 Dreamweaver 中生成记录删除页
    6. 在 Dreamweaver 中使用 ASP 命令修改数据库
    7. 生成注册页
    8. 生成登录页
    9. 生成只有授权用户才能访问的页面
    10. 使用 Dreamweaver 保护 Coldfusion 中的文件夹
    11. 在 Dreamweaver 中使用 ColdFusion 组件
  18. 测试、预览和发布网站
    1. 预览页面
    2. 在多个设备上预览 Dreamweaver 网页
    3. 测试 Dreamweaver 站点
  19. 疑难解答
    1. 已修复的问题
    2. 已知问题

 

 

了解如何使用表格在网站中显示内容。此外,还可了解如何拆分和合并表格单元格以及如何导入和导出表格式数据。

表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成;每行又由一个或多个单元格组成。虽然 HTML 代码中通常不明确指定列,但 Dreamweaver 允许您操作列、行和单元格。

当选定了表格或表格中有插入点时,Dreamweaver 会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些菜单可以快速访问与表格相关的常用命令。可以启用或禁用宽度和菜单。

如果您未看到表格的宽度或列的宽度,则说明没有在 HTML 代码中指定该表格或列的宽度。如果出现两个数,则说明“设计”视图中显示的可视宽度与 HTML 代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小,或者添加到单元格中的内容比该单元格的设置宽度大时,会出现这种情况。

例如,如果您将某列的宽度设置为 200 像素,而添加的内容将宽度延长为 250 像素,则该列将显示两个数:200(代码中指定的宽度)和 (250)(带括号,表示该列呈现在屏幕上的可视宽度)。

注意:

您还可以使用 CSS 定位来对页进行布局。

HTML 中的表格格式设置优先顺序

当在“设计”视图中对表格进行格式设置时,您可以设置整个表格或表格中所选行、列或单元格的属性。如果将整个表格的某个属性(例如背景颜色或对齐)设置为一个值,而将单个单元格的属性设置为另一个值,则单元格格式设置优先于行格式设置,行格式设置又优先于表格格式设置。

表格格式设置的优先顺序如下:

  1. 单元格
  2. 表格

例如,如果将单个单元格的背景颜色设置为蓝色,然后将整个表格的背景颜色设置为黄色,则蓝色单元格不会变为黄色,因为单元格格式设置优先于表格格式设置。

注意:

当您设置列的属性时,Dreamweaver 会更改该列中每个单元格所对应的 td 标签的属性。

关于拆分和合并表格单元格

只要整个选择部分的单元格形成一行或一个矩形,您便可以合并任意数目的相邻的单元格,以生成一个跨多个列或行的单元格。您可以将单元格拆分成任意数目的行或列,而不管之前它是否是合并过的。Dreamweaver 自动重新构造表格(添加任何必需的 colspanrowspan 属性),以创建指定的排列方式。

在下面的示例中,前两行中间的单元格已经合并成一个跨两行的单元格。

合并的单元格

插入表格并添加内容

使用“插入”面板或“插入”菜单来创建一个新表格。然后,按照在表格外添加文本和图像的方式,向表格单元格中添加文本和图像。

  1. 在希望出现表格的位置放置插入点。

    注意:

    如果您的文档是空白的,则只能将插入点放置在文档的开头。

    • 选择“插入”>“表格”。

    • 在“插入”面板的“HTML”类别中,单击“表格”。

  2. 设置“表格”对话框的属性,然后单击“确定”创建表格。
    创建表格
    创建表格

    确定表格行的数目。

    确定表格列的数目。

    表格宽度

    以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。

    边框粗细

    指定表格边框的宽度(以像素为单位)。

    单元格间距

    决定相邻的表格单元格之间的像素数。

    注意:

    如果没有明确指定边框粗细或单元格间距和单元格边距的值,则大多数浏览器都按边框粗细和单元格边距设置为 1、单元格间距设置为 2 来显示表格。若要确保浏览器显示表格时不显示边距或间距,请将“单元格边距”和“单元格间距”设置为 0。

    单元格边距

    确定单元格边框与单元格内容之间的像素数。

    对表格不启用列或行标题。

    左对齐

    可以将表格的第一列作为标题列,以便可为表格中的每一 输入一个标题。

    顶对齐

    可以将表格的第一行作为标题行,以便可为表格中的每一 输入一个标题。

    两者兼有

    使您能够在表格中输入列标题和行标题。

    注意:

    最好使用标题以方便使用屏幕阅读器的 Web 站点访问者。屏幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪表格信息。

    标题

    提供一个显示在表格外的表格标题。

    摘要

    给出了表格的说明。屏幕阅读器可以读取摘要文本,但是该文本不会显示在用户的浏览器中。

导入和导出表格

可以将在另一个应用程序(例如 Microsoft Excel)中创建并以分隔文本的格式(其中的项以制表符、逗号、冒号或分号隔开)保存的表格式数据导入到 Dreamweaver 中并设置为表格格式。

您也可以将表格数据从 Dreamweaver 导出到文本文件中,相邻单元格的内容由分隔符隔开。您可以使用逗号、冒号、分号或空格作为分隔符。当导出表格时,将导出整个表格,您不能选择导出部分表格。

注意:

如果只需要表格中的某些数据(例如前六行或前六列),则复制包含这些数据的单元格,将这些单元格粘贴到表格外(创建新表格),然后导出这个新表格。

导入表格数据

  1. 选择“文件”>“导入”>“导入表格式数据”。

  2. 请指定表格式数据选项,然后单击“确定”。

    数据文件

    要导入的文件的名称。单击“浏览”按钮选择一个文件。

    分隔符

    要导入的文件中所使用的分隔符。

    如果您选择“其他”,则弹出菜单的右侧会出现一个文本框。输入您的文件中使用的分隔符。

    注意:

    将分隔符指定为先前保存数据文件时所使用的分隔符。如果不这样做,则无法正确地导入文件,也无法在表格中对您的数据进行正确的格式设置。

    表格宽度

    表格的宽度。

    • 选择“匹配内容”使每个列足够宽以适应该列中最长的文本字符串。

    • 选择“设置”以像素为单位指定固定的表格宽度,或按占浏览器窗口宽度的百分比指定表格宽度。

    边框

    指定表格边框的宽度(以像素为单位)。

    单元格边距

    单元格内容与单元格边框之间的像素数。

    单元格间距

    相邻的表格单元格之间的像素数。

    注意:

    如果没有明确指定边框、单元格间距和单元格边距的值,则大多数浏览器都按边框和单元格边距设置为 1、单元格间距设置为 2 来显示表格。若要确保浏览器显示表格时不显示边距或间距,请将“单元格边距”和“单元格间距”设置为 0。若要在边框设置为 0 时查看单元格和表格边框,请选择“查看”>“可视化助理”>“表格边框”。

    格式化首行

    确定应用于表格首行的格式设置(如果存在)。从四个格式设置选项中进行选择:无格式、粗体、斜体或加粗斜体。

导出表格

  1. 请将插入点放置在表格中的任意单元格中。
  2. 选择“文件”>“导出”>“表格”。
  3. 指定以下选项:

    分隔符

    指定应该使用哪种分隔符在导出的文件中隔开各项。

    换行符

    指定您将在哪种操作系统中打开导出的文件:Windows、Macintosh 还是 UNIX。(不同的操作系统具有不同的指示文本行结尾的方式。)

  4. 单击“导出”。
  5. 输入文件名称,然后单击“保存”。

选择表格元素

可以一次选择整个表、行或列。也可以选择一个或多个单独的单元格。

当您在表格、行、列或单元格上移动鼠标指针时,Dreamweaver 将高亮显示选择区域中的所有单元格,以使您知道将选择哪些单元格。当您的表格没有边框、单元格跨多列或多行或者表格嵌套时,这一点很有用。可以在首选参数中更改高亮颜色。

注意:

如果您将鼠标指针定位到表格边框上,然后按住 Ctrl (Windows) 或 Command (Macintosh),则将高亮显示该表格的整个表格结构(即表格中的所有单元格)。当您的表格有嵌套并且希望查看其中一个表格的结构时,这一点很有用。

选择整个表格

执行下列操作之一来选择表格:

  • 单击表格左上角可选中它。
  • 单击某个表格单元格,然后在“文档”窗口左下角的标签选择器中选择标签。
  • 单击某个表格单元格,单击表格标题菜单,然后选择“选择表格”。所选表格的下缘和右缘出现选择柄。
  • 单击某个表格单元格,然后选择“编辑”>“表格”>“选择表格”。

选择单个或多个行或列

  1. 定位鼠标指针使其指向行的左边缘或列的上边缘。
  2. 当鼠标指针变为选择箭头时,单击以选择单个行或列,或进行拖动以选择多个行或列。
    选择一行

选择单个列

  1. 在该列中单击。
  2. 单击列标题菜单,然后选择“选择列”。

选择单个单元格

  1. 执行下列操作之一:

    • 单击单元格,然后在“文档”窗口左下角的标签选择器中选择 <td> 标签。
    • 按住 Ctrl 单击 (Windows) 或按住 Command 单击 (Macintosh) 该单元格。

选择一行或矩形的单元格块

执行下列操作之一:
  • 从一个单元格拖到另一个单元格。

  • 单击一个单元格,然后按住 Ctrl (Windows) 或 Command (Macintosh) 单击以选中该单元格,接着按住 Shift 单击另一个单元格。

选择一个单元格块

选择不相邻的单元格

按住 Ctrl (Windows) 或 Command (Macintosh) 单击要选择的单元格、行或列。

如果您按住 Ctrl 或 Command 单击的单元格、行或列尚未选中,则会添加到选择区域中。如果已将其选中,则再次单击会将其从选择中删除。

更改选择表格元素时的高亮颜色

  1. 选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。
  2. 从左侧的“类别”列表中选择“高亮显示”,进行以下更改之一,然后单击“确定”。
    • 要更改表格元素的高亮颜色,请单击“鼠标滑过”颜色框并使用拾色器来选择一种高亮颜色(或在文本框中输入高亮颜色的十六进制值)。

    • 若要对表格元素启用或禁用高亮显示功能,请选择或取消选择“鼠标滑过”的“显示”选项。

    注意:

    这些选项会影响指针移到其上时 Dreamweaver 会高亮显示的所有对象。

设置表格属性

您可以使用属性检查器编辑表格。

  1. 选择一个表格。
  2. 在属性检查器(“窗口”>“属性”)中,根据需要更改属性。
    表格属性
    表格属性

    表格 ID

    表格的 ID。

    行和列

    表格中行和列的数量。

    W

    表格的宽度,以像素为单位或表示为占浏览器窗口宽度的百分比。

    注意:

    通常不需要设置表格的高度。

    单元格边距

    单元格内容与单元格边框之间的像素数。

    单元格间距

    相邻的表格单元格之间的像素数。

    对齐

    确定表格相对于同一段落中的其他元素(例如文本或图像)的显示位置。

    “左对齐”沿其他元素的左侧对齐表格(因此同一段落中的文本在表格的右侧换行);“右对齐”沿其他元素的右侧对齐表格(文本在表格的左侧换行);“居中对齐”将表格居中(文本显示在表格的上方和/或下方)。“缺省”指示浏览器应该使用其默认对齐方式。

    注意:

    当将对齐方式设置为“默认”时,其他内容不显示在表格的旁边。若要在其他内容旁边显示表格,请使用“左对齐”或“右对齐”。

    边框

    指定表格边框的宽度(以像素为单位)。

    注意:

    如果没有明确指定边框、单元格间距和单元格边距的值,则大多数浏览器按边框和单元格边距均设置为 1 且单元格间距设置为 2 显示表格。若要确保浏览器不显示表格中的边距和间距,请将“边框”、“单元格边距”和“单元格间距”都设置为 0。若要在边框设置为 0 时查看单元格和表格边框,请选择“查看”>“可视化助理”>“表格边框”。

    对该表格设置一个 CSS 类。

    注意:

    可能需要展开表格的属性检查器才能看到以下属性。要展开表格的属性检查器,单击右下角的展开箭头。

    清除列宽和清除行高

    和“清除行高”从表格中删除所有明确指定的行高或列宽。

    将表格宽度转换成像素

    和“将表格高度转换成像素”将表格中每列的宽度或高度设置为以像素为单位的当前宽度(还将整个表格的宽度设置为以像素为单位的当前宽度)。

    将表格宽度转换成百分比

    和“将表格高度转换成百分比”将表格中每个列的宽度或高度设置为按占“文档”窗口宽度百分比表示的当前宽度(还将整个表格的宽度设置为按占“文档”窗口宽度百分比表示的当前宽度)。

    如果您在文本框中输入了值,则可以按 Tab 或 Enter (Windows) 或 Return (Macintosh) 来应用该值。

设置单元格、行或列属性

您可以使用属性检查器编辑表格中的单元格和行。

  1. 选择列或行。
  2. 在属性检查器(“窗口”>“属性”)中,设置以下选项:

    水平

    指定单元格、行或列内容的水平对齐方式。您可以将内容对齐到单元格的左侧、右侧或使之居中对齐,也可以指示浏览器使用其默认的对齐方式(通常常规单元格为左对齐,标题单元格为居中对齐)。

    垂直

    指定单元格、行或列内容的垂直对齐方式。您可以将内容对齐到单元格的顶端、中间、底部或基线,或者指示浏览器使用其默认的对齐方式(通常是中间)。

    宽和高

    所选单元格的宽度和高度,以像素为单位或按整个表格宽度或高度的百分比指定。若要指定百分比,请在值后面使用百分比符号 (%)。若要让浏览器根据单元格的内容以及其他列和行的宽度和高度确定适当的宽度或高度,请将此域留空(默认设置)。

    默认情况下,浏览器选择行高和列宽的依据是能够在列中容纳最宽的图像或最长的行。这就是为什么当您将内容添加到某个列时,该列有时变得比表格中其他列宽得多的原因。

    注意:

    您可以按占表格总高度的百分比指定一个高度,但是浏览器中行可能不以指定的百分比高度显示。

    背景

    单元格、列或行的背景颜色(使用拾色器选择)。

    合并单元格

    将所选的单元格、行或列合并为一个单元格。只有当单元格形成矩形或直线的块时才可以合并这些单元格。

    拆分单元格

    将一个单元格分成两个或更多个单元格。一次只能拆分一个单元格;如果选择的单元格多于一个,则此按钮将禁用。

    不换行

    防止换行,从而使给定单元格中的所有文本都在一行上。如果启用了“不换行”,则当您键入数据或将数据粘贴到单元格时单元格会加宽来容纳所有数据。(通常,单元格在水平方向扩展以容纳单元格中最长的单词或最宽的图像,然后根据需要在垂直方向进行扩展以容纳其他内容。)

    标题

    将所选的单元格格式设置为表格标题单元格。默认情况下,表格标题单元格的内容为粗体并且居中。

    注意:

    您可以按像素或百分比指定宽度和高度,并且可以在像素和百分比之间互相转换。

    注意:

    当您设置列的属性时,Dreamweaver 会更改该列中每个单元格所对应的 td 标签的属性。但是,当您设置行的某些属性时,Dreamweaver 将更改 tr 标签的属性,而不是更改行中每个 td 标签的属性。在将同一种格式应用于行中的所有单元格时,将格式应用于 tr 标签会生成更加简明清晰的 HTML 代码。

  3. 按 Tab 或 Enter (Windows) 或 Return (Macintosh) 以应用该值。

设置表格和单元格的格式

可以通过设置表格及表格单元格的属性或将预先设置的设计应用于表格来更改表格的外观。在设置表格和单元格的属性前,请注意格式设置的优先顺序为单元格、行和表格。

注意:

请按照设置表格外文本格式的过程,设置表格单元格内文本的格式。

更改表格、行、单元格或列的格式

  1. 选择表格、单元格、行或列。
  2. 在属性检查器(“窗口”>“属性”)中,单击右下角的展开箭头,然后根据需要更改属性。
  3. 根据需要更改属性。

    有关这些选项的详细信息,请单击属性检查器中的“帮助”图标。

    注意:

    当您设置列的属性时,Dreamweaver 会更改该列中每个单元格所对应的 td 标签的属性。但是,当您设置行的某些属性时,Dreamweaver 将更改 tr 标签的属性,而不是更改行中每个 td 标签的属性。在将同一种格式应用于一行中的所有单元格时,将格式应用于 tr 标签会生成更加简明清晰的 HTML 代码。

若要在“代码”视图中添加或编辑表格的辅助功能值,请执行以下操作:

在代码中编辑适当的属性。
注意:

若要快速找到代码中的标签,请单击表格,然后选择“文档”窗口底部的标签选择器中的 <table> 标签。

在“设计”视图中添加或编辑表格的辅助功能值

  • 若要编辑表格题注,请高亮显示此题注,然后键入新题注。
    • 若要编辑题注对齐,请将插入点放置在表格的题注中,右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh),然后选择“编辑标签代码”。

    • 若要编辑表格摘要,请选择该表格,右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh),然后选择“编辑标签代码”。

调整表格、列和行的大小

调整表格大小

您可以调整整个表格或每个行或列的大小。当调整整个表格的大小时,表格中的所有单元格按比例更改大小。如果表格的单元格指定了明确的宽度或高度,则调整表格大小将更改“文档”窗口中单元格的可视大小,但不更改这些单元格的指定宽度和高度。

您可以通过拖动表格的一个选择柄来调整表格的大小。当选中了表格或插入点位于表格中时,Dreamweaver 将在该表格的顶部或底部显示表格宽度和表格标题菜单。

有时 HTML 代码中设置的列宽度与它们在屏幕上的外观宽度不匹配。发生这种情况时,您可以使宽度一致。Dreamweaver 中可以显示表格与列的宽度和标题菜单,能够帮助您对表格进行布局;您可以根据需要启用或禁用宽度和菜单。

调整列和行的大小

可在属性检查器中或通过拖动列或行的边框来更改列宽或行高。如果调整大小比较麻烦,可以清除列宽或行高并重新开始。

注意:

您还可以使用代码视图直接在 HTML 代码中更改单元格的宽度和高度。

当选中了表格或插入点位于表格中时,Dreamweaver 将在列的顶部或底部显示列宽度和列标题菜单;您可以根据需要启用或禁用列标题菜单。

调整表格大小

选择表格。如果采用实时视图,选择表格时将会显示“元素显示”。单击三明治图标,进入表格格式设置模式。

  • 若要在水平方向调整表格的大小,请拖动右边的选择柄。

  • 若要在垂直方向调整表格的大小,请拖动底部的选择柄。

  • 若要在两个方向调整表格的大小,请拖动右下角的选择柄。

要在实时视图中退出表格格式设置模式,请按 Esc 键或单击表格外边的区域。您可以使用“编辑”>“表格”菜单选项进一步修改表格。

注意:“编辑”>“表格”菜单中的选项会因所选的是整个表格还是单个单元格而异。在实时视图中,当选择整个表格时,“元素显示”会显示“表格”,而当选择特定的单元格时,则会显示“td”。若要从单元格格式设置切换为表格格式模式,请单击表格边框。

更改列宽度并保持整个表的宽度不变

  1. 在 Design 视图中,拖动您想更改的列的右边框。

    相邻列的宽度也更改了,因此实际上调整了两列的大小。可视化反馈将显示如何对列进行调整;表格的总度不改变。

    在保持表格宽度不变的前提下更改列宽

    注意:

    在以百分比形式指定宽度(而不是以像素指定宽度)的表格中,如果您拖动最右侧列的右边框,整个表格的宽度将会变化,并且所有的列都会成比例地变宽或变窄。

更改某个列的宽度并保持其他列的大小不变

  1. 在 Design 视图中,按住 Shift 键,然后拖动列的边框。

    这个列的宽度就会改变。可视化反馈将显示各列如何调整;表的总宽度将更改以容纳正在调整的列。

    在保持其他列的宽度不变的前提下更改列宽

以可视方式更改行高

拖动行的下边框。

使代码中的列宽与可视宽度一致

  1. 单击一个单元格。
  2. 单击表格标题菜单,然后选择“使所有宽度一致”。

    Dreamweaver 将重置代码中指定的宽度以匹配可视宽度。

清除表格中所有设置的宽度和高度

  1. 选择表格。
  2. 执行下列操作之一:
    • 选择“编辑”>“表格”>“清除单元格宽度”或“编辑”>“表格”>“清除单元格高度”。

    • 在属性检查器(“窗口”>“属性”)中,单击“清除行高”按钮 或“清除列宽”按钮

    • 单击表格标题菜单,然后选择“清除全部高度”或“清除全部宽度”。

清除设置的列宽度

在列中单击,然后单击列标题菜单,选择“清除列宽”。

启用或禁用表格和列的宽度和菜单(在“设计”视图中)

选择“视图”>“设计视图选项”>“可视化助理”>“表格宽度”。

添加及删除行和列

若要添加和删除行和列,请使用“修改”>“表格”或列标题菜单。

注意:

在表格的最后一个单元格中按 Tab 会自动在表格中另外添加一行。

添加单个行或列

单击某个单元格并执行下列操作之一:
  • 选择“编辑”>“表格”>“插入行”或“编辑”>“表格”>“插入列”。

    在插入点的上面出现一行或在插入点的左侧出现一列。

  • 单击列标题菜单,然后选择“左侧插入列”或“右侧插入列”。

     

添加多行或多列

  1. 单击一个单元格。
  2. 选择“编辑”>“表格”>“插入行”或“插入列”,完成对话框,然后单击“确定”。

    插入

    指示是插入行还是插入列。

    行数或列数

    要插入的行数或列数。

    位置

    指定新行或新列应该显示在所选单元格所在行或列的前面还是后面。

删除行或列

执行下列操作之一:
  • 单击要删除的行或列中的一个单元格,然后选择“编辑”>“表格”>“删除行”或“编辑”>“表格”>“删除列”。

  • 选择完整的一行或一列,然后按 Delete 键。

  • 在属性检查器(“窗口”>“属性”)中,执行下列操作之一:
    • 若要添加或删除行,请增加或减小“行”值。
    • 若要添加或删除列,请增加或减小“列”值。
注意:

当删除包含数据的行和列时,Dreamweaver 不发出警告。

拆分和合并单元格

使用属性检查器或“编辑”>“表格”子菜单中的选项拆分或合并单元格。

合并表格中的两个或多个单元格

  1. 选择连续行中形状为矩形的单元格。

    在下面的插图中,所选部分是矩形的单元格,因此可以合并这些单元格。

    可以在一个矩形的单元格中合并单元格

    在下面的插图中,所选部分不是矩形,因此不能合并这些单元格。

    如果所选部分不是矩形,不能合并单元格

  2. 执行下列操作之一:
    • 选择“编辑”>“表格”>“合并单元格”。

    • 在展开的 HTML 属性检查器(“窗口”>“属性”)中,单击“合并单元格”。

    注意:

    如果没有看到此按钮,请单击属性检查器右下角的展开箭头,以便可以看到所有选项。

    单个单元格的内容放置在最终的合并单元格中。所选的第一个单元格的属性将应用于合并的单元格。

拆分单元格

  1. 单击某个单元格并执行下列操作之一:
    • 选择“编辑”>“表格”>“拆分单元格”。

    • 在展开的 HTML 属性检查器(“窗口”>“属性”)中,单击“拆分单元格”。

    注意:

    如果没有看到此按钮,请单击属性检查器右下角的展开箭头,以便可以看到所有选项。

  2. 在“拆分单元格”对话框中,指定如何拆分单元格:

    拆分单元格

    指定将单元格拆分成行还是列。

    行数/列数

    指定将单元格拆分成多少行或多少列。

增加或减少单元格所跨的行或列的数目

执行下列操作之一:
  • 选择“编辑”>“表格”>“增加行宽”或“编辑”>“表格”>“增加列宽”。

  • 选择“编辑”>“表格”>“减小行宽”或“编辑”>“表格”>“减小列宽”。

复制、粘贴和删除单元格

您可以一次复制、粘贴或删除单个表格单元格或多个单元格,并保留单元格的格式设置。

您可以在插入点粘贴单元格或通过粘贴替换现有表格中的所选部分。若要粘贴多个表格单元格,剪贴板的内容必须和表格的结构或表格中将粘贴这些单元格的所选部分兼容。

剪切或复制表格单元格

  1. 选择连续行中形状为矩形的一个或多个单元格。

    在下面的插图中,所选部分是矩形的单元格,因此可以剪切或复制这些单元格。

    可以在一个矩形的单元格中剪切或复制单元格

    在下面的插图中,所选部分不是矩形,因此不能剪切或复制这些单元格。

    如果所选部分不是矩形,则不能剪切或复制单元格

  2. 选择“编辑”>“剪切”或“编辑”>“拷贝”。
    注意:

    如果您选择了整个行或列然后选择“编辑”>“剪切”,则将从表格中删除整个行或列(而不仅仅是单元格的内容)。

粘贴表格单元格

  1. 选择要粘贴单元格的位置:
    • 若要用您正在粘贴的单元格替换现有的单元格,请选择一组与剪贴板上的单元格具有相同布局的现有单元格。(例如,如果您复制或剪切了一块 3 x 2 的单元格,则可以选择另一块 3 x 2 的单元格通过粘贴进行替换。)

    • 若要在特定单元格上方粘贴一整行单元格,请单击该单元格。

    • 若要在特定单元格左侧粘贴一整列单元格,请单击该单元格。

    注意:

    如果剪贴板中的单元格不到一整行或一整列,并且您单击某个单元格然后粘贴剪贴板中的单元格,则您所单击的单元格和与它相邻的单元格可能(根据它们在表格中的位置)被您粘贴的单元格替换。

    • 若要用粘贴的单元格创建一个新表格,请将插入点放置在表格之外。
  2. 选择“编辑”>“粘贴”。

    如果您将整个行或列粘贴到现有的表格中,则这些行或列将被添加到该表格中。如果您粘贴单个单元格,则将替换所选单元格的内容。如果您在表格外进行粘贴,则这些行、列或单元格用于定义一个新表格。

删除单元格内容,但使单元格保持原样

  1. 选择一个或多个单元格。
    注意:

    确保所选部分不是完全由完整的行或列组成的。

  2. 按 Delete 键。

    注意:

    如果在您选择“编辑”>“清除”或按 Delete 键时只选择了完整的行或列,则将从表格中删除整个行或列,而不仅仅是它们的内容。

删除包含合并单元格的行或列

  1. 选择行或列。
  2. 选择“编辑”>“表格”>“删除行”或“编辑”>“表格”>“删除列”。

嵌套表格

嵌套表格是在另一个表格的单元格中的表格。可以像对任何其他表格一样对嵌套表格进行格式设置;但是,其宽度受它所在单元格的宽度的限制。

  1. 单击现有表格中的一个单元格。
  2. 选择“插入”>“表格”,设置“表格”选项,然后单击“确定”。

对表格进行排序

您可以根据单个列的内容对表格中的行进行排序。您还可以根据两个列的内容执行更加复杂的表格排序。

您不能对包含 colspanrowspan 属性的表格(即包含合并单元格的表格)进行排序。

  1. 选择该表格或单击任意单元格。
  2. 选择“编辑”>“表格”>“排序表格”,在对话框中设置选项,然后单击“确定”。

    排序方式

    确定使用哪个列的值对表格的行进行排序。

    顺序

    确定是按字母还是按数字顺序以及是以升序(A 到 Z,数字从小到大)还是以降序对列进行排序。

    当列的内容是数字时,选择“按数字顺序”。如果按字母顺序对一组由一位或两位数组成的数字进行排序,则会将这些数字作为单词进行排序(排序结果如 1、10、2、20、3、30),而不是将它们作为数字进行排序(排序结果如 1、2、3、10、20、30)。

    再按/顺序

    确定将在另一列上应用的第二种排序方法的排序顺序。在“再按”弹出菜单中指定将应用第二种排序方法的列,并在“顺序”弹出菜单中指定第二种排序方法的排序顺序。

    排序包含第一行

    指定将表格的第一行包括在排序中。如果第一行是不应移动的标题,则不选择此选项。

    对标题行进行排序

    指定使用与主体行相同的条件对表格的 thead 部分(如果有)中的所有行进行排序。(请注意,即使在排序后,thead 行也将保留在 thead 部分并仍显示在表格的顶部。) 有关 thead 标签的信息,请参阅“参考”面板(选择“帮助”>“参考”)。

    对脚注行进行排序

    指定按照与主体行相同的条件对表格的 tfoot 部分(如果有)中的所有行进行排序。(请注意,即使在排序后,tfoot 行也将保留在 tfoot 部分并仍显示在表格的底部。) 有关 tfoot 标签的信息,请参阅“参考”面板(选择“帮助”>“参考”)。

    使排序完成后所有行的颜色保持相同

    指定排序之后表格行属性(如颜色)应该与同一内容保持关联。如果表格行使用两种交替的颜色,则不要选择此选项以确保排序后的表格仍具有颜色交替的行。如果行属性特定于每行的内容,则选择此选项以确保这些属性保持与排序后表格中正确的行关联在一起。

更快、更轻松地获得帮助

新用户?