<tfoot>: The Table Foot element #

::: section-content The <tfoot> HTML element defines a set of rows summarizing the columns of the table. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <tfoot> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-taller .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} 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: 0.8rem;
}

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

td {
  text-align: center;
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element includes the global attributes. :::

Deprecated attributes #

::: section-content 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]{.visually-hidden}

This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:

• left, aligning the content to the left of the cell
• center, centering the content in the cell
• right, aligning the content to the right of the cell
• justify, inserting spaces into the textual content so that the content is justified in the cell
• char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes.

If this attribute is not set, the left value is assumed.

::: {#sect1 .notecard .note} Note:

• To achieve the same effect as the left, center, right or justify values, use the CSS text-align property on it.
• To achieve the same effect as the char value, in CSS, you can use the value of the char as the value of the text-align property. :::

bgcolor [Deprecated]{.visually-hidden}

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '#'. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS background-color property.

char [Deprecated]{.visually-hidden}

This attribute specifies the alignment of the content in a column to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored.

charoff [Deprecated]{.visually-hidden}

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.

valign [Deprecated]{.visually-hidden}

This attribute specifies the vertical alignment of the text within each row of cells of the table footer. Possible values for this attribute are:

• baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline{target="_blank"} of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
• bottom, which will put the text as close to the bottom of the cell as it is possible;
• middle, which will center the text in the cell;
• and top, which will put the text as close to the top of the cell as it is possible.

::: {#sect2 .notecard .note} Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS vertical-align property on it. ::: :::

Examples #

::: section-content Please see the <table> page for examples on <tfoot>. :::

Technical summary #

::: section-content

Specifications #

::: _table #

Specification #

HTML Standard
[# the-tfoot-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

          Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

tfoot 1 12 1 Yes ≤12.1 1 4.4 18 4 ≤12.1 1 1.0 align 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 bgcolor 1 12 1 Yes ≤15 1 4.4 18 4 ≤14 1 1.0 char 1 12 No Yes 15 ≤4 4.4 18 No 14 ≤3.2 1.0 charoff 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0 valign 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 :::

See also #

::: section-content

• Other table-related HTML Elements: <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <th>, <thead>, <tr>;
• CSS properties and pseudo-classes that may be specially useful to style the <tfoot> element:
  • the :nth-child pseudo-class to set the alignment on the cells of the column;
  • the text-align property to align all cells content on the same character, like '.'. :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot{._attribution-link} :::