HTML - <thead> 标签

HTML <thead> 标签用于对 HTML 表格的表头内容进行分组。它与<tbody> 和 <tfoot> 元素一起使用，以指定表格的各个部分。

<thead> 标签应作为 <table> 元素的子元素使用，位于任何 <tbody>、<tfoot> 和 <tr> 元素之前，以及任何 <caption> 和 <colgroup> 元素之后。浏览器可以使用这些元素来实现表格主体独立于表头和表尾进行滚动。

语法

<thead>
   ...
</thead>

属性

HTML tfoot 标签支持 HTML 的全局和事件属性。以下属性已弃用，应使用 CSS 属性代替。

属性	值	描述
align	left right center justify	指定文本内容的对齐方式（已弃用）。
bgcolor	color	指定每列单元格的背景颜色（已弃用）。
char	character	指定每列单元格内容相对于某个字符的对齐方式（已弃用）。
charoff	number	指定每列单元格内容相对于由 char 属性指定的对齐字符的偏移字符数（已弃用）。
valign	baseline bottom middle top	指定每列单元格的垂直对齐方式（已弃用）。

HTML thead 标签示例

以下示例将演示 thead 标签的用法，包括何时何地以及如何使用 thead 标签在 HTML 中创建表头。

在表格中创建表头

让我们来看下面的示例，我们将使用 <thead> 标签。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table>
      <thead>
         <tr>
            <th>Subjects</th>
            <th>Marks</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1A</td>
            <td>72</td>
         </tr>
         <tr>
            <td>1B</td>
            <td>74</td>
         </tr>
         <tr>
            <td>2B</td>
            <td>73</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <td>Total</td>
            <td>219</td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

表格样式

考虑另一种情况，我们将使用 CSS 对 <thead>、<tbody> 和 <tfoot> 进行样式设置。

<!DOCTYPE html>
<html>
   <style>
      thead {
         color: #6C3483;
      }
      tbody {
         color: #196F3D;
      }
      tfoot {
         color: #DE3163;
      }
      table,
      th,
      td {
         border: 1.5px solid #5DADE2;
      }
   </style>
<body>
   <table>
      <thead>
         <tr>
            <th>Items</th>
            <th>Price</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>5Star</td>
            <td>$20</td>
         </tr>
         <tr>
            <td>KitKat</td>
            <td>$25</td>
         </tr>
         <tr>
            <td>MilkyBar</td>
            <td>$10</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <td>Total Bill</td>
            <td>$55</td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

对齐表头内容

以下示例将使用 CSS 将 <thead> 标签内的内容右对齐。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table style="width:100%">
      <thead style="text-align:right">
         <tr>
            <th>Employees</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Ram</td>
            <td>23</td>
         </tr>
         <tr>
            <td>Raju</td>
            <td>22</td>
         </tr>
         <tr>
            <td>Maya</td>
            <td>24</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

表头内容的垂直对齐

在下面的示例中，我们将使用 CSS vertical-align 属性来对齐 <thead> 标签内的内容。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #A569BD;
      }
   </style>
<body>
   <table style="width:50%">
      <thead style="vertical-align:middle">
         <tr style="height:50px">
            <th>Cars</th>
            <th>Countries</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Maserati</td>
            <td>Italy</td>
         </tr>
         <tr>
            <td>Porsche</td>
            <td>Germany</td>
         </tr>
         <tr>
            <td>Dodge</td>
            <td>US</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

支持的浏览器

标签
thead	是	是	是	是	是

html_tags_reference.htm

打印页面