阅读(24)

HTML 表头

最后一次修改 2017年08月03日

HTML表头


td th 元素定义headers属性,可用于使用屏幕阅读器和其他技术更容易地处理表。

headers属性的值是一个或多个单元的ID属性值。

以下代码显示了如何使用此属性。

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th, tfoot th {
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}

thead [colspan], tfoot [colspan] {
  text-align: center;
}
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th id="rank">Rank</th>
        <th id="name">Name</th>
        <th id="color">Color</th>
        <th id="sizeAndVotes" colspan="2">Size & Votes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="first" headers="rank">Favorite:</th>
        <td headers="name first">XML</td>
        <td headers="color first">HTML</td>
        <td headers="sizeAndVote first">CSS</td>
        <td headers="sizeAndVote first">ABC</td>
      </tr>
      <tr>
        <th id="second" headers="rank">2nd Favorite:</th>
        <td headers="name second">Empty</td>
        <td headers="color second">XYZ</td>
        <td headers="sizeAndVote second">ABC</td>
        <td headers="sizeAndVote second">A</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="5">&copy; 2011 www.html.cn Fruit Data Enterprises</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

全局id属性被添加到tbody中的thead和th元素中的th个元素。

对于 tbody 中的每个 td th headers属性将单元格与列标题相关联。