HTML 中的 tfoot-html教學-PHP中文網

HTML 如何在 tfoot 上運作？

HTML 中的 tfoot 範例

範例#2

輸出：

Example #3

Conclusion

首頁

web前端

html教學

HTML 中的 tfoot

PHPz

Sep 04, 2024 pm 04:32 PM

html html5 HTML Tutorial HTML Properties HTML tags

眾所周知，HTML 中的 tfoot 使用稱為表格的元素來表示表格資料。它由諸如

、等元素組成。、其中等。是表格中的重要元素之一，用於顯示表格列的摘要部分。

;標籤必須放置在

、、之後。表中的標記。可以在之前顯示此標籤。或在之後或元素。每當表格中有多個頁面可用時，這些元素可以幫助使用者將表格頁腳放在頁面底部並獨立捲動表格內容。

文法

定義

的語法標籤如下：

<table>
<thead>
<tr>….</tr>
</thead>
<tbody>
<tr>….</tr>
<tr>….</tr>
</tbody>
<tfoot>
<tr>
<td>….</td>
</tr>
</tfoot>
</table>

登入後複製

根據上述語法，

標籤內包含的文字被視為表頁腳。標籤可以包含一個或多個標籤。元素。

; tag支援不同的屬性，我們一一看看：

align： 此屬性有助於參考其內容對齊文字。

valign：這些屬性有助於將內容對齊到其文字的垂直對齊方式。

char:關於

的重要屬性之一標籤用於將標題單元格中的文字與其相關字元對齊。

Charoff：這是用來設定 char 屬性的一個更重要的屬性。這些類型的屬性以數字形式定義。

我們可以決定

的位置透過定義諸如向左對齊、向單元格中心對齊、向單元格右側對齊之類的值來標記標籤，在文本內容周圍插入或調整特定的space0020，用於將文字內容與具有最小偏移量的特殊字元對齊的字元等。

此標籤可以與不同的 CSS 屬性一起使用，如下所示：

text-align:此屬性有助於在文字內容的幫助下直接左對齊、右對齊、對齊或居中對齊頁腳文字。

bgcolor:為了讓表格單元格更具吸引力，此屬性幫助我們將顏色設定為列單元格的背景。

font-style:可以賦予文本樣式，它包含在

中。標籤。字體的值可以設定為普通、斜體、首字母、繼承等

font-size：使用者可以使用此樣式屬性根據需要顯示不同大小的文字。

字型粗細：人們可以決定文字是粗體還是斜體。

文字轉換：此屬性有助於顯示文字大寫或控製文字大小寫。

text-decoration:如果我們想裝飾

中包含的文本，標籤，因此我們可以將此屬性用於文本裝飾線、文本裝飾樣式、文本裝飾顏色等

text-shadow:此屬性可協助您為文字新增陰影。

line-height:它將有助於設定給定行的高度。

word-spacing：它是在單字之間給出特定空間的重要屬性之一。

HTML 如何在 tfoot 上運作？

;元素與組合使用。和它將定義表格的每個元素，如頁首、頁尾和正文。該標籤將使用一個或多個

內的元素元素，因此它將有助於顯示表格內容的摘要。它應該放在桌子的底部。的主要工作是tag是為了維護大表資料。這將允許用戶獨立顯示表格的內容，從而讓用戶感受到更好的可用性體驗。

讓我們來看一個例子來了解

到底是如何實現的。標籤將在 HTML 中工作：

範例：

<table>
<thead>
<tr>
<th>Emp_ID<th>
<th>Name<th>
<th>Designation<th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>John</td>
<td>Developer</td>
</tr>
<tr>
<td>112</td>
<td>Krishna</td>
<td>Tester</td>
</tr>
<tr>
<td>113</td>
<td>Danish</td>
<td>Project Manager</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Employee</td>
<td> 3 </td>
</tr>
</tfoot>
</table>

登入後複製

所以在上面的例子中，

標籤將顯示表中員工的總數。

HTML 中的 tfoot 範例

HTML 中 tfoot 的範例如下所示：

範例#1

此處顯示了使用正常

