The <tfoot> tag groups footer rows in a table. Use it for totals, summaries, or footnotes. It goes inside <table>. Contains <tr> with <td> or <th>. Together with thead and tbody it gives semantic structure.

<tfoot>

Step 2

Example: <table><thead>...</thead><tbody>...</tbody><tfoot><tr><td>Total</td><td>100</td></tr></tfoot></table>. You can put tfoot before tbody in HTML; browsers render it at the bottom. Use th in tfoot for footer headers.

<tfoot>
  <tr><td>Total</td><td>100</td></tr>
</tfoot>

Step 3

Order: caption, thead, tbody, tfoot (or thead, tfoot, tbody). Screen readers use this structure. Use scope on th in thead/tfoot. tfoot is optional but improves semantics for tables with footer content.

<table>
  <thead>...</thead>
  <tfoot><tr><th>Sum</th></tr></tfoot>
  <tbody>...</tbody>
</table>

Step 4

In the browser, tfoot rows render at the bottom of the table. Use for totals, notes, or repeated header info. Keeps table structure clear for accessibility.

<table><thead><tr><th>Name</th></tr></thead><tfoot><tr><td>End</td></tr></tfoot><tbody><tr><td>Alice</td></tr></tbody></table>

Step 5

Which element groups the footer rows of a table (e.g. totals)?

<tfoot>

Step 6

Correct! <tfoot> is for footer rows (totals, summaries). <tbody> is for body rows. Use thead, tbody, tfoot for full semantic structure.

<tfoot><tr><td>Total</td></tr></tfoot>

Step 7

You now know <tfoot>. Complete the challenges below to master table footer structure!

tfoot.html

1 / 7

📋

Tutor:The <tfoot> tag groups footer rows in a table. Use it for totals, summaries, or footnotes. It goes inside <table>. Contains <tr> with <td> or <th>. Together with thead and tbody it gives semantic structure.

⭐ 0 EXP

Tfoot Mastery

Table footer: thead, tbody, tfoot.

Concept 1: The Tfoot Tag

The <tfoot> tag groups footer rows in a table. Use it for totals, summaries, or footnotes. It goes inside <table> and contains <tr> with <td> or <th>.

System Check

Which element groups the footer rows of a table (e.g. totals)?

Community Holo-Net

Table Structure Patterns

Using thead, tbody, tfoot? Share your patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <tfoot> Tag

Pascual Vila

Frontend Instructor.

The <tfoot> tag groups footer rows in a table. Use it for totals, summaries, or footnotes. It goes inside <table> and contains <tr> with <td> or <th>. Browsers render tfoot at the bottom of the table even if you write it before <tbody> in the HTML.

Structure

Order: <caption>, <thead>, <tbody>, <tfoot> (or thead, tfoot, tbody—both are valid). Use thead for header rows, tbody for body rows, tfoot for footer rows. Improves semantics and accessibility.

Best practices

Use tfoot when the table has footer content (totals, notes). Use scope on <th> in thead/tfoot and <caption> for table title. Screen readers use this structure.

Tfoot Tag Glossary

<tfoot>: Table footer. Groups footer rows (totals, summaries). Contains <tr> with <td> or <th>. Renders at bottom of table.
thead / tbody / tfoot: thead = header rows, tbody = body rows, tfoot = footer rows. Optional but improve semantics and accessibility.
Order: Caption, thead, tbody, tfoot. tfoot can appear before tbody in HTML; browser still renders it at bottom.

📖 INDEX