数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在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+浏览量
广告