The <tfoot> Element

Technical summary

Definition, placement, and content model

Basic definition of the tfoot element

Item	Specification	Conditions and limits
Meaning	A row group for the parent table's column summaries (footers)	It does not calculate values, set visual placement, or define a webpage footer
Context	A child of table	After caption, colgroup, thead, and the table body or direct table rows; at most one direct tfoot child
Content model	Zero or more tr and script-supporting elements	An empty tfoot is allowed by the content model
Start and end tags	The start tag is required	The end tag may be omitted only when the parent has no more content
DOM interface	HTMLTableSectionElement	thead and tbody use the same interface
Element-specific attributes	None	Global attributes are available

tfoot is structural markup for summary rows. Adding it does not calculate totals or automatically associate cells. Rows and cells are expressed with tr, th, and td.

Row groups and table row order

thead, tbody, and tfoot are table row groups with different purposes. The conforming table content model places an optional tfoot after the table body: zero or more tbody elements, or one or more direct tr elements.

<table>
  <caption>Quarterly revenue</caption>
  <thead>...heading rows...</thead>
  <tbody>...data rows...</tbody>
  <tfoot>...summary rows...</tfoot>
</table>

HTMLTableElement.rows is a live HTMLCollection of table rows. Its order is not simply tree order: it puts thead rows first, then tbody or direct table rows, and tfoot rows last. Inspect table.children as well when the actual DOM child order matters.

HTMLTableSectionElement and table APIs

Main APIs on tfoot and table

Member	Return value or action	Boundary
tfoot.rows	An HTMLCollection of the section's direct tr children	Live collection; reflects row insertions and removals
tfoot.insertRow(index)	Inserts a new tr in the tfoot	-1 means the end; an out-of-range index throws IndexSizeError
tfoot.deleteRow(index)	Removes the selected tr from the tfoot	-1 means the last row; an invalid index or empty section throws IndexSizeError
table.tFoot	The first direct tfoot child, or null	Singular getter on HTMLTableElement
table.createTFoot()	Returns the existing first tfoot, or creates one and inserts it at the end of the table	Does not create a summary row
table.deleteTFoot()	Removes the first direct tfoot child	No effect when none exists

const table = document.querySelector("table");
const foot = table.tFoot;
foot.rows.length;       // number of rows in this tfoot
foot.insertRow(-1);     // append a row to this tfoot
table.createTFoot();    // return the existing one if present

table.insertRow(-1) appends to the section containing the last row in the table's rows collection. If that row belongs to tfoot, the new row is added there. The insertion target differs in other cases, such as a table whose tfoot is empty; use tfoot.insertRow() when a specific section is intended.

The DOM built by the parser

The conforming table content model puts tfoot after the table body. The HTML parser can also build a DOM from non-conforming input. In this input, the child order in the tree and the order in table.rows differ:

<table>
  <tfoot><tr><td>Total</td></tr></tfoot>
  <tbody><tr><td>Item</td></tr></tbody>
</table>

// Chrome 155 observed DOM child order: tfoot, tbody
// table.rows order: tbody tr, tfoot tr

This parser recovery is not a reason to write tfoot first. In ordinary HTML, put it after the table body. Check DOM child order and API collection order separately.

Accessibility mapping

HTML-AAM maps native tfoot to the WAI-ARIA rowgroup role. This exposes a group of rows; it does not make tfoot the table's name or the heading for its summary row. Use th scope="row" for the summary row's heading and td for its value.

A Chrome 155 browser role query exposed three rowgroup roles in a named table; the last group contained the summary row. This is a browser Accessibility role-query observation for the selected fixture. The normative HTML-AAM mapping, Windows UI Automation and other platform APIs, and screen-reader speech are separate evidence layers.

Facts and evidence

The table connects core normative claims to their sources. Normative mappings and observations in the selected browser are kept separate.

Evidence

1. HTML Standard: The tfoot element — meaning, context, content model, tag omission, and table section interface
2. HTML Standard: The table element — table child order and the table row collection
3. HTML Standard: Parsing tables — parser behavior for table tokens
4. HTML Accessibility API Mappings: tfoot — native rowgroup role
5. Web Platform Tests: tfoot rows — section row collection
6. Web Platform Tests: tFoot.html — table footer getter and methods
7. Web Platform Tests: footer before body — table.insertRow(-1) with this parsed child order

Implementation evidence

Specification requirements, Chrome observations from the fixture, WPT runs, and browser Accessibility role queries are recorded separately. Each result is limited to the stated conditions and scope.

A browser role query is not the same measurement as a platform Accessibility API or screen-reader speech. The tested layer and unmeasured scope remain separate.

Coverage and open issues

• Specification checkedMeaning, placement, content model, tag omission, HTMLTableSectionElement and table APIs, table row collection, and HTML-AAM mapping
• Selected observationsChrome 155 fixture 17/17; selected WPT 4/4; browser role query: 1 table, 3 rowgroups, and 4 rows
• OpenOnly three selected WPT files were run. The upstream revision served by wpt.live was not pinned.
• OpenOther browsers and operating systems, platform Accessibility APIs, screen readers, printing, all parser-recovery paths, and Expert-gap Review

This Topic has initial coverage. Passing the selected fixture and tests does not establish the same result for every HTML structure, browser, operating system, or assistive technology.

Related surfaces

See the colgroup Topic for column-group structure, CSS, and measurements.

For a beginner-friendly explanation, see How to Use the tfoot Element in Yugien. The full table content model is covered by the table Topic; heading rows by thead; main data rows by tbody; row APIs by tr; and the summary cell's heading relationship by th.