在 HTML 中创建高效的表格页脚

介绍

在 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> 标签及其子元素添加内容和样式。