的 Budget-2020b 範例標籤：

代碼：

<!DOCTYPE html>
<html>
<head>
<style>
thead {
background-color:cadetblue;
color: #fff;
}
tbody {
background-color: lightcyan;
}
table {
border-collapse: collapse;
border: 2px solid rgb(180, 180,180);
}
td,
th {
border: 1px solid rgb(200, 200, 200);
padding: 5px 5px;
}
td {
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Decreasing Prices</th>
<th >Increasing Prices</th>
</tr>
</thead>
<tbody>
<tr>
<td>SOYA PROTEIN</td>
<td>CONSUMERS HAVE TO SHELL MORE FOR CHEMICALS</td>
</tr>
<tr>
<td >SOYA FIBRE</td>
<td>AUTO PARTS</td>
</tr>
<tr>
<td >ALCOHOLIC BEVERAGES</td>
<td>FANS, TABLEWARE </td>
</tr>
<tr>
<td >SKIMMED MILK </td>
<td>KITCHENWARE PRICES TO </td>
</tr>
<tr>
<td >FUSE, CHEMICALS, PLASTICS</td>
<td>MEDICAL EQUIPMENT COSTLIER</td>
</tr>
<tr>
<td >LIGHTWEIGHT-COATED PAPER </td>
<td>FURNITURE </td>
</tr>
</tbody>
<tfoot>
<tr>
<th>CHEAPER PRODUCTS</th>
<th>EXPENSIVE PRODUCTS</th>
</tr>
</tfoot>
</table>
</body>
</html>

登入後複製

輸出：

HTML 中的 tfoot

範例#2

這裡定義了

；一旦就被標記完成：

代碼：

<!DOCTYPE html>
<html>
<head>
<title>HTML tfoot Tag</title>
<style>
table{
border-collapse: collapse;
}
thead,tfoot{
background-color:darkgoldenrod;
color:white;
padding:5px;
}
tbody{
background-color:azure;
padding:5px;
}
</style>
</head>
<body>
<h4>tfoot in HTML</h4>
<table border="1" >
<thead>
<tr>
<th>Subject</th>
<th>Marks</th>
<th>Grades</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total Marks</th>
<th>647</th>
<th>A+ </th>
</tr>
</tfoot>
<tbody>
<tr>
<td>English</td>
<td>90</td>
<td>A+</td>
</tr>
<tr>
<td>Math</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<td>Science</td>
<td>80</td>
<td>A</td>
</tr>
<tr>
<td>History</td>
<td>75</td>
<td>B</td>
</tr>
<tr>
<td>Social Science</td>
<td>75</td>
<td>B</td>
</tr>
<tr>
<td>History</td>
<td>72</td>
<td>B</td>
</tr>
<tr>
<td>Geography</td>
<td>95</td>
<td>A+</td>
</tr>
<tr>
<td>Biology</td>
<td>75</td>
<td>B</td>
</tr>
</tbody>
</table>
</body>
</html>

登入後複製

輸出：

HTML 中的 tfoot

Example #3

General Example on tfoot tag.

Code:

<!DOCTYPE html>
<title>tfoot tag</title>
<style>
table, td, th {
border: 1px solid black;
padding: 3px;
text-align: center;
}
table {
background-color:lightgray;
}
</style>
<table>
<thead>
<tr><th>Department</th><th>Number of People</th></tr>
</thead>
<tbody>
<tr>
<td>Principle</td>
<td>1</td>
</tr>
<tr>
<td>Supervisor</td>
<td> 4 </td>
</tr>
<tr>
<td>Teaching staff</td>
<td>200</td>
</tr>
<tr>
<td>Non-Teaching staff</td>
<td>20</td>
</tr>
<tr>
<td>Peon</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr><th>Total People</th><th>236</th></tr>
</tfoot></table></html>

登入後複製

Output:

HTML 中的 tfoot

Conclusion

From all the above information, we can say that is one of the important tags in the table, which helps to display the table summary at the bottom of the table. It’s always necessary to put tag at ends, so it will help the browser to render the table footer correctly.

以上是HTML 中的 tfoot的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn