HTML | DOM Table createTHead() Method
The Table createTHead() method is used for creating an empty <thead> element and adding it to the table. It does not create a new <thead> element if a <thead> element already exists. In such a case, the createThead() method returns the existing one .
The <thead> element must have one or more than one <tr> tags inside.
Syntax
tableObject.createTHead()
Return Value : It returns new created or an existing <thead> element
Below program illustrates the Table createTHead() method :
Example: Creating a <thead> element.
html
<!DOCTYPE html> < html > < head > < title > Table createTHead() Method in HTML </ title > < style > table, td { border: 1px solid green; } h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Table createTHead() Method</ h2 > < p >To create a header for a table, double-click the "Add Header" button.</ p > < table id = "Courses" align = "center" > < tr > < td >Java</ td > < td >Fork Java</ td > </ tr > < tr > < td >Python</ td > < td >Fork Python</ td > </ tr > < tr > < td >Placements</ td > < td >Sudo Placement</ td > </ tr > </ table > < br > < button ondblclick = "table_head()" > Add Header </ button > < script > function table_head() { var MyTable = document.getElementById("Courses"); // Create heading of table. var MyHeader = MyTable.createTHead(); var MyRow = MyHeader.insertRow(0); var MyCell = MyRow.insertCell(0); MyCell.innerHTML = "< strong >Available On w3wiki.</ strong >"; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers:
- Apple Safari
- Internet Explorer
- Firefox
- Google Chrome
- Opera