HTML 中的 tfoot

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

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

;標籤必須放置在

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

文法

定義

的語法標籤如下：

….….….

….

根據上述語法，

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

; 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 中工作：

範例：

Emp_ID		Name		Designation
111	John	Developer
112	Krishna	Tester
113	Danish	Project Manager
Total Employee	3

所以在上面的例子中，

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

HTML 中的 tfoot 範例

HTML 中 tfoot 的範例如下所示：

範例#1

此處顯示了使用正常

的 Budget-2020b 範例標籤：

代碼：

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

Decreasing Prices	Increasing Prices
SOYA PROTEIN	CONSUMERS HAVE TO SHELL MORE FOR CHEMICALS
SOYA FIBRE	AUTO PARTS
ALCOHOLIC BEVERAGES	FANS, TABLEWARE
SKIMMED MILK	KITCHENWARE PRICES TO
FUSE, CHEMICALS, PLASTICS	MEDICAL EQUIPMENT COSTLIER
LIGHTWEIGHT-COATED PAPER	FURNITURE
CHEAPER PRODUCTS	EXPENSIVE PRODUCTS

輸出：

範例#2

這裡定義了

；一旦 就被標記完成：

代碼：

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


<h4 id="tfoot-in-HTML">tfoot in HTML</h4>

Subject	Marks	Grades
Total Marks	647	A+
English	90	A+
Math	85	A
Science	80	A
History	75	B
Social Science	75	B
History	72	B
Geography	95	A+
Biology	75	B

輸出：

Example #3

General Example on tfoot tag.

Code:

<title>tfoot tag</title>
<style>
table, td, th {
border: 1px solid black;
padding: 3px;
text-align: center;
}
table {
background-color:lightgray;
}
</style>

Department	Number of People
Principle	1
Supervisor	4
Teaching staff	200
Non-Teaching staff	20
Peon	15
Total People	236

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