如何在HTML中创建表格页脚？-html教程-PHP中文网

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

WBOY

发布： 2023-08-25 15:01:23

转载

2641人浏览过

如何在html中创建表格页脚？

本文中我们要执行的任务是如何在 HTML 中创建表页脚。由于我们对 HTML 中的表格很熟悉，所以让我们快速了解一下它。

当您想要组织在电子表格中看起来最好的数据时，HTML 表格非常有意义。表是数据行和列的直观表示。您可以使用表格将照片、文本、链接等数据组织到 HTML 单元格的行和列中。

HTML 表格页脚

在 HTML 表格中，

标记指定组成表格页脚的一组行。它可用于统计表中的列，并经常用于显示列总计。传统上，您将使用 CSS 设计标记来引起对列总计的注意。元素是此标记经常使用的另一个名称。

为了更好地了解如何在 HTML 中创建表页脚。让我们看看下面的例子

立即学习“前端免费学习笔记（深入）”；

示例 1

在下面的示例中，我们使用

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

查看详情

标记将页脚添加到表格中。

<!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 添加

的样式。

<!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>

登录后复制

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

以上就是如何在HTML中创建表格页脚？的详细内容，更多请关注php中文网其它相关文章！