0Pricing
HTML Academy · 课时

thead、tbody 与 tfoot 结构

将表格行组织到语义化的表头、表体和表尾区域中。

thead、tbody 与 tfoot 结构 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

表格的各个部分

完整的 HTML 表格包含三个可选但建议使用的部分：

  • <thead>——表头行
  • <tbody>——表体行（主要数据）
  • <tfoot>——表尾行（合计、摘要）

表头部分

<thead> 元素包裹表头行：

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

表体部分

<tbody> 元素包裹主要数据行：

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

表尾部分

<tfoot> 元素包裹表尾行，通常用于显示合计或摘要：

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

完整的结构化表格

包含全部三个部分的完整表格：

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

为什么使用表头、表体和表尾？

表格结构的优点：

  • 语义——屏幕阅读器可以理解表头、数据和摘要之间的区别
  • CSS 定位——可以分别设置各个部分的样式
  • 打印——表头会在每个打印页面上重复显示
  • 滚动——使用 CSS 溢出属性可以让表体独立滚动

可滚动的表体

仅让表体滚动，同时固定表头：

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

隐式表体

如果省略 <tbody>，浏览器会自动添加一个：

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

多个表体元素

一个表格可以包含多个 <tbody> 组：

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

设置表格各部分的样式

使用 CSS 定位各个部分：

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

屏幕阅读器的行为

使用正确的表头和表体结构后，屏幕阅读器可以：

  • 播报列标题，为每个数据单元格提供上下文
  • 在各个部分之间导航（表头区域与数据区域）
  • 告知用户表格包含多少行和多少列

包含多行的表头

表头部分可以包含多行，以处理复杂的表头：

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

快速检查

在 HTML 源代码中，表尾通常位于表格的哪个位置？它在渲染后的表格中又位于哪个位置？

回顾：表头、表体和表尾

表格结构要点：

  • <thead>——表头行（打印时重复显示）
  • <tbody>——数据行（可以有多个）
  • <tfoot>——摘要或合计行
  • 支持 CSS 定位表格各部分，并支持无障碍地读取表格
  • 即使浏览器会自动添加表体，也应始终明确写出 <tbody>

常见问题解答

「thead、tbody 与 tfoot 结构」课时是免费的吗？

是的 — 「thead、tbody 与 tfoot 结构」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「thead、tbody 与 tfoot 结构」这节课中我会学到什么？

将表格行组织到语义化的表头、表体和表尾区域中。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「thead、tbody 与 tfoot 结构」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. table、tr、td 与 th
  2. thead、tbody 与 tfoot 结构
  3. 用于跨越单元格的 colspan 与 rowspan
  4. 表格无障碍：scope、summary 与 caption
← 返回 HTML Academy