Dreamweaver 表格制作完整教程

第一部分：基础知识 - 为什么使用表格？

在现代网页设计中,我们通常使用 Flexbox 和 Grid 布局，表格在以下场景中仍然非常有用：

dreamweaver表格制作教程
（图片来源网络，侵删）
  1. 展示结构化数据：这是表格最主要的功能，如产品价格表、课程表、成绩单、财务报表等。
  2. 创建复杂布局（传统用法）：在 CSS 布局普及之前，网页设计师常用表格来创建整个页面的布局（页头、侧边栏、内容区）。注意： 现在已不推荐此用法，因为它不利于 SEO 和可访问性，且代码冗余，本教程将重点放在其“数据展示”的核心功能上。

第二部分：创建与编辑基础表格

插入一个新表格

  1. 在 Dreamweaver 中打开您的 HTML 文件。

  2. 将光标放在您希望插入表格的位置。

  3. 通过以下方式之一打开“表格”对话框：

    • 菜单栏：选择 插入 > 表格。
    • 插入面板：确保您在“常用”或“布局”类别下，然后点击“表格”图标。

  4. 在弹出的“表格”对话框中，设置以下基本参数：

    dreamweaver表格制作教程
    （图片来源网络，侵删）
    • 行数：表格中垂直的单元格数量。
    • 列数：表格中水平的单元格数量。
    • 表格宽度：
      • 可以设置为 像素，适合固定宽度的布局。
      • 也可以设置为 百分比，使表格宽度随浏览器窗口大小变化，适合响应式设计。
    • 边框粗细：设置表格边框的宽度（以像素为单位），设置为 0 则无边框。
    • 单元格边距：单元格内容与单元格边框之间的距离。
    • 单元格间距：单元格与单元格之间的距离。
    • 页眉：设置表头行的样式，通常用于第一行。
    • 为表格添加一个标题文本。
    • 摘要：为表格添加一个描述性文本，屏幕阅读器会读取此内容，有助于可访问性。

  5. 点击“确定”，表格就会插入到您的页面中。

选择表格元素

正确选择是编辑的前提。

  • 选择整个表格：将鼠标光标移动到表格的左上角或右下角，当光标变为一个双向箭头 时单击。
  • 选择一行：将鼠标光标移动到行的左侧边缘，当光标变为一个向右的黑色箭头 时单击。
  • 选择一列：将鼠标光标移动到列的顶部边缘，当光标变为一个向下的黑色箭头 时单击。
  • 选择单个单元格：将光标放在单元格内，然后按 Ctrl + A (Windows) 或 Cmd + A (Mac)，或者，在单元格内单击，然后在“属性”检查器中点击“单元格”按钮。

编辑表格

选中表格元素后,您可以在底部的 “属性”检查器 中进行修改。

  • 修改表格属性：

    dreamweaver表格制作教程
    （图片来源网络，侵删）
    • 表格 Id：给表格一个唯一的名称，方便通过 CSS 或 JavaScript 进行控制。
    • 行/列：可以在这里动态增加或减少行列数。
    • 宽/高：调整表格的整体尺寸。
    • 对齐：设置表格在页面中的对齐方式（左、中、右）。
    • 类：应用一个 CSS 类，以自定义表格样式。

  • 修改行/列/单元格属性：

    • 水平/垂直对齐：设置单元格内内容的对齐方式（水平：左、中、右；垂直：顶端、中间、底部）。
    • 宽/高：设置单个单元格的尺寸。
    • 背景颜色：为单元格设置背景色。
    • 不换行：防止文本过长时自动换行，导致单元格被撑宽。
    • 将单元格设置为表头（<th> 标签），通常文本会加粗居中。

第三部分：进阶操作

合并与拆分单元格

这是制作复杂表格布局的关键。

  • 合并单元格：

    1. 选中您想要合并的多个连续的单元格（可以是水平、垂直或矩形区域）。
    2. 在“属性”检查器中，点击“合并单元格”按钮。
    3. 或者,右键单击选中的单元格，选择“表格” > “合并单元格”。

  • 拆分单元格：

    1. 将光标放在您想要拆分的单个单元格内。
    2. 在“属性”检查器中，点击“拆分单元格”按钮。
    3. 在弹出的对话框中,选择您希望将其拆分为行还是列，并指定数量。
    4. 或者,右键单击该单元格，选择“表格” > “拆分单元格”。

