检查所需的表格或版面功能，不依赖过时做法

网页试题会列出所需的功能，你要证明每一项都做到了才能得分。这项技能结合了两个习惯：表格只用于数据，以及把外观从过时的显示标签移到 CSS 里。它是网页制作单元的收尾，因为重点在于检查。

怎样建立表格？

表格由行（tr）、表头单元格（th）和数据单元格（td）组成。

<table>
  <caption>Club timetable</caption>
  <tr>
    <th>Day</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Portraits</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>Editing</td>
  </tr>
</table>

caption 给表格命名。边框、内边距和颜色用 CSS 添加，方法见样式表那一课。

怎样一步步检查任务要求？

1. 把任务的每项要求各列成一行。
2. 在你的文件中找到满足每一项的那行代码。
3. 判断内容是否是行列形式的数据：是就用表格，不是就用其他元素。
4. 把外观从标签里移出去：颜色、对齐和字体写在样式表里。
5. 打开页面，看实际效果，而不只是看代码。
6. 只有能指出证据时，才给那一行打勾。

例题

一道虚构的任务要求：把时间表做成带表头行的表格，表头单元格用浅灰色背景，页面标题居中。

第 1 步： 时间表有数据的行和列，所以用 table，第一行用 th 单元格。

第 2 步： 在样式表里加入：

th {
  background-color: lightgrey;
}

h1 {
  text-align: center;
}

第 3 步： 对照清单检查：表头行已有，表头背景已设置，标题已居中。每项都有对应的证据，所以每项都可以打勾。

要留意的错误

常见的失误是依赖过时教程里的旧习惯。

<center><font color="red">Sale</font></center>

center 和 font 标签已经过时，而且把外观混进了内容里。另一种形式是用看不见的表格把菜单放在页面左边，这是误用了表格。改正方法是用带类的普通段落，把外观写进样式表：

<p class="sale">Sale</p>

.sale {
  text-align: center;
  color: red;
}

自我检测

1. 哪种内容应该放进表格：四个项目及其价格的价目表，还是介绍社团的一段文字？

2. 在上面的表格中，哪些单元格是 th？

3. 一个学生想要蓝色标题，写了 <h2><font color="blue">Events</font></h2>。写出更好的版本。

接下来学什么？

用网页制作练习题来结束这个单元，它综合了全部五项技能。哪项技能觉得薄弱，就回到单元指南复习，并用实操任务与证据检查器检查你自己的任务。

学生可能把表格建对了，却漏掉任务要求中的某一行。我们的老师会在一对一 ICT 线上补习中带你逐行检查。