Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Javascript JavaScript createTHead method

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript createTHead method

Advertisement
In JavaScript we can create and add table header to the specified table by using the method createTHead() on the table object.

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">&nbsp;</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.

Download Source Code

     

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: January 29, 2009

Related Tutorials

Discuss: JavaScript createTHead method  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com