【HTML教程】HTML的thead标签|html入门知识

攻城狮与产品喵

发布于 2026-05-11 12:49:05

830

文章被收录于专栏：攻城狮与产品喵攻城狮与产品喵

——致力做企业用得上的平台； ——开发企业节省成本的系统；

#thead标签 #HTML教程 #HTML标签 #html入门知识

【定义和用法】

thead标签用于对 HTML 表格中的标题内容进行分组。

thead元素与 tbody和 tfoot元素结合使用，以规定表格的每个部分(页眉、正文、页脚)。

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

注意：thead元素内部必须有一个或多个 tr标签。

thead标签必须在以下上下文中使用：作为 table元素的子元素，在任何 caption和 colgroup元素之后，以及在任何 tbody、tfoot和 tr元素之前。

提示：默认情况下，thead、tbody和 tfoot元素不会影响表格的布局。但是，您可以使用 CSS 来设置这些元素的样式(请参阅下面的例子)!

【实例】

例子 1

包含 thead、tbody和 tfoot元素的 HTML 表格：

<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>储蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot></table>

例子 2

使用 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>月份</th>
      <th>储蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot></table>

例子 3

如何对齐 thead中的内容(使用 CSS)：

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>月份</th>
      <th>储蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody></table>

例子 4

如何垂直对齐 thead中的内容(使用 CSS)：

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>月份</th>
      <th>储蓄</th>
    </tr>
  </thead>
   <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody></table>

【默认的 CSS 设置】

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

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-04-29，如有侵权请联系 cloudcommunity@tencent.com 删除

教程

本文分享自攻城狮与产品喵微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度