This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

- `align` {{deprecated_inline}}

- : Specifies the horizontal alignment of each foot cell. The possible {{Glossary("enumerated")}} values are `left`, `center`, `right`, `justify`, and `char`. When supported, the `char` value aligns the textual content on the character defined in the [`char`](#char) attribute and on offset defined by the [`charoff`](#charoff) attribute. Use the {{cssxref("text-align")}} CSS property instead, as this attribute is deprecated.

- `bgcolor` {{deprecated_inline}}

- : Defines the background color of each foot cell. The value is an HTML color; either a [6-digit hexadecimal RGB code](/en-US/docs/Web/CSS/hex-color), prefixed by a `#`, or a [color keyword](/en-US/docs/Web/CSS/named-color). Other CSS {{cssxref("color_value", "<color&gt")}} values are not supported. Use the {{cssxref("background-color")}} CSS property instead, as this attribute is deprecated.

- `char` {{deprecated_inline}}

- : Does nothing. It was originally intended to specify the alignment of the content to a character of each foot cell. Typical values for this include a period (`.`) when attempting to align numbers or monetary values. If [`align`](#align) is not set to `char`, this attribute is ignored.

- `charoff` {{deprecated_inline}}

- : Does nothing. It was originally intended to specify the number of characters to offset the foot cell content from the alignment character specified by the [`char`](#char) attribute.

- `valign` {{deprecated_inline}}

- : Specifies the vertical alignment of each foot cell. The possible {{Glossary("enumerated")}} values are `baseline`, `bottom`, `middle`, and `top`. Use the {{cssxref("vertical-align")}} CSS property instead, as this attribute is deprecated.

- The `<tfoot>` is placed after any {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, and {{HTMLElement("tr")}} elements.

- Along with its related {{HTMLElement("thead")}} and {{HTMLElement("tbody")}} elements, the `<tfoot>` element provides useful {{Glossary("semantics", "semantic")}} information and can be used when rendering for either screen or print. Specifying such table content groups also provides valuable contextual information for assistive technologies, including screen readers and search engines.

- When printing a document, in the case of a multipage table, the table foot usually specifies information that is output as an intermediate summary on each page.

See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices.

This example demonstrates a table divided into a head section with column headers, a body section with the table's main data, and a foot section summarizing data of one column.

The {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, and `<tfoot>` elements are used to structure a basic table into {{Glossary("semantics", "semantic")}} sections. The `<tfoot>` element represents the foot section of the table, which contains a row ({{HTMLElement("tr")}}) representing the calculated average of the values in the "Credits" column.

To allocate the cells in the foot to the correct columns, the [`colspan`](/en-US/docs/Web/HTML/Element/th#colspan) attribute is used on the {{HTMLElement("th")}} element to span row header cell across the first three table columns. The single data cell ({{HTMLElement("td")}}) in the foot is automatically placed in the correct location, i.e., the fourth column, with the omitted [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute value defaulting to `1`. Additionally, the [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute is set to `row` on the header cell ({{HTMLElement("th")}}) in the foot to explicitly define that this foot header cell relates to the table cells within the same row, which in our example is the one data cell in the foot row that contains the calculated average.

<table>

<thead>

<tr>

<th>Student ID</th>

<th>Name</th>

<th>Major</th>

<th>Credits</th>

</tr>

</thead>

<tbody>

<tr>

<td>3741255</td>

<td>Jones, Martha</td>

<td>Computer Science</td>

<td>240</td>

</tr>

<tr>

<td>3971244</td>

<td>Nim, Victor</td>

<td>Russian Literature</td>

<td>220</td>

</tr>

<tr>

<td>4100332</td>

<td>Petrov, Alexandra</td>

<td>Astrophysics</td>

<td>260</td>

</tr>

</tbody>

<tfoot>

<tr>

<th colspan="3" scope="row">Average Credits</th>

<td>240</td>

</tr>

</tfoot>

</table>

Some basic CSS is used to style and highlight the table foot so that the foot cells stand out from the data in the table body.

tfoot {

border-top: 3px dotted rgb(160 160 160);

background-color: #2c5e77;

color: #fff;

}

tfoot th {

text-align: right;

}

tfoot td {

font-weight: bold;

}

thead {

border-bottom: 2px solid rgb(160 160 160);

background-color: #2c5e77;

color: #fff;

}

tbody {

background-color: #e4f0f5;

}

```css hidden

table {

border-collapse: collapse;

border: 2px solid rgb(140 140 140);

font-family: sans-serif;

font-size: 0.8rem;

letter-spacing: 1px;

}

th,

td {

border: 1px solid rgb(160 160 160);

padding: 8px 10px;

}

tr > td:last-of-type {

text-align: center;

}

{{EmbedLiveSample("Example", 650, 180)}}

<table class="properties">

<tbody>

<tr>

<th scope="row">

<a href="/en-US/docs/Web/HTML/Content_categories"

>Content categories</a

>

</th>

<td>None.</td>

</tr>

<tr>

<th scope="row">Permitted content</th>

<td>Zero or more {{HTMLElement("tr")}} elements.</td>

</tr>

<tr>

<th scope="row">Tag omission</th>

<td>

The start tag is mandatory. The end tag may be omitted if there is no

more content in the parent {{HTMLElement("table")}} element.

</td>

</tr>

<tr>

<th scope="row">Permitted parents</th>

<td>

A {{HTMLElement("table")}} element. The

<code>&lt;tfoot&gt;</code> must appear after any

{{HTMLElement("caption")}},

{{HTMLElement("colgroup")}}, {{HTMLElement("thead")}},

{{HTMLElement("tbody")}}, and {{HTMLElement("tr")}}

elements. Note that this is the requirement in HTML.<br />Originally, in HTML4, the opposite was true: the <code>&lt;tfoot&gt;</code> element could not be placed after any

{{HTMLElement("tbody")}} and {{HTMLElement("tr")}}

elements.

</td>

</tr>

<tr>

<th scope="row">Implicit ARIA role</th>

<td>

<code

><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role"

>rowgroup</a

></code

>

</td>

</tr>

<tr>

<th scope="row">Permitted ARIA roles</th>

<td>Any</td>

</tr>

<tr>

<th scope="row">DOM interface</th>

<td>{{domxref("HTMLTableSectionElement")}}</td>

</tr>

</tbody>

</table>

{{Specifications}}

{{Compat}}

- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables)

- {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements

- {{cssxref("background-color")}}: CSS property to set the background color of each foot cell

- {{cssxref("border")}}: CSS property to control borders of foot cells

- {{cssxref("text-align")}}: CSS property to horizontally align each foot cell content

- {{cssxref("vertical-align")}}: CSS property to vertically align each foot cell content