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.
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.
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.
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.
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
<th> Acc no</th>
<th> Details </th>
@All rights reserved
<td> 0119199 </td>
<td> Flax and Deed Seeds private ltd </td>
<td> 099991 </td>
<td> Solitudes inc </td>
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.
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.
This method creates a <thead> element and appends it to the table.
This method deletes the <caption> element from the table if available.
Example of deleteCaption() method
This method deletes the <tfoot> element of table if available.
Example of deleteTFoot() method
This method deletes the <thead> element of table if available.
Example of deleteTHead() method
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.