HTML | DOM TableData Object

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before click on the button:

After click on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.