HTML 表頭

2020-07-24 13:45 更新

HTML表頭 —— headers

<td>和<th>元素定義 headers 屬性，可用于使用屏幕閱讀器和其他技術(shù)更容易地處理表。

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">風(fēng)向</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">南風(fēng)</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">南風(fēng)</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="4">&copy; 2020 www.o2fo.com 編程獅</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

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

對于 tbody 中的每個 td 和 th headers 屬性將單元格與列標(biāo)題相關(guān)聯(lián)。




以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號