Dreamweaver表格教程，从零开始怎么学？

Dreamweaver 表格教程：从入门到精通

为什么学习表格？（表格在现代网页设计中的角色）

在 CSS (层叠样式表) 盛行的今天，很多人会问：“表格是不是过时了？”

答案是：表格并没有过时，但它的用途发生了改变。

• 旧用法（已淘汰）： 使用表格来布局整个网页（一个三行一列的表格作为页面容器，里面再嵌套表格做侧边栏和内容区），这种方法会导致代码臃肿、加载缓慢，且不利于 SEO（搜索引擎优化）和响应式设计。
• 新用法（推荐）： 表格的正确用途是展示“表格数据”，比如课程表、成绩单、产品价格对比、人员信息列表等任何具有行列结构的数据。

本教程将教你如何正确、高效地使用表格来展示数据。

核心概念：认识 Dreamweaver 的表格工具

在开始之前，我们先熟悉一下 Dreamweaver 中与表格相关的关键面板和工具。

1. “插入”面板 (Insert Panel)

   
   （图片来源网络，侵删）
   • 切换到 “常用” (Common) 或 “布局” (Layout) 分类。
   • 你会看到一个 “表格” (Table) 图标,点击它就是插入表格的主要入口。

   (这是一个示意图，具体图标可能因 Dreamweaver 版本略有不同)

2. “属性”检查器 (Properties Inspector)

   • 这是最重要的面板，当你选中一个表格或表格内的某个元素（如单元格、行、列）时，“属性”检查器会显示其可编辑的属性。
   • 如果没有看到，可以通过菜单栏 “窗口” (Window) -> “属性” (Properties) 打开。

   (这是一个示意图，展示了表格的主要属性)

第一步：创建你的第一个表格

1. 将光标放在你希望插入表格的网页位置。

2. 点击 “插入”面板 -> “表格” (Table)。

3. 此时会弹出 “表格” (Table) 对话框,这是你定义表格结构的第一个关键窗口。

   • 表格尺寸 (Table Size):
     • 行数 (Rows): 表格有多少行，一个表头+三行数据，就填 4。
     • 列数 (Columns): 表格有多少列，姓名、年龄、性别三列，就填 3。
     • 表格宽度 (Table Width): 设置表格的整体宽度。
       • 可以选择 “像素” (pixels)，设置一个固定值（如 800px）,这适合需要精确控制布局的表格。
       • 可以选择 “百分比” (%)，设置其相对于父容器（通常是整个页面）的宽度（如 100%）,这会让表格自适应浏览器窗口大小。
     • 边框粗细 (Border Thickness): 设置表格边框的宽度，如果你希望边框不可见，可以设置为 0，之后我们可以用 CSS 来美化边框。
     • 单元格边距 (Cell Padding): 单元格内容与单元格边框之间的内部间距，设置为 0 时,文字会紧贴边框。
     • 单元格间距 (Cell Spacing): 单元格与单元格之间的外部间距，设置为 0 时,单元格之间没有空隙。
   • 页眉 (Header): 选择表头样式，通常我们选择 “顶部” (Top) 或 “左侧” (Left)，方便后续用 CSS 样式化。
   • 辅助功能 (Accessibility):
     • 标题 (Title): 为表格设置一个简短的描述，这对屏幕阅读器非常重要，强烈建议填写。
     • (Summary): 对表格内容的详细描述,同样是辅助功能的一部分。

4. 填写完信息后，点击 “确定” (OK),一个基础的表格就会出现在你的设计视图中。

第二步：编辑和填充表格内容

创建表格只是第一步,接下来是填充和编辑数据。

1. 直接在单元格中点击，然后输入你的文本、图片或其他内容。

2. 选择表格元素：

   • 选择整个表格： 将鼠标移动到表格的左上角或右下角,当光标变为一个双向箭头时单击。
   • 选择一行： 将鼠标移动到该行的左侧边缘,当光标变为一个黑色向右箭头时单击。
   • 选择一列： 将鼠标移动到该列的顶部边缘,当光标变为一个黑色向下箭头时单击。
   • 选择一个单元格： 在单元格内三击，或者按住 Ctrl (Windows) / Cmd (Mac) 并单击单元格内的任意位置。

3. 添加/删除行或列：

   • 选中行或列后，观察“属性”检查器，会出现 “合并单元格” 和 “拆分单元格” 按钮，以及 “删除行” 或 “删除列” 按钮。
   • 要添加行或列，最简单的方法是：在表格末尾的最后一行（或最右侧的最后一列）之外，单击一下，然后按 Tab 键，会自动添加一个新的空白行（或列）。
   • 也可以通过菜单栏 “修改” (Modify) -> “表格” (Table) 来找到更多添加/删除选项。

4. 合并与拆分单元格：

   • 合并单元格: 选中你想要合并的多个连续的单元格，然后点击“属性”检查器中的 “合并单元格” 按钮,这对于创建跨列的标题非常有用。
   • 拆分单元格: 选中一个单元格，点击 “拆分单元格” 按钮，在弹出的对话框中选择是拆分为行还是列,以及拆分成多少份。

第三步：使用 CSS 美化你的表格

表格的默认样式非常朴素，我们用 CSS 来让它变得美观专业。

最佳实践：使用“CSS 设计器”面板

1. 创建 CSS 规则：

   • 选中你的表格。
   • 打开 “CSS 设计器” (CSS Designer) 面板（窗口 -> CSS 设计器）。
   • 在“源” (Sources) 部分，点击 号，选择 “创建新的 CSS 文件”，给它起个名字，styles.css，并选择“链接到现有文件” (Link to Existing File)，Dreamweaver 会自动将这个 CSS 文件链接到你的 HTML 页面。
   • 在“选择器” (Selectors) 部分，点击 “选择器” 下方的空白区域，然后直接在设计视图中再次点击你的表格，Dreamweaver 会自动创建一个名为 table 的选择器。

2. 应用样式：

   • 现在你可以在“属性” (Properties) 面板中为 table 选择器添加样式了。
   • 设置边框： 找到 “边框” (Border) 选项，点击颜色选择器，选择一个你喜欢的边框颜色（#dddddd），你会发现，即使你在表格对话框中设置了边框为 0，这里依然可以添加漂亮的 CSS 边框。
   • 设置宽度： 在 “方框” (Box) 分类下，可以设置 Width。
   • 设置外边距： 在 “方框” (Box) 分类下，设置 Margin 为 0 auto,可以让表格在页面中水平居中。

3. 为特定部分添加样式：

   • 美化表头 (th): 在 CSS 设计器中，创建一个新的选择器，输入 th，然后设置其背景色、文字颜色、字体加粗等，让表头突出显示。

     th {
       background-color: #4CAF50;
       color: white;
       font-weight: bold;
       text-align: left; /* 文字左对齐 */
       padding: 12px; /* 增加内边距，让文字不贴边 */
     }

   • 美化表格内容 (td): 创建一个 td 选择器，设置 padding 来增加单元格内边距，让内容不那么拥挤。

     td {
       padding: 12px;
       border-bottom: 1px solid #dddddd; /* 只在单元格底部添加横线 */
     }

   • 添加隔行变色效果: 这是一个非常实用的技巧，让表格更易读。
     • 创建一个选择器 tr:nth-child(even)，这个选择器会选择所有偶数行的 <tr>。
     • 设置其 background-color 为一个非常浅的灰色（#f2f2f2）。

       tr:nth-child(even) {
       background-color: #f2f2f2;
       }

   • 鼠标悬停效果: 创建一个选择器 tr:hover，当鼠标移动到某一行上时，改变其背景色。

     tr:hover {
       background-color: #ddd;
     }

高级技巧与最佳实践

1. 使用“快速编辑器”进行代码级调整：

   • 在设计视图中，右键单击表格，选择 “快速编辑器” (Quick Edit)，这会弹出一个让你直接编辑 HTML 代码的窗口，对于快速修改 class 或 id 非常方便。

2. 使用“排序”功能处理数据：

   • 选中表格，在“属性”检查器中，你可以找到一个 “排序” (Sort) 按钮，点击它，可以对表格的任意列进行升序或降序排列，这对于展示价格、日期等数据非常实用。

3. 表格的可访问性 (Accessibility)：

   • 始终为表格填写 ” (Title) 和 “ (Summary)。
   • 对于复杂的表格，可以在 <table> 标签中使用 scope 属性来明确表头 (th) 的作用范围是 row（行）还是 col（列），这能极大地帮助屏幕阅读器理解表格结构，你可以在“属性”检查器的“快速标签编辑器”中手动添加。

4. 响应式表格：

   • 在小屏幕设备上，表格很容易被挤压变形，一个简单的响应式技巧是：在 CSS 中为表格容器设置 overflow-x: auto;，这样，如果表格宽度超出屏幕，就会出现一个水平滚动条，而不是破坏页面布局。

     .table-container {
     overflow-x: auto;
     }

     然后把你的 <table> 放进一个 <div class="table-container"> 中。

通过本教程,你已经学会了：

• 何时使用表格： 仅用于展示结构化数据,而非页面布局。
• 如何创建和编辑表格： 使用“插入”面板和“属性”检查器。
• 如何使用 CSS 美化表格： 利用“CSS 设计器”面板，轻松实现边框、颜色、间距、隔行变色等效果。
• 一些高级技巧： 排序、可访问性设置和响应式处理。

你可以自信地在 Dreamweaver 中创建既美观又功能完善的表格了！多加练习,你很快就能掌握这些技巧。