Article Categories

Selected Reading

HTML DOM Table Object

HTML Web Development Front End Technology

The HTML DOM Table Object represents the <table> element in HTML. It provides properties and methods to dynamically create, modify, and manipulate table elements using JavaScript. This object allows developers to programmatically interact with tables without directly modifying HTML markup.

Syntax

To create a new table object using JavaScript −

document.createElement("TABLE");

To access an existing table element −

document.getElementById("tableId");
document.getElementsByTagName("table")[0];

Properties

The DOM Table Object provides the following key properties −

Property	Description
`caption`	Returns or sets the `<caption>` element of the table
`tHead`	Returns the `<thead>` element of the table
`tFoot`	Returns the `<tfoot>` element of the table
`rows`	Returns a collection of all `<tr>` elements in the table
`tBodies`	Returns a collection of all `<tbody>` elements in the table

Methods

The DOM Table Object provides several methods for manipulating table structure −

Method	Description
`createCaption()`	Creates an empty `<caption>` element and adds it to the table
`createTHead()`	Creates an empty `<thead>` element and adds it to the table
`createTFoot()`	Creates an empty `<tfoot>` element and adds it to the table
`insertRow(index)`	Creates an empty `<tr>` element and inserts it at the specified index
`deleteRow(index)`	Deletes the row at the specified index from the table
`deleteCaption()`	Removes the `<caption>` element from the table
`deleteTHead()`	Removes the `<thead>` element from the table
`deleteTFoot()`	Removes the `<tfoot>` element from the table

Creating a Table Object

Example

Following example demonstrates how to create a table object and add it to the document −

<!DOCTYPE html>
<html>
<head>
   <title>DOM Table Object Demo</title>
   <style>
      body {
         text-align: center;
         font-family: Arial, sans-serif;
         padding: 20px;
      }
      h1 { color: #23CE6B; }
      .btn {
         background-color: #fff;
         border: 2px solid #0197F6;
         padding: 10px 20px;
         border-radius: 5px;
         color: #0197F6;
         cursor: pointer;
         margin: 10px;
      }
      .btn:hover { background-color: #f0f8ff; }
      table {
         margin: 20px auto;
         border-collapse: collapse;
      }
      td, th {
         border: 1px solid #ddd;
         padding: 8px;
         text-align: center;
      }
   </style>
</head>
<body>
   <h1>DOM Table Object Demo</h1>
   <button onclick="createTable()" class="btn">Create Table Object</button>
   <div id="tableContainer"></div>
   <script>
      function createTable() {
         var table = document.createElement("TABLE");
         table.innerHTML = `<tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
         <tr>
            <td>Data 3</td>
            <td>Data 4</td>
         </tr>`;
         table.setAttribute('border', '1');
         document.getElementById('tableContainer').appendChild(table);
      }
   </script>
</body>
</html>

The output displays a button that creates and inserts a table when clicked −

DOM Table Object Demo
[Create Table Object]

(After clicking button)
+--------+--------+
| Data 1 | Data 2 |
+--------+--------+
| Data 3 | Data 4 |
+--------+--------+

Using Table Methods

Example − Adding Table Structure

Following example shows how to use table methods to create header, footer, and caption −

<!DOCTYPE html>
<html>
<head>
   <title>Table Methods Demo</title>
   <style>
      body { font-family: Arial, sans-serif; padding: 20px; text-align: center; }
      table { margin: 20px auto; border-collapse: collapse; }
      th, td { border: 1px solid #ccc; padding: 8px; }
      th { background-color: #f4f4f4; }
      caption { font-weight: bold; margin-bottom: 10px; }
      .btn { padding: 8px 16px; margin: 5px; cursor: pointer; }
   </style>
</head>
<body>
   <h1>Table Methods Example</h1>
   <button onclick="buildTable()" class="btn">Build Complete Table</button>
   <div id="tableArea"></div>
   <script>
      function buildTable() {
         var table = document.createElement("TABLE");
         
         // Create caption
         var caption = table.createCaption();
         caption.innerHTML = "Student Records";
         
         // Create header
         var thead = table.createTHead();
         var headerRow = thead.insertRow(0);
         headerRow.insertCell(0).innerHTML = "Name";
         headerRow.insertCell(1).innerHTML = "Grade";
         
         // Insert data rows
         var row1 = table.insertRow(1);
         row1.insertCell(0).innerHTML = "John";
         row1.insertCell(1).innerHTML = "A";
         
         var row2 = table.insertRow(2);
         row2.insertCell(0).innerHTML = "Jane";
         row2.insertCell(1).innerHTML = "B+";
         
         // Create footer
         var tfoot = table.createTFoot();
         var footerRow = tfoot.insertRow(0);
         footerRow.insertCell(0).innerHTML = "Total Students";
         footerRow.insertCell(1).innerHTML = "2";
         
         document.getElementById('tableArea').innerHTML = '';
         document.getElementById('tableArea').appendChild(table);
      }
   </script>
</body>
</html>

This creates a complete table with caption, header, data rows, and footer −

           Student Records
+---------------+-------+
| Name          | Grade |
+---------------+-------+
| John          | A     |
| Jane          | B+    |
+---------------+-------+
| Total Students| 2     |
+---------------+-------+

Accessing Table Properties

Example − Reading Table Information

Following example demonstrates how to access table properties to get information −

<!DOCTYPE html>
<html>
<head>
   <title>Table Properties Demo</title>
   <style>
      body { font-family: Arial, sans-serif; padding: 20px; }
      table { margin: 20px auto; border-collapse: collapse; }
      th, td { border: 1px solid #ccc; padding: 8px; }
      #info { background-color: #f9f9f9; padding: 10px; margin: 20px; }
   </style>
</head>
<body>
   <table id="myTable">
      <caption>Sample Table</caption>
      <thead>
         <tr><th>Header 1</th><th>Header 2</th></tr>
      </thead>
      <tbody>
         <tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td></tr>
         <tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td></tr>
      </tbody>
   </table>
   <button onclick="showTableInfo()">Show Table Information</button>
   <div id="info"></div>
   <script>
      function showTableInfo() {
         var table = document.getElementById("myTable");
         var info = "";
         info += "Caption: " + (table.caption ? table.caption.innerHTML : "None") + "<br>";
         info += "Number of rows: " + table.rows.length + "<br>";
         info += "Has thead: " + (table.tHead ? "Yes" : "No") + "<br>";
         info += "Has tfoot: " + (table.tFoot ? "Yes" : "No") + "<br>";
         info += "Number of tbody elements: " + table.tBodies.length;
         document.getElementById("info").innerHTML = info;
      }
   </script>
</body>
</html>

Clicking the button displays detailed information about the table structure −

Caption: Sample Table
Number of rows: 3
Has thead: Yes
Has tfoot: No
Number of tbody elements: 1

Conclusion

The HTML DOM Table Object provides a comprehensive set of properties and methods to dynamically create and manipulate tables. It enables developers to build complex table structures programmatically, access table elements, and modify table content without directly editing HTML markup, making it essential for dynamic web applications.

AmitDiwan

Updated on: 2026-03-16T21:38:53+05:30

844 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next