您的位置:龙城通 > html表头标签 HTML 表头

html表头标签 HTML 表头

2023-03-22 15:00 HTML教程

html表头标签 HTML 表头

html表头标签 HTML 表头

html表头标签

HTML表头 —— headers

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

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

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

<!DOCTYPE HTML>
<html>
<head>
  <title>HTML 表头(.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..cn 编程狮</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

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

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




阅读全文
以上是龙城通为你收集整理的html表头标签 HTML 表头全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 龙城通 longchengtong.com 版权所有 联系我们
桂ICP备12005667号-36 Powered by CMS