❮ Previous Next ❯

HTML <tfoot> tag

The <tfoot> tag defines the footer row(s) of an HTML table. This tag helps the screen readers to understand the table footer. Inside this tag, there must be one or more <tr> element.

Type: Block Element

Related elements of <tfoot> tag:

  • <table>: It defines an HTML table.
  • <caption>: It defines an HTML table name.
  • <col>: It defines a column in an HTML table.
  • <colgroup>: It defines a group of columns within an HTML table.
  • <th>: It defines an HTML table heading.
  • <tr>: It defines an HTML table row.
  • <td>: It defines an HTML table cell.
  • <tbody>: It defines the group of main content of an HTML table.
  • <thead>: It defines the group of header content of an HTML table.

Example of <tfoot> tag

<tfoot>
 <tr>
  <td> Total Price </td>
  <td> Rs. 340 </td>
</tfoot>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<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>
<caption> John's Mark </caption>

</thead>
 <tr>
  <th> Subject </th>
  <th> Mark </th>
 </tr>
</thead>

<tbody>
 <tr>
  <td> Bio </td>
  <td> 40 </td>
 </tr>
 <tr>
  <td> Zoology </td>
  <td> 45 </td>
 </tr>
 <tr>
  <td> Physics </td>
  <td> 51 </td>
 </tr>
</tbody>
  
</tfoot>
 <tr>
  <td> Total </td>
  <td> 136 </td>
 </tr>
 </tfoot>
 
</table>
</body>
</html>
Run The code »

Output on the browser

John's Mark
Subject Mark
Bio 40
Zoology 45
Physics 51
Total 136

Attributes of <tfoot> tag

  1. align
  2. bgcolor
  3. char
  4. charoff
  5. valign

1. align attribute

The align attribute defines the horizontal alignment of the cells content within the <tfoot> element. It is not supported in HTML5. For practical doing, make sure to define in HTML 4.01 Transitional Standard. Use CSS property - "text-align" to replace it.

Syntax

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

Attribute values

Value 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.
char It defines content alignment to a specific character.

CSS replacement example

<tfoot style="text-align: center;">

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
align Yes Yes Yes Yes Yes

2. bgcolor attribute

The bgcolor attribute defines the background-color of each cell within the <tfoot> element. It is obsolete in HTML5. For demonstration, make sure to define in HTML 4.01 Transition Standard. Use CSS property instead - "background-color" to replace it.

Syntax

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

Attribute values

Value Notes
color_name 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)").

CSS replacement example

<tfoot style="background-color: grey;">
 or
<tfoot style="background-color: #808080;">
 or
<tfoot style="background-color: rgb(128, 128, 128);">

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
bgcolor No Yes No No No

3. char attribute

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 value. It is not supported in HTML5. Use CSS property instead - "text-align" like
<tfoot style = "text-align: right">

Syntax

<tfoot align="char" char="character">

Example

<tfoot align="char" char=".">
  <tr>
   <td> 12.5 </td>
   <td> 3.165 </td>
  </tr>
</tbody>

Numbers will align at the decimal point.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
char No No No No No

4. charoff attribute

The charoff attribute defines the horizontal distance (mostly prefer in the number of pixels) of the alignment character specified by the char attribute. This attribute is valid only when the align attribute. It is not supported in HTML5. Use CSS property instead - "text-align" like
<tfoot style = "text-align: right">

Basic syntax

<tfoot align="char" char="." charoff="12">
In the above syntax, align="char" enables alignment based on the character.
char="." defines the characters are aligned based on the decimal (.).
charoff="12" means the decimal (.) is positioned 12 pixel from the left edge of the column.

Attribute values

Attribute values can be either negative or positive.
Value Note
positive number It defines the numbers of pixels positioned from the left of the column.
negative number It defines the numbers of pixels positioned from the right of the column.

Full code example

<table>
 <tfoot align="char" char="." charoff="12">
  <tr>
   <td> 12.5 </td>
   <td> 3.165 </td>
  </tr>
 </tfoot>
</table>

The above example means that the two numbers are aligned based on the decimal (.) and the decimal is positioned 12 pixels from the left side of the column.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
charoff No No No No No

Decimal alignment using CSS

<style>
 td {
  text-align:right;
  font-variant-numeric:tabular-nums;
 }
</style>

5. valign attribute

The valign attribute defines the vertical alignment of the cell content in a column within the <tfoot> element. It was used in older HTML to align the content of a column which is now replaced by CSS.

Syntax

<tfoot valign="top | middle | bottom | baseline">
Value Note
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. It preserves both horizontal and vertical alignment.
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 but mainly align to the baseline of the characters.
Top Bottom
Middle Baseline
You will notice the difference between baseline and other valign attribute's values when the font-sizes are of different size.

With top value, Demo

With bottom value, Demo

With middle value, Demo

With baseline value, Demo

Always remember valign attribute only preserves vertical alignment. For horizontal alignment use the CSS property- text-align.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
valign Yes Yes Yes Yes Yes

Column align using CSS (modern and valid)

CSS property - vertical-align can replace the use of valign attribute.

<tfoot>
<tr style="height:80px;">
 <td style="vertical-align:top;">
      Top
 </td>
 <td style="vertical-align:bottom;">
      Bottom
 </td>
</tr>
<tr style="height:80px;">
 <td style="vertical-align:middle;">
      Middle
 </td>
 <td style="vertical-align:basline;">
      Baseline
 </td>
</tr>
</tfoot>

Example of making similar alignment (say middle) of all the cells content within the <tfoot> element.

<style>
 tfoot td {
 vertical-align:center;
 }
</style>