Table createTHead() Method

HTML DOM Table Object

Definition and Usage

createTHead() The method creates an empty <thead> Element and add it to the table.

Note:If there is already an <thead> element in the table, then createTHead() The method returns the existing element without creating a new one.

Note:There must be one or more <tr> tags inside the <thead> element.

Tip:To remove the <thead> element from the table, use deleteTHead() Method.

See also:

HTML Reference Manual:HTML <thead> Tag

Example

Example 1

Create <thead> element (and insert <tr> and <td> elements into it):

// Find the <table> element with id="myTable":
var table = document.getElementById("myTable");
// Create an empty <thead> element and add it to the table:
var header = table.createTHead();
// Create an empty <tr> element and add it to the first position of <thead>:
var row = header.insertRow(0);     
// Insert a new cell (<td>) at the first position of the "new" <tr> element:
var cell = row.insertCell(0);
// Add bold text to the new cell:
cell.innerHTML = "<b>This is a table header</b>";

Try It Yourself

Example 2

Create and delete <thead> elements:

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

Try It Yourself

Syntax

tableObject.createTHead()

Parameters

None.

Technical Details

Return Value: Newly created (or existing)<thead> Element.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML DOM Table Object