HTML | DOM TableData Object

Last Updated : 29 Jun, 2021

The TableData object in HTML DOM is used to represent the HTML td element. The td element can be accessed by using getElementById() method.

Syntax:

To Access td Element:

document.getElementById("id");

To Create td Element:

document.createElement("td");

TableData Object Properties:

Property	Description
abbr	This property is used to set or return the value of the abbr attribute.
align	This property is used to set or return the horizontal alignment of the content in a data cell.
vAlign	This property is used to set or return the vertical alignment of the content within a cell.
width	This property is used to set or return the width of a data cell.
axis	This property is used to set or return a comma-separated list of related data cells.
background	This property is used to set or return the background image of a data cell.
bgColor	This property is used to set or return the background color of a table.
cellIndex	This property is used to return the position of a cell in the cells collection of a table row.
ch	This property is used to set or return an alignment character for a data cell.
chOff	This property is used to set or return the horizontal offset of the ch property.
colSpan	This property is used to set or return the value of the colspan attribute.
headers	This property is used to set or return the value of the headers attribute.
height	This property is used to set or return the height of a data cell.
noWrap	This property is used to set or return whether the content in a cell can be wrapped.
rowSpan	This property is used to set or return the value of the rowspan attribute.

Example-1: Access Table data and add new content.

html

<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
 
<body>
 
    <body style="text-align:center;">
 
        <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
 
        <h2>DOM TableData Object</h2>
 
        <table>
            <tr>
                <td id="myTd">Geeks</td>
                <td>For</td>
                <td>Geeks</td>
            </tr>
        </table>
 
         
<p>Click the button to change the
          text of the first td element.</p>
 
 
        <button onclick="myFunction()">
          Click Here!
        </button>
 
        <p id="demo"></p>
 
 
        <script>
            function myFunction() {
            //  Accessing Table data
              var x =
                document.getElementById("myTd");
                x.innerHTML = "Add new content";
            }
        </script>
 
    </body>
 
</html>

Output:
Before click on the button:

After click on the button:

Example-2: Creating td element using document.createElement(“TD”);.

html

<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
 
 
    <body style="text-align:center;">
 
        <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
 
        <h2>DOM TableData Object</h2>
 
        <table id="myTable">
            <tr id="myTr">
            </tr>
        </table>
 
         
<p>Click the button to create a td element.</p>
 
 
        <button onclick="myFunction()">
          Click Here!
        </button>
 
        <script>
            function myFunction() {
               
                //  Creating td element.
                var x = 
                document.createElement("TD");
               
                var t = 
                document.createTextNode("Hello Geeks!");
               
                x.appendChild(t);
                document.getElementById(
                  "myTr").appendChild(x);
            }
        </script>
 
    </body>
 
</html>