码农教程 - 一技在手,衣食无忧! tools

HTML <thead> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

包含 <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>元素与<正文>和<t脚>元素来指​​定表格的每个部分（页眉、正文、页脚）。

浏览器可以使用这些元素来独立于页眉和页脚滚动表格主体。此外，当打印跨多个页面的大型表格时，这些元素可以使表格页眉和页脚打印在每页的顶部和底部。

笔记：这个<thead>元素必须有一个或多个<tr>里面有标签。

这个<thead>标签必须在以下上下文中使用：作为<表>元素，在任意之后<标题>和<colgroup>元素，并且在任何之前<正文>,<t脚>， 和<tr>元素。

提示：这个<thead>、 <tbody> 和 <tfoot> 元素默认不会影响表格的布局。但是，您可以使用 CSS 来设置这些元素的样式（请参见下面的示例）！

浏览器支持

Element
<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;
}


❮上一节 完整的 HTML参考 下一节❯