JavaScript createTHead method
In JavaScript we can create and add table header to the specified table by using the method createTHead() on the table object. Syntax for using the createTHead() method is as described below :
Syntax:
| TableObject.createTHead(); |
Description of code:
In the following example code we have created a table with the id "table" and we also have one button "Create head" which calls the JavaScript function createTableHeader(). In the function createTableHeader() we have taken the table object by its id using the method getElementById('table') and with this object we can create table header.
| document.getElementById('table') .createTHead(); |
We can also add some style and color to this table header. Here is the full example code for createTHeadExample.html as given below:
createTHeadExample.html
| <html> <body> <script language="JavaScript"> function createTableHeader() { var header = document.getElementById('table').createTHead(); header.bgColor = '#aaacbc'; } </script> <p align="center"> </p>
<div style="background: #cf2255; width:'100%';" align="center">
<font color="#ffffcc" size="12pt">
<b>Creating Table Header</b>
</font>
</div>
<center>
<table id="table" border="1" width="400">
<thead>
<th colspan="2"> Information table Header </th>
</thead>
<tr>
<td>Name</td>
<td>Deepak Kumar</td>
</tr>
<tr>
<td>Designation</td>
<td>IT Manager</td>
</tr>
</table>
</center>
<p>
<center>
<input type="button" value="Create head"
onclick="createTableHeader();
this.disabled='true';">
</center>
</p>
</body>
</html>
|
Output:
Click on "Create head" button.
