docs.rodeo

MDN Web Docs mirror

: The Table Foot element

{{HTMLSidebar}} 

The <tfoot> HTML element encapsulates a set of table rows ({{HTMLElement("tr")}}  elements), indicating that they comprise the foot of a table with information about the table’s columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column.

{{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}} 

Attributes

This element includes the global attributes.

Deprecated 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.

Usage notes

Example

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.

HTML

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 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 attribute value defaulting to 1. Additionally, the 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>

CSS

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;
}

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;
}

Result

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

Technical summary

Content categories None.
Permitted content Zero or more `{{HTMLElement("tr")}}`  elements.
Tag omission The start tag is mandatory. The end tag may be omitted if there is no more content in the parent `{{HTMLElement("table")}}`  element.
Permitted parents A `{{HTMLElement("table")}}`  element. The <tfoot> must appear after any `{{HTMLElement("caption")}}` , `{{HTMLElement("colgroup")}}` , `{{HTMLElement("thead")}}` , `{{HTMLElement("tbody")}}` , and `{{HTMLElement("tr")}}`  elements. Note that this is the requirement in HTML.
Originally, in HTML4, the opposite was true: the <tfoot> element could not be placed after any `{{HTMLElement("tbody")}}`  and `{{HTMLElement("tr")}}`  elements.
Implicit ARIA role rowgroup
Permitted ARIA roles Any
DOM interface `{{domxref("HTMLTableSectionElement")}}` 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN