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中文网其他相关文章！