所属分类：web前端开发
本文中我们要执行的任务是如何在 HTML 中创建表页脚。由于我们对 HTML 中的表格很熟悉，所以让我们快速了解一下它。
当您想要组织在电子表格中看起来最好的数据时，HTML 表格非常有意义。表是数据行和列的直观表示。您可以使用表格将照片、文本、链接等数据组织到 HTML 单元格的行和列中。
在 HTML 表格中，
标记指定组成表格页脚的一组行。它可用于统计表中的列，并经常用于显示列总计。传统上，您将使用 CSS 设计 标记来引起对列总计的注意。 元素是此标记经常使用的另一个名称。为了更好地了解如何在 HTML 中创建表页脚。让我们看看下面的例子
在下面的示例中，我们使用
标记将页脚添加到表格中。
微博登录
QQ登录<!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>
运行上述脚本时，会弹出输出窗口，显示使用上述脚本中使用的数据创建的表格，以及添加到网页表格中的页脚文本。
考虑以下示例，我们将使用 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>
执行脚本时，它将生成一个输出，显示根据脚本数据绘制的表格以及添加到网页的页脚。
让我们看一下另一个例子，我们正在创建一个带页脚的表格。
<!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>
运行上述脚本时，它将生成一个输出，其中包含使用脚本中给出的数据绘制的表格以及网页上的页脚。
