如何在 HTML 中為單元格新增一個或多個與之相關的表頭單元格？

HTML 文字中的 headers 屬性與 td 和 th 標籤一起，允許我們新增一個或多個表頭單元格。它儲存 header id 值，該值指定與表格表頭單元格相關聯的一個或多個表頭單元格的 id 列表，空格分隔。

語法

 
<td headers="header_id"> Content..</td>

以下是示例...

示例

在以下示例中，我們使用 headers 在表格中新增所需的表頭單元格。

<!DOCTYPE html>
<html>
   <style>
      table {
         border: 3px solid black;
      }

      td {
         border: 1px solid green;
         text-align: center;
      }
   </style>
<body>
   <center>
      <table style="width:500px">
         <tr>
            <th id="CARS" colspan="3">
               LIST OF CARS
            </th>
         </tr>
         <tr>
            <td Headers="CARS">BENTLEY</td>
            <td Headers="CARS">AUDI RS7</td>
            <td Headers="CARS">DUCATI</td>
         </tr>
         <tr>
            <th id="BIKES" colspan="3">
               LIST OF BIKES
            </th>
         </tr>
         <tr>
            <td Headers="BIKES">KAWASAKI</td>
            <td Headers="BIKES">HAYABUSA</td>
            <td Headers="BIKES">DODGE TOMAHAWK</td>
      </table>
   </center>
</body>
</html>

輸出

執行上述指令碼後，會在我們的網頁中建立帶有不同表頭單元格的表格。

示例

以下是使用 headers 屬性的另一個示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 2px solid blue;
      }
   </style>
</head>
<body>
   <table style = "width:100%">
      <tr>
         <th id = "name">Subject ID</th>
         <th id = "email">Subject Name</th>
      </tr>
      <tr>
         <td headers = "name">001</td>
         <td headers = "email">Mathematics</td>
      </tr>
   </table>
</body>
</html>

輸出

執行上述指令碼後，輸出將以包含兩列的表格的形式獲得，即科目 ID 和科目名稱，其表頭包含學生的姓名和電子郵件地址。

更新於： 05-9月-2022

280 次瀏覽

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.