添加或删除行/列

  • 通过菜单：右键单击任意单元格，选择 表格 > 插入行 / 插入列 / 删除行 / 删除列。
  • 通过属性检查器：选中行或列，在属性检查器中直接点击相应的按钮。
  • 通过快捷键：
    • 在行末按 Tab 键，会在下方插入一个新行。
    • 在最后一行的最后一个单元格按 Tab 键，会在表格末尾添加一个新行。

第四部分：使用 CSS 美化表格

原始的表格样式非常简陋,使用 CSS 可以让您的表格变得专业、美观。

  1. 创建 CSS 样式表：

    • 如果您还没有,请先创建一个新的 CSS 文件（styles.css），并将其链接到您的 HTML 文件中（在 <head> 标签内添加 <link rel="stylesheet" href="styles.css">）。

  2. 编写 CSS 样式： 在您的 CSS 文件中，针对表格的不同部分进行样式设计。

    /* 基础表格样式 */
table {
    width: 100%; /* 表格宽度占满父容器 */
    border-collapse: collapse; /* 合并边框，使边框更整洁 */
    font-family: Arial, sans-serif;
    margin: 20px 0;
}
/* 单元格样式 */
td, th {
    border: 1px solid #ddd; /* 添加灰色边框 */
    padding: 12px; /* 增加内边距，让内容不贴边 */
    text-align: left; /* 文字左对齐 */
}
/* 表头样式 */
th {
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 白色文字 */
    font-weight: bold;
}
/* 隔行变色效果 */
tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}
/* 鼠标悬停效果 */
tbody tr:hover {
    background-color: #ddd;
}

  3. 应用样式：

    • 类选择器（推荐）：在“属性”检查器中，为表格指定一个 类，class="data-table"，然后在 CSS 中这样写：
      .data-table { ... }
    • ID 选择器：为表格指定一个唯一的 Id，id="main-table"，然后在 CSS 中这样写：
      #main-table { ... }

第五部分：实战案例 - 制作一个产品价格表

让我们动手制作一个简单的产品价格表。

HTML 结构 (由 Dreamweaver 生成)

<table width="600" border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th scope="col">产品名称</th>
    <th scope="col">规格</th>
    <th scope="col">价格</th>
  </tr>
  <tr>
    <td>智能手机 A</td>
    <td>128GB</td>
    <td>¥3999</td>
  </tr>
  <tr>
    <td>智能手机 B</td>
    <td>256GB</td>
    <td>¥4999</td>
  </tr>
  <tr>
    <td>平板电脑 C</td>
    <td>64GB</td>
    <td>¥2599</td>
  </tr>
</table>

CSS 美化 (styles.css)

table {
    width: 80%; /* 使用百分比，使其响应式 */
    margin: 20px auto; /* 居中显示 */
    border-collapse: collapse;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
thead th {
    background-color: #007BFF;
    color: white;
    text-transform: uppercase;
}
tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
tbody tr:hover {
    background-color: #e9ecef;
    transition: background-color 0.3s ease;
}

最终效果：一个带有阴影、居中、隔行变色和悬停效果的现代化价格表。

总结与最佳实践

  1. 语义化优先：如果只是展示数据，请使用 <table>，如果用于页面布局，请使用 CSS Flexbox 或 Grid。
  2. 善用 CSS：不要依赖表格的属性（如 width, bgcolor）来设置样式，将所有样式都移到 CSS 文件中，这样代码更清晰、更易于维护。
  3. 可访问性：使用 <th> 标签定义表头，并为其设置 scope 属性（如 scope="col" 或 scope="row"），这能帮助屏幕阅读器更好地理解表格结构。
  4. 响应式考虑：在小屏幕设备上，表格可能会被挤压，可以考虑使用 CSS Media Queries，在小屏幕上将表格转为垂直堆叠的卡片式布局，但这属于更高级的技巧。

希望这份详细的教程能帮助您在 Dreamweaver 中熟练地制作和使用表格！