HTML 中的 tfoot-html教程-PHP中文网

HTML 中的 tfoot

PHPz

发布： 2024-09-04 16:32:16

原创

1048 人浏览过

众所周知，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中文网其他相关文章！