html表格:标题与

Question

看起来(不管怎么说，根据this page上的例子)如果你使用的是THEAD，你就不需要使用TH。

这是真的吗？如果是这样的话，THEAD与TH的优缺点是什么？

Answer 1

<thead>标签用于对HTML表中的标题内容进行分组。thead元素应该与tbody和tfoot元素一起使用。

更多信息：thead

您可以使用<thead>封装整行(或多行)，以将它们指定为表头。根据说明书，

“此分区使用户代理支持独立于表头和表尾滚动表体。打印长表时，表头和表尾信息可能会在包含表数据的每一页上重复。”

另一方面，<th>用于将特定单元格样式化为标题单元格，而不是普通数据单元格。

Answer 2

当您想要将一个单元格标记为标题单元格时，<th>实际上是<td>的替代品。

如果你想使用<thead>和<th>，别忘了在<tr>中嵌套<th>。否则代码可能无效。

示例：

​

<table>
  <thead>
    <tr>
      <!-- scope="col" is optional if the th is inside a thead -->
      <th scope="col">Season</th>
      <th scope="col">Goals</th>
      <th scope="col">Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- scope="row" indicates that the th is a header for that row -->
      <th scope="row">2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th scope="row">2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

​

Answer 3

与可能驻留在thead内部的内容相比，th更加具体。th单元用于指定相应td单元的报头。实际上，您可以向td单元格添加headers属性，该属性指向th单元格的id (用于屏幕阅读器)。因此，th与该列的td直接相关。

但是，thead可以包含任何标题，是的，它确实包含th单元格，但它也可以包含您认为合适的任何内容，作为表格顶部的信息(不包括标题，因为它也有自己的标记)。