HTML <tfoot> Tag

Topic: HTML5 Tags Reference« Prev|Next »

Description

The <tfoot> (short for table foot) defines a table's footer. It is used to group a set of rows summarizing the columns of the table. It must appears as a child of a <table> tag, after any <caption>, <colgroup> and <thead> elements, but before any <tbody> and <tr> element. The <tfoot> element must contain at least one row, defined by the <tr> tag.

The following table summarizes the usages context and the version history of this tag.

Parent: <table>
Content: <tr>
Start/End Tag: Start tag: required, End tag: required
Version: HTML 4, 4.01, 5

Usage Notes

  • Table rows may be grouped into a table head, table foot, and one or more table body sections, using the <thead>, <tfoot> and <tbody> tags, respectively.

  • This division enables the browser to support scrolling of table bodies independently of the table head and foot sections. Also, when long tables are printed that spans multiple pages, the table head and foot information may be printed on each page that contains table data.

  • When present, each <thead>, <tfoot> and <tbody> contains a row group. Each row group must contain at least one row, defined by the <tr> tag.


Syntax

The basic syntax of the <tfoot> tag is given with:

HTML / XHTML: <tfoot> ... </tfoot>

The example below shows the <tfoot> tag in action.

  • <table>
  •     <thead>
  •         <tr>
  •             <th>No.</th>
  •             <th>Name</th>
  •             <th>Email</th>
  •         </tr>
  •     </thead>
  •     <tfoot>
  •         <tr>
  •             <td colspan="3">Copyright ©  2015 Tutorial Republic</td>
  •         </tr>
  •     </tfoot>
  •     <tbody>
  •         <tr>
  •             <td>1</td>
  •             <td>John Carter</td>
  •             <td>johncarter@mail.com</td>
  •         </tr>
  •         <tr>
  •             <td>2</td>
  •             <td>Peter Parker</td>
  •             <td>peterparker@mail.com</td>
  •         </tr>
  •         <tr>
  •             <td>3</td>
  •             <td>John Rambo</td>
  •             <td>johnrambo@mail.com</td>
  •         </tr>
  •     </tbody>
  • </table>

Tag-Specific Attributes

The following table shows the attributes that are specific to the <tfoot> tag.

Attribute Value Description
align left
right
center
justify
char
Obsolete Specifies the horizontal alignment of each cell content inside the table footer.
char character Obsolete Sets the character to which cell contents of the table footer should align.
charoff number Obsolete Defines the number of characters by which cell contents of the table footer will be offset from the alignment characters specified by the char attribute.
valign top
middle
bottom
baseline
Obsolete Specifies the vertical alignment of the text within each row of cells of the table footer.

Global Attributes

Like all other HTML tags, the <tfoot> tag supports the global attributes in HTML5.


Event Attributes

The <tfoot> tag also supports the event attributes in HTML5.


Browser Compatibility

The <tfoot> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 2+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: HTML Tables.

Other table-related tags: <table>, <thead>, <tbody>, <caption>, <colgroup>, <col>, <tr>, <th>, <td>.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.