Table createTFoot() Method

Example

Create a <tfoot> element (and insert a <tr> and <td> element to it):

// Find a <table> element with id="myTable":
var table = document.getElementById("myTable");

// Create an empty <tfoot> element and add it to the table:
var footer = table.createTFoot();

// Create an empty <tr> element and add it to the first position of <tfoot>:
var row = footer.insertRow(0);

// Insert a new cell (<td>) at the first position of the "new" <tr> element:
var cell = row.insertCell(0);

// Add some bold text in the new cell:
cell.innerHTML = "<b>This is a table footer</b>";

Try it Yourself »

Definition and Usage

The createTFoot() method creates an empty <tfoot> element and adds it to the table.

Note: If a <tfoot> element already exists on the table, the createTFoot() method returns the existing one, and does not create a new one.

Note: The <tfoot> element must have one or more <tr> tags inside.

Tip: To remove the <tfoot> element from a table, use the deleteTFoot() method.

Browser Support

Method
createTFoot()	Yes	Yes	Yes	Yes	Yes

Syntax

tableObject.createTFoot()

Parameters

None

Technical Details

Return Value:	The newly created (or an existing) <tfoot> element

More Examples

Example

Create and delete a <tfoot> element:

function myCreateFunction() {
  var table = document.getElementById("myTable");
var footer = table.createTFoot();
  var row = footer.insertRow(0);
var cell = row.insertCell(0);
  cell.innerHTML = "<b>This is a table footer</b>";
}

function myDeleteFunction() {
document.getElementById("myTable").deleteTFoot();
}

Try it Yourself »

HTML reference: HTML <tfoot> tag

❮ Table Object