Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <tfoot> tag.

Use of <tfoot> tag

The <tfoot> tag defines a set of rows that defines the footer section of a table.
Inside <tfoot> tag, there must be one or more <tr> element.


Some related elements of <tfoot> element:
1. <tr>: It defines a table row.
2. <th>: It defines a table heading.
3. <td>: It defines a table cell.
4. <caption>: It defines a table name.
5. <table>: It defines a HTML table.
6. <col>: It defines a column in table and used in defining the properties of each columns within <colgroup> element.
7. <colgroup>: It defines a group of columns in a table.
8. <thead>: It defines a set of rows that defines header section in a table.
9. <tbody>: It defines a set of rows that defines body section in a table.

Example of <tfoot> tag

<tfoot>
   <tr>
     <td> Sum </td>
     <td> $ 190 </td>
   </tr>
</tfoot>

Supported Browsers.

Tag
<tfoot> Yes Yes Yes Yes Yes

Full Code example

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse:collapse;
}
table, th, td {
border:1px solid blue;
}
td {
text-align: center;
}
thead {
color:red;
}
tbody {
color:green;
}
tfoot {
color:blue;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> Name </th>
<th> Expenditure </th>
</tr>
</thead>
<tbody>
<tr>
<td> Raj </td>
<td> $100 </td>
</tr>
<tr>
<td> Bruce </td>
<td> $130 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Total </td>
<td> $230 </td>
</tr>
</tfoot>
</table>
</body>
</html>

Attributes of <tfoot> tag

Tag Value Notes
align left
center
right
justify
char
It defines the horizontal alignment of the cell content within the <tfoot> element.
bgcolor rgb(x,x,x)
#xxxxxx
color_name
It defines the background-color of each cell of the column element within the <tfoot> element.
char character It defines the alignment of the content to a character in a column within the <tfoot> element.
charoff pixels It defines the number of characters the content will be aligned from the character specified by the char attribute within the <tfoot> element
valign top
middle
bottom
baseline
It defines the vertical alignment of the cell content of column element within the <tfoot> element.

1. align attribute

Explaination:The align attribute defines the horizontal alignment of the column-cell content with respect to its cell within the <tfoot> element.
The align attribute is not supported in HTML5.Use CSS property - "text-align" like
<tfoot style="text-align:center">

Syntax:

<tfoot align="left | center | right | justify | char">

Example:

<table>
<tfoot align="left">
<tr>
<td> Total </td>
<td> $230 </td>
</tr>
</tfoot>
</table>

Supported Browsers

Attribute
align Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
left It defines left alignment content.
center It defines center alignment content.
right It defines right alignment content.
justify It defines equal lines in length.
character It defines content alignment to a specific character.

2. bgcolor attribute

Explaination:The bgcolor attribute defines the background-color of each cell of the column element within the <tfoot> element.
This attribute is not supported in HTML5.Use CSS property "background-color" like
<tfoot style="background-color:red">
Click here, to learn more about HTML color.

Syntax:

<tfoot bgcolor="color_name | hex_number | rgb_number">

Example:

<table>
<tfoot bgcolor="red">
<tr>
<td> Total </td>
<td> $230 </td>
</tr>
</tfoot>
</table>

Supported Browsers

Attribute
bgcolor Not Supported Yes Not Supported Not Supported Not Supported
Attribute values
Attribute Notes
colorname It defines the background-color with a color name like red, green etc.
hex_number It defines the background color with a hex code (like "#ff0700").
rgb_number It defines the background color with a rgb code (like "rgb(255,255,255)").

3. char attribute

Explaination: The char attribute defines the alignment of the content to a character in a column within the <tfoot> element. This attribute is valid only when the align attribute is set to char.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<tfoot char="character">

Example:

<table>
<tfoot align="char" char=".">
<tr>
<td> Total </td>
<td> $230 </td>
</tr>
</tfoot>
</table>

Supported Browsers

Attribute
char Not Supported Not Supported Not Supported Not Supported Not Supported

4. charoff attribute

Explaination: The charoff attribute defines the number of characters the content will be aligned from the character specified by the char attribute within the <tfoot> element.
This attribute is valid only when the align attribute is set to char.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<tfoot charoff="number">

Example:

<table>
<tfoot align="char" char="." charoff="2">
<tr>
<td> Total </td>
<td> $230 </td>
</tr>
</tfoot>
</table>

Supported Browsers

Attribute
charoff Not Supported Not Supported Not Supported Not Supported Not Supported
Attribute values
Attribute Notes
positive number It specifies alignment to the right of the character.
negative number It specifies alignment to the left of the character..

5. valign attribute

Explaination: The valign attribute defines the vertical alignment of the cell content of column element within the <tfoot> element.
This attribute is not supported in HTML5.Use CSS property "vertical-align" like
<tfoot style="vertical-align:bottom">.

Syntax:

<tfoot valign="top | middle | bottom | baseline">

Example:

<table>
<tfoot valign="bottom">
<tr>
<td> Total </td>
<td> $230 </td>
</tr>
</tfoot>
</table>

Supported Browsers

Attribute
valign Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
top It puts the text to the top of the cell as much as it can.
middle It puts the text to the center of the cell.
bottom It puts the text to the bottom of the cell as much as it can.
baseline It also puts the text to the bottom of the cell as much as it can but mainly align to the baseline of the characters
You will notice the difference between bottom and baseline when the font-sizes are of different sizes like Explain

With bottom attribute,Exclaim

With baseline attribute,Exclaim