totn HTML

HTML: <tfoot> tag

This HTML tutorial explains how to use the HTML element called the <tfoot> tag with syntax and examples.

Description

The HTML <tfoot> tag defines a set of rows that make up the table footer in an HTML table. It can be used to summarize the columns in a table and is commonly used to display column totals. Traditionally, you would use CSS to style the <tfoot> tag to highlight the column totals. This tag is also commonly referred to as the <tfoot> element.

Syntax

In HTML, the syntax for the <tfoot> tag is: (example of a table with a <tfoot> tag after the <tbody> tag)

<body>
<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Grapefruit</td>
      <td>$5</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>$17</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$22</td>
    </tr>
  </tfoot>
</table>
</body>

Sample Output

In the sample output above, we have applied a yellow background to the <tfoot> tag to highlight the column totals.

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <tfoot> tag:

Attribute Description HTML Compatibility
align Horizontal alignment of text in each cell within the table footer. It can be one of the following values: left, center, right, justify, char Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
bgcolor Background color of each cell within the table footer Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
char Set the character to align the cells in a column Deprecated in HTML 4.01, Obsolete in HTML5
charoff Number of characters to offset column data from the alignment characters (in char attribute) Deprecated in HTML 4.01, Obsolete in HTML5
valign Vertical alignment of text of each cell within the table footer. It can be one of the following values: baseline, bottom, middle, top Deprecated in HTML 4.01, Obsolete in HTML5, use CSS

Note

Browser Compatibility

The <tfoot> tag is compatible with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <tfoot> tag below, exploring examples of how to use the <tfoot> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <tfoot> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Alex</td>
      <td>86</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>181</td>
    </tr>
  </tfoot>
</table>
</body>

</html>

In this HTML5 Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined as a table heading using the <thead> tag and uses <th> tags to define table heading cells. Rows 2 and 3 of the table are defined as the table body using the <tbody> tag and use <td> tags to define standard table cells. Row 4 of the table is defined as a table footer using the <tfoot> tag and displays the column totals for the table.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <tfoot> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Alex</td>
      <td>86</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>181</td>
    </tr>
  </tfoot>
</table>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined as a table heading using the <thead> tag and uses <th> tags to define table heading cells. Rows 2 and 3 of the table are defined as the table body using the <tbody> tag and use <td> tags to define standard table cells. Row 4 of the table is defined as a table footer using the <tfoot> tag and displays the column totals for the table.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <tfoot> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Alex</td>
      <td>86</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>181</td>
    </tr>
  </tfoot>
</table>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined as a table heading using the <thead> tag and uses <th> tags to define table heading cells. Rows 2 and 3 of the table are defined as the table body using the <tbody> tag and use <td> tags to define standard table cells. Row 4 of the table is defined as a table footer using the <tfoot> tag and displays the column totals for the table.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <tfoot> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Alex</td>
      <td>86</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>181</td>
    </tr>
  </tfoot>
</table>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined as a table heading using the <thead> tag and uses <th> tags to define table heading cells. Rows 2 and 3 of the table are defined as the table body using the <tbody> tag and use <td> tags to define standard table cells. Row 4 of the table is defined as a table footer using the <tfoot> tag and displays the column totals for the table.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <tfoot> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Alex</td>
      <td>86</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>181</td>
    </tr>
  </tfoot>
</table>
</body>

</html>

In this XHTML 1.1 Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined as a table heading using the <thead> tag and uses <th> tags to define table heading cells. Rows 2 and 3 of the table are defined as the table body using the <tbody> tag and use <td> tags to define standard table cells. Row 4 of the table is defined as a table footer using the <tfoot> tag and displays the column totals for the table.

Share on: