資料結構
網路
關係資料庫管理系統 (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+瀏覽量
廣告