如何在 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 次浏览

开启你的职业生涯

通过完成课程获得认证

开始学习
广告