如何在 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 和科目名称，表头由学生姓名和电子邮件地址组成。

更新于： 2022-09-05

280 次浏览

开启您的 职业

完成课程即可获得认证

开始
广告