如何在 HTML 中创建表页脚?

htmlfront end technologyweb development更新于 2024/8/10 6:36:17

本文将介绍如何在 HTML 中创建表页脚。由于我们熟悉 HTML 中的表格，我们来快速了解一下。

当您想要在电子表格中以最佳方式组织数据时，HTML 中的表格非常有用。表格是数据行和列的可视化表示。您可以使用表格将照片、文本、链接等数据组织到 HTML 单元格的行和列中。

HTML 表页脚

在 HTML 表格中，<tfoot> 标签指定组成表页脚的一组行。它可用于统计表格中的列，并经常用于显示列总计。传统上，您会使用 CSS 设计 <tfoot> 标签来突出列总计。<tfoot>元素是此常用标签的另一个名称。

为了更好地理解如何在 HTML 中创建表格页脚，我们来看看以下示例

示例 1

在下面的示例中，我们使用 <tfoot> 标签向表格添加页脚。

<!DOCTYPE html>
<html>
<body>
   <table width="400" border="1">
      <caption>
         FASTEST 100 IN ODI'S
         <hr>
      </caption>
      <thead>
         <tr>
            <th>Name</th>
            <th>Country</th>
            <th>Balls</th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <th colspan="3">AB de Villiers- the Best Player!</th>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>AB de Villiers</td>
            <td>South Africa</td>
            <td>31</td>
         </tr>
         <tr>
            <td>CJ Anderson</td>
            <td>New Zealand</td>
            <td>36</td>
         </tr>
         <tr>
            <td>Shahid Afridi</td>
            <td>Pakistan</td>
            <td>37</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

运行上述脚本后，将弹出输出窗口，显示使用上述脚本中的数据创建的表格，以及添加到网页上表格的页脚文本。

示例 2

以下示例使用 CSS 添加 <tfoot> 的样式。

<!DOCTYPE html>
<html>
<head>
   <style>
      thead {color: #58D68D;}
      tbody {color:#A569BD ;}
      tfoot {color:#2C3E50 ;}
      table, th, td {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h1>MONTHLY SAVINGS</h1>
   <table>
      <thead>
         <tr>
            <th>Month</th>
            <th>Savings</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>OCTOMBER</td>
            <td>$25</td>
         </tr>
         <tr>
            <td>NOVEMBER</td>
            <td>$50</td>
         </tr>
         <tr>
            <td>DECEMBER</td>
            <td>$30</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <td>TOTAL</td>
            <td>$105</td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

脚本执行后，将生成一个输出，显示一个基于脚本数据绘制的表格，并在网页中添加一个页脚。

示例 3

我们来看另一个创建带页脚的表格的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      table, td {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <table style = "width:100%">
      <thead>
         <tr>
            <td colspan = "4">This is the head of the table</td>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td colspan = "4">This is the footer of the table</td>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
      </tbody>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

运行上述脚本后，它将生成一个输出，该输出包含使用脚本中给出的数据绘制的表格以及网页上的页脚。