HTML 中的 tfoot
- PHPz原创
- 2024-09-04 16:32:161027浏览
众所周知，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 上工作？
;元素与 组合使用。和它将定义表格的每个元素，如页眉、页脚和正文。该标签将使用一个或多个
让我们看一个例子来了解
到底是如何实现的。标签将在 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>
输出：
示例#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>
输出：
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:
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中文网其他相关文章！
css html define if count for include char using Attribute Property this display position background transform column table tbody td tr word
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn