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.
