HTML 表头

2020-07-24 13:45 更新

HTML表头 —— headers

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

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

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

<!DOCTYPE HTML>
<html>
<head>
  <title>HTML 表头(w3cschool.cn)</title>
  <style>
    thead th,
    tfoot th {
      text-align: center;
      background: #FE6A00;
      color: white
    }
    tbody th {
      text-align: center;
      background: lightgrey;
      color: grey;
    }
    tbody td {
      text-align: center;
    }
    thead [colspan],
    tfoot [colspan] {
      text-align: center;
    }
    #first,
    #second {
      background: #FAEBD7;
      color: #FE6A00;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th id="time">时间</th>
        <th id="weather">天气</th>
        <th id="temperature">温度/℃</th>
        <th id="wind">风向</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="first">7月24日</th>
        <td headers="weather first">多云</td>
        <td headers="temperatire first">26~37</td>
        <td headers="wind first">南风</td>
      </tr>
      <tr>
        <th id="second">7月25日</th>
        <td headers="weather second">多云</td>
        <td headers="temperatire second">26~36</td>
        <td headers="wind second">南风</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="4">&copy; 2020 www.w3cschool.cn 编程狮</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

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

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




以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号