区分 HTML 表格中的 <th> 和 <thead> 标签

htmlweb developmentfront end technology更新于 2025/4/20 6:04:17

在了解它们之间的区别之前，我们需要先了解 <th> 和 <thead> 标签都用于在 HTML 表格中提供标题。但是，<th> 标签用于在表格单元格中提供标题，而 <thead> 标签用于为表格组提供标题。

这两个标签不能互相替换，输出结果也不会改变，因为只有开发人员或浏览器才能理解其中的区别。

让我们深入研究本文，更好地理解 HTML 表格中 <th> 和 <thead> 标签之间的区别。

HTML <th>

<!DOCTYPE html>
<html>
<style>
   table,
   th,
   td {
      border: 2px solid #A569BD;
   }
</style>
<body style="background-color:#D5F5E3 ">
   <table>
      <tr>
         <th>Car</th>
         <th>Price</th>
      </tr>
      <tr>
         <td>RS7</td>
         <td>$1000</td>
      </tr>
      <tr>
         <td>Bugati</td>
         <td>$8000</td>
      </tr>
   </table>
</body>
</html>

执行上述代码后，将生成一个包含表格及其应用 CSS 的输出，并显示在网页上。

HTML <thead> 标签

<thead> 标签帮助浏览器或搜索引擎识别表格标题在表格主体中的位置。此标签支持 <tbody> 和 <tfoot>。为了在表格中使用此标签，<thead> 内部必须有一个 <tr> 标签。当需要打印包含多个页面的较大表格时，此元素也非常有效，因为它可以将表格的页眉和页脚打印在页面的顶部和底部。

语法

以下是 HTML <thead> 标签的语法

<thead>
   <tr>
      <th> </th>
      <th> </th>
   </tr>
</thead>

示例

在下面的例子中，我们将使用 HTML <thead> 标签。

<!DOCTYPE html>
<html>
<style>
   thead {
      color: #6C3483;
   }

   tbody {
      color: #DE3163;
   }

   tfoot {
      color: #145A32;
   }

   table,
   th,
   td {
      border: 2px solid #DFFF00;
   }
</style>
<body>
   <table>
      <thead>
         <tr>
            <th>Bike</th>
            <th>Price</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Vespa</td>
            <td>1000</td>
         </tr>
         <tr>
            <td>Enfield</td>
            <td>1100</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <td>Total</td>
            <td>2100</td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

运行上述代码后，将弹出输出窗口，在网页上显示应用了 CSS 的表格。

<th> 和 <thead> 标签之间的区别

让我们来看看 <th> 和 <thead> 标签之间的一些区别

<th> 标签	<thead>标签
它属于内联块元素家族。	它是一种特殊的块级元素。
它使用户能够区分表头和数据单元格。	它使用户能够支持单独的表头和表尾滚动。
它指定单元格的表头。	它描述了组表的标题。
由于表头是粗体的，因此用户可以看到表头。	用户无法看到标题。
它是列的标题。	它是表格的标题。
表格本身包含输出。	用户无法看到输出;它仅适用于浏览器。
它会影响表格的设计。	它对设计没有影响。
指定每行开头或结尾的垂直标题。	它指定全宽的水平标题。