如何在HTML中创建表格脚注？

我们在本文中将要执行的任务是如何在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>

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

更新于：2022年12月15日

2K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告