HTML5中的表格
第二步:用 th 说明数据的含义
保留上一页的数据,增加表头行,并把主题名称改为行表头。
th— Table Header(表头单元格):声明这个单元格是表头,用来说明相关数据的含义;整行仍由tr包住。- 语义作用:让浏览器和屏幕阅读器识别表头,帮助理解数据关系。表头可以出现在顶部,也可以出现在一行的开头。
- 默认外观:浏览器通常把表头文字加粗、居中;外观可以通过CSS改变,但表头身份不会因此改变。
<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 属性进一步明确表头对应的行或列。