轻松上手,快乐学习!

HTML <thead> 标签



实例

带有 thead、tbody 以及 tfoot 元素的 HTML 表格:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
亲自试一试 »

下面有更多实例。


定义和用法

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbodytfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

注释: <thead> 元素内部必须有一个或多个 <tr> 标签。

<thead> 标记必须在以下上下文中使用:作为 table 元素的子元素,在任何 caption 和 colgroup 元素之后,在任何 tbody、tfoot 和 tr 元素之前。

提示: 在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。


浏览器支持

元素
<thead> Yes Yes Yes Yes Yes

全局属性

<thead> 标签支持 HTML 中的全局属性


事件属性

<thead> 标签支持 HTML 中的事件属性


更多实例

实例

使用CSS设置 <thead>, <tbody>, <tfoot> 样式:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}

table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
亲自试一试 »

实例

如何对齐内容 <thead> (使用 CSS):

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
亲自试一试 »

实例

如何垂直对齐内容 <thead> (使用 CSS):

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
   <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
亲自试一试 »

默认CSS设置

大多数浏览器将使用以下默认值显示 <thead> 元素:

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}