HTML 表格页脚

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在 HTML 中,你可以使用 <tfoot> 标签来分组表格的页脚内容。表格页脚可以包含摘要信息、解释性说明或注释。<tfoot> 标签是 <table> 标签的子元素之一,通常与 <thead><tbody> 标签一起使用。在本实验中,你将学习如何使用 <tfoot> 标签在 HTML 中创建表格页脚。

注意:你可以在 index.html 中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TablesGroup(["Tables"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/layout -.-> lab-70862{{"HTML 表格页脚"}} html/tables -.-> lab-70862{{"HTML 表格页脚"}} html/complex_tbl -.-> lab-70862{{"HTML 表格页脚"}} html/tbl_access -.-> lab-70862{{"HTML 表格页脚"}} end

创建基本表格结构

首先创建一个包含表头(table header)、表体(table body)和表尾(table footer)部分的基本表格结构。

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Table Footer</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

在上面的代码中,我们创建了一个包含三列(Name、Age 和 Gender)的基本表格结构,并添加了三行数据。<tfoot> 标签中只包含一行,其中有一个单元格(<td>),该单元格横跨三列(colspan="3")。

向表格页脚添加内容

在创建了基本的表格结构后,你可以向 <tfoot> 标签中添加内容。

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

在这个例子中,我们向 <tfoot> 标签中添加了一行,其中包含表格中人员的平均年龄。该行的第一个单元格横跨两列(colspan="2"),并显示文本 "Average Age:"。第二个单元格显示实际的平均年龄值。

为表格页脚应用 CSS

你可以为 <tfoot> 标签及其子元素应用 CSS 样式,以调整表格页脚的外观。

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
    <style>
      tfoot {
        background-color: #ccc;
        font-weight: bold;
        text-align: center;
      }
      tfoot td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

在这个例子中,我们使用 CSS 的 tfoot 选择器为 <tfoot> 标签应用了背景颜色、字体粗细和文本对齐样式。我们还使用 tfoot td 选择器为表格页脚部分的单元格应用了内边距(padding)。

总结

<tfoot> 标签用于分组表格的页脚内容。它与 <thead><tbody> 标签配合使用,共同构建完整的表格结构。你可以使用 HTML 和 CSS 为 <tfoot> 标签及其子元素添加内容和样式。