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.ancii.com Fruit Data Enterprises</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>
点击查看实例

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

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

新闻动态 联系方式 广告合作 招聘英才 安科实验室 帮助与反馈 About Us

Copyright © 2013 - 2019 Ancii.com All Rights Reserved京ICP备18063983号-5 京公网安备11010802014868号