Home > Article > Web Front-end > tfoot in HTML

tfoot in HTML

PHPzOriginal: 2024-09-04 16:32:161032browse

As we know tfoot in HTML uses elements called a table for tabular data representation. This is made up with elements like , , etc. Among them is one of the important elements in the table for displaying the summary part of the table columns.

tag must be placed after , , tag in the table. One can show this tag either before or after or elements. Whenever there are multiple pages are available in the table, these elements help the user put the table footer at the bottom of the page and scroll table contents independently.

Syntax

Syntax for defining tag is as follows:

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

From the above syntax, text enclosed within the tag treated as table footer.tag may include one or more elements.

tag supports different attributes, let’s see them one by one:

align: This attribute helps to align text with reference to its contents.

valign: These attributes helpful for aligning contents into the vertical alignment of its text.

char: One of the important attributes with respect to tag is used to align text in a header cell to its respected character.

Charoff: This is one more important attribute used for setting char attributes. Those kinds of attributes are defined in numeric form.

We can decide the position of the tag by defining values like alignment to the left, to the center of the cell, to the right of the cell, insert or justify particular space0020around textual content, char for alignment of text content with a special character with minimal offset, etc.

This tag can be used with different CSS properties are as follows:

text-align: This property helps to align the text of the footer either in left, right, justify or center directly with the help of text content.

bgcolor: To make the table cell more attractive, this property helps us to set color as a background to the cell of the column.

font-style: One can give styling to the text, which is included within tag. One can set the value to the font as normal, italic, initial, inherit, etc.

font-size: Users may able to show text in different sizes as they want using this styling property.

font-weight: One can decide whether their text should be either bold or italic.

text-transform: This property helps to show text capitalization or to control text case.

text-decoration: If we want to decorate text which is included within tag so we can use this property to text-decoration line, text- decoration-style, text-decoration-color etc.

text-shadow: This property helps you to add shadow to the text.

line-height: It will help to set the height to the given line.

word-spacing: It is one of the important properties to give specific space between words.

How does HTML work on tfoot?

element is used with combination of and which will define every elements of table like header, footer and body. This tag will use one or more elements within elements, so it will help to display a summary of the table content. It should be placed at the bottom of the table. The main working of the tag is to maintain large table data. This will allow the user to display the table’s contents independently so the user can feel a better experience in usability.

Let’s see one example of how exactly tag going to work in HTML:

Example:

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

So in the above example, the tag will display the total count of employees from the table.

Examples of tfoot in HTML

The example of tfoot in HTML is shown below:

Example #1

Here its shown an example of Budget-2020b using normal tag:

Code:

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

Output:

tfoot in HTML

Example #2

Here its defined tag as soon as finishes:

Code:

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

Output:

tfoot in 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:

tfoot in HTML

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.

The above is the detailed content of tfoot in HTML. For more information, please follow other related articles on the PHP Chinese website!

css html define if count for include char using Attribute Property this display position background transform column table tbody td tr word

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Frame Tag in HTMLNext article：Frame Tag in HTML

See more

tfoot in HTML

How does HTML work on tfoot?

Examples of tfoot in HTML

Example #1

Output:

Example #2

Example #3

Conclusion

Related articles