JavaScript createTFoot method
We can add header and footer also to the table by using
the JavaScript in a similar manner as we have added and deleted the caption to
the specified table. Syntax for using the createTFoot() method is as described
below :
Syntax:
| TableObject.createTFoot(); |
Description of code:
In the following example code we have created a table
with the id "table" and we also have one button "Create
foot" which calls the JavaScript function createTableFooter(). In
the function createTableFooter() we have taken the table object by its id
using the method getElementById() and with this object we can create table
footer.
| document.getElementById('table') .createTFoot(); |
We can also add some style and color to this table
footer. Here is the full example code for createTFootExample.html as given
below:
createTFootExample.html
<html>
<body>
<script language="JavaScript">
function createTableFooter() {
var footer = document.getElementById('table')
.createTFoot();
footer.bgColor = '#565656';
}
</script>
<p align="center"> </p>
<div style="background: #cf2255; width:'100%';" align="center">
<font color="#ffffcc" size="12pt">
<b>Creating Table Footer</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>
<tfoot>
<th colspan="2">
<font color="#ffffcc" size="5pt">
Information table Footer
</font>
</th>
</tfoot>
</table>
</center>
<p>
<center>
<input type="button"
value="Create foot"
onclick="createTableFooter(); this.disabled='true'">
</center>
</p>
</body>
</html>
|
Output:
When you will click on the button "Create
foot", it will create the footer for specified table.
Download Source Code
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
