tfoot in HTML

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:

….….….

….

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:

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

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:

<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

Output:

Example #2

Here its defined

tag as soon as finishes:

Code:

<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

Output:

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

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