如何在 HTML 中添加一个或多个与某个单元格关联的标题单元格?

htmlweb developmentfront end technology更新于 2025/4/10 5:32:17

HTML 文本中的 headers 属性以及 td 和 th 标签允许我们添加一个或多个标题单元格。它的值为 header id，该值指定了与表格标题单元格关联的一个或多个标题单元格的 ID 列表，这些 ID 之间以空格分隔。

语法

<td headers="header_id"> 内容..</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>