Skip to content
Related Articles

Related Articles

HTML | DOM TableData Object
  • Last Updated : 07 Feb, 2019

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:

PropertyDescription
abbrThis property is used to set or return the value of the abbr attribute.
alignThis property is used to set or return the horizontal alignment of the content in a data cell.
vAlignThis property is used to set or return the vertical alignment of the content within a cell.
widthThis property is used to set or return the width of a data cell.
axisThis property is used to set or return a comma-separated list of related data cells.
backgroundThis property is used to set or return the background image of a data cell.
bgColorThis property is used to set or return the background color of a table.
cellIndexThis property is used to return the position of a cell in the cells collection of a table row.
chThis property is used to set or return an alignment character for a data cell.
chOffThis property is used to set or return the horizontal offset of the ch property.
colSpanThis property is used to set or return the value of the colspan attribute.
headersThis property is used to set or return the value of the headers attribute.
heightThis property is used to set or return the height of a data cell.
noWrapThis property is used to set or return whether the content in a cell can be wrapped.
rowSpanThis property is used to set or return the value of the rowspan attribute.

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




<!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”);.




<!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>

Output:

Before click on the button:

After click on the button:

Note: Most of the properties not supported in html5.

My Personal Notes arrow_drop_up
Recommended Articles
Page :