Web前端技术 · 第3课 4 / 25 | 编码:L03-08
HTML5中的表格

第二步:用 th 说明数据的含义

保留上一页的数据,增加表头行,并把主题名称改为行表头。

<table>
    <tr>
      <th>主题</th>
      <th>学时</th>
    </tr>
    <tr>
      <th>网页设计基础</th>
      <td>2</td>
    </tr>
    <tr>
      <th>初识HTML5</th>
      <td>2</td>
    </tr>
</table>

看第一个“2”:“学时”说明它表示什么,“网页设计基础”说明它属于哪个主题。这里的 th 为数据提供含义,而不只是让文字更醒目。现在共有3行、2列,表头行也算一行。

th 不是“加粗标签”:把 td 的文字加粗,外观可能相同,却不会因此具有表头语义。后续将用 scope 属性进一步明确表头对应的行或列。