HTML <tfoot> Tag Definition, Usage and Example

by
tfoot HTML Tag

The <tfoot> HTML Tag defines a collection of footer text within an HTML table.The <tfoot> HTML Tag, together with the <thead> and <tbody> HTML Tags, is utilized to specify each section of a table. The <tfoot> HTML Tag must include one or more <tr> tags. The <tfoot> HTML Tag should be utilized as a child of a <table> element, immediately following any <caption>, <colgroup>, <thead>, or <tbody> HTML Tags. The <tfoot> HTML Tag is part of the Tables HTML category in HTML Element Reference. The attributes of the <tfoot> HTML Tag are align, bgcolor, char, charoff, valign, global, and event attributes. 

<tfoot> code block example to learn how it works is given below.

<table><tfoot> ... </tfoot></table>

The second example usage of the “<tfoot>” code block example is given below.

<p>Table with colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Region</th>
    <th>Capitals</th>
    <th>Provinces</th>
    <th>Dialect</th>
  </tr>
  <tr>
    <td>11</td>
    <td>Davao City</td>
    <td>Davao de Oro</td>
    <td>Cebuano</td>
  </tr>
  <tr>
    <td>10</td>
    <td>Cagayan de Oro</td>
    <td>Misamis Oriental</td>
    <td>Cebuano</td>
  </tr>
</table>
Contents of the Article show

What is <tfoot> HTML Tag?

The <tfoot> HTML Tag denotes the footers of HTML tables. The <tfoot> HTML Tag is the block rows containing the column summary information for the parent <table> element.  The <tfoot> HTML Tag can be utilised in conjunction of the <tbody> and the <head> tags to specify the table’s header, footer, and body. This information can be utilised by browsers to allow table body to scroll independently of the header and footer, which is especially useful for large tables. Furthermore, when printing a huge table that covers numerous pages, this information can be utilised to display the table’s header and footer. 

How to Use <tfoot> HTML Tag?

To use the <tfoot> HTML Tag, the web developer should write <tfoot></tfoot> with table footer inserted between the beginning and end tags. Additionally, the web developer can include the <tr> and script supporting elements such as <scirpt> and <template>.

Example Usage of <tfoot> HTML Tag?

The following examples of usage of <tfoot> HTML Tag are given below.

<table>
  <thead>
    <tr>
      <th>Siblings</th>
      <th>Birthdate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>January 01, 1999</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>February 1, 2000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Johnny Doe</td>
      <td>March 01, 2001</td>
    </tr>
  </tfoot>
</table>
<table>
  <thead>
    <tr>
      <th>Zodiac sign</th>
      <th>Month</th>
    </tr>
  </thead>
<tbody>
    <tr>
      <td>Pisces</td>
      <td>February 18 - March 19</td>
    </tr>
    <tr>
      <td>Aries</td>
      <td>March 20 - April 19</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Taurus</td>
      <td>April 20 - May 20</td>
    </tr>
  </tfoot>
</table>

What are the Attributes of <tfoot> HTML Tag?

There are multiple attributes for the <tfoot> HTML Tag. The following attributes are listed below.

  • Align Attributes: The <tfoot> HTML Tag supports the align attribute. The align attribute specifies the alignment with relation to the adjacent items.
  • Bgcolor Attribute: The <tfoot> HTML Tag supports the bgcolor attribute. The bgcolor attribute specifies the color of an element’s background.
  • Char Attribute: The <tfoot> HTML Tag supports the char attribute. The char attribute indicates the column’s content’s alignment relative to a character.
  • Charoff Attribute: The <tfoot> HTML Tag supports the charoff attribute. The charoff attribute specifies the number of characters that should be added to the column data to offset it from the alignment characters supplied by the char property.
  • Valign Attribute: The <tfoot> HTML Tag supports the valign attribute. The valign attribute determines the vertical alignment of the text inside the table footer’s row of cells.
  • Global Attributes: The <tfoot> HTML Tag supports the global attributes. All HTML elements, even those not specified in the standard, can have global attributes. This means that any non-standard elements must nevertheless allow certain characteristics, even if using such elements makes the content non-HTML5 compliant.
  • Event Attributes: The <tfoot> HTML Tag supports the event attributes. The Event Attributes always have a name that begins with “on” and is followed by the name of the event for which it is intended. They specify a script to run when an event of the defined type is dispatched to the element with the specified attributes.

What are the Default CSS Settings for <tfoot> HTML Tag?

The following are the Default CSS Settings for the <tfoot> HTML Tag. 

thead,
tfoot {
    background-color: #3f87a6;
    color: #fff;
}

tbody {
    background-color: #e4f0f5;
}

caption {
    padding: 10px;
    caption-side: bottom;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-family: sans-serif;
    font-size: .8rem;
}

td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 5px 10px;
}

td {
    text-align: center;
}

What are the Related other HTML Tags to <tfoot>?

The other related HTML Tags to the <tfoot> HTML Tag are listed below.

  • <col> HTML Tag: The <col> HTML Tag and <tfoot> HTML Tag are related because they are both tables HTML Tags. The <col> HTML Tag specifies the columns settings for each column contained within a <colgroup> element.
  • <colgroup> HTML Tag: The <colgroup> HTML Tag and <tfoot> HTML Tag are related because they are both tables HTML Tags. The <colgroup> HTML Tag Specifies a group of one or more columns in a table for formatting.
  • <tbody> HTML Tag: The <tbody> HTML Tag and <tfoot> HTML Tag are related because they are both tables HTML Tags.  The <tbody> HTML Tag groups the body content in a table.
  • <tr> HTML Tag: The <tr> HTML Tag and <tfoot> HTML Tag are related because they are both tables HTML Tags. The <tfoot> HTML Tag specifies a table row.
Holistic SEO
Follow SEO
Latest posts by Holistic SEO (see all)

Leave a Comment

TechSEO

HTML <tfoot> Tag Definition, Usage and Example

by Holistic SEO time to read: 6 min
TechSEO HTML <thead> Definition, Usage and Examples…
TechSEO HTML <td> Tag Definition, Usage and Example…
0