Tables manipulation with DOM methods and properties

Multiple methods are available for in-depth manipulation of the table structure dynamically, provided a reference to the table element is available. A table can contain a caption, a thead, any number of tbodies, and a tfoot. Many methods available to create parts of the table, delete table captions are not properly implemented across browsers. Hence most important of them are discussed below. Each table has four extra elements/properties that help browsers to cleanly display table data, headers and footers; they are as described below.

caption

The caption element defines a table caption. If defined caption must be the first element in the table providing a short heading for the table. This is shown in example below.

thead

The thead element defines a group of header rows in a table. By explicitly grouping header rows with thead, authors give browsers the ability to include the header rows on each page of a printed, multi-page table, as well as the ability to present a long table with a scrolling body and static header rows. An example of thead usage is given below.

tfoot

The tfoot element defines a group of footer rows in a table. A table may have one tfoot, which must follow the optional thead and precede the required tbody. By explicitly grouping footer rows with tfoot, authors give browsers the ability to include the footer rows on each page of a printed, multi-page table, as well as the ability to present a long table with a scrolling body and static footer rows.

tbody

The tbody element defines actual data rows in the table. This element usually follows thead and tfoot if available. By providing options tbody element, developers help browsers to cleanly display big tables by using screen area with proper table header and table footers provided through thead and tfoot. Example of tbody implementation is provided below.

Basic example of a HTML tables

<table> <caption>Accounts statements</caption> <thead> <tr> <th> Acc no</th> <th> Details </th> </tr> </thead> <tfoot> <tr> <td colspan=2> @All rights reserved </td> </tr> </tfoot> <tbody> <tr> <td> 0119199 </td> <td> Flax and Deed Seeds private ltd </td> </tr> <tr> <td> 099991 </td> <td> Solitudes inc </td> </tr> </tbody> </table>

Manipulating tables

HTML tables have methods to create, remove caption, thead, tbody or tfoot. Some of the prominent methods are provided below. The example for all the methods are at the end of the document.

createCaption()

This method creates a caption for the provided table element. If a <caption> element already exists on the table, the createCaption() method returns the existing one.

createTFoot()

This method creates an empty <tfoot> element and appends it to the table. If a <tfoot> element already exists on the table, the createTFoot() method returns the existing one.

createTHead()

This method creates a <thead> element and appends it to the table.

deleteCaption()

This method deletes the <caption> element from the table if available.

Example of deleteCaption() method

document.getElementById("accountsTable").deleteCaption();

deleteTFoot()

This method deletes the <tfoot> element of table if available.

Example of deleteTFoot() method

document.getElementById("accountsTable").deleteTFoot();

deleteTHead()

This method deletes the <thead> element of table if available.

Example of deleteTHead() method

document.getElementById("accountsTable").deleteTHead();

tBodies[]

This method returns an array with all TBodies of table that are returned. The length property gives the number of <tBody> elements in collection. Following methods may also be used:

tBody[index] returns the element of index position from the collection.
tBody.item(index) returns the element from ‘index’ position.
<tBody.namedItem(id)> method returns the element with id = ‘id’ from tBody collection.

Example with table manipulation methods of JavaScript DOM

<!DOCTYPE html>
<html>

<style>
  table, th, tr, td {border:2px inset #666; padding:0.4em 0.1em 0.5em;font-family:Calibri; font-size:0.8em;}
  button {padding:0.4em 0.8em; margin:0px 10px; font-family:"Calibri"; color:#55f}
</style>

<body>
<table id="accountsTable">		
	<thead id="rowHeading">
	    <tr>
	    <th> Acc no </th>
	    <th> Details </th>
	    </tr>
	</thead>
	<tfoot>
		<tr>
		<td colspan=2> All rights reserved </td>
	    </tr>
	</tfoot>	
	<tbody>
		<tr>
		<td> 0119199 </td>
		<td> Flax and Deed Seeds private ltd </td>
		</tr>
		<tr>
		<td> 099991 </td>
		<td> Solitudes inc </td>
		</tr>
	</tbody>
</table>

<button onclick="tableManip()">Try it</button>
<script>
	function tableManip(){
    //Creates caption for table
		var table = document.getElementById("accountsTable");
		var caption = table.createCaption();
		caption.innerHTML = "<b>Accounts information</b>";

	//Creates footer for table
		var footer = table.createTFoot();
		var row = footer.insertRow(0);      
		var cell = row.insertCell(0);
		cell.innerHTML = "<b>Footer: All rights reserved</b>";

	//Creates row and inserts header cell
		var header = table. createTHead();
		var row = header.insertRow(0);      
		var cell = row.insertCell(0);
		cell.innerHTML = "<b>Header: Accounts header</b>";

		alert("Number of <tBody> elements: " + table.tBodies.length);
      alert("item(0) nodeName is: " + table.tBodies.item(0).nodeName);
	}
</script>
</body>

</html>

›› go to examples ››