Skip to content
Related Articles

Related Articles

HTML DOM TableData align Property

Improve Article
Save Article
Like Article
  • Last Updated : 21 Mar, 2022

The HTML DOM TableData align property is used to set or return the horizontal alignment of the content within the table cell. It is not supported by HTML5.

Syntax:

  • It returns the align property.
TableDataobject.align
  • It sets the align property.
TableDataObject.align = "left | right | center | justify | char"

Property Values:

  • left: It sets the left-align to the TableData cell.
  • center: It sets the center-align to the TableData cell. It is the default value.
  • right: It sets the right-align to the TableData cell.
  • justify: It stretches the text of the paragraph to set the width of all lines equal.
  • char: It sets the text-align to a specific character.

Return Values: It returns a string value that represents the alignment of the TableData element.

Example 1: Below HTML code returns the TableData align property.  

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
                
        table,
        th,
        td
        {
            border:1px solid green;
        }
    </style>
</head>
 
<body>
<center>
    <body style="text-align:center;">
 
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
 
        <h2>DOM TableData align property</h2>
         <table width="500" border="1">
            <tr>
                <th>NAME</th>
                <th>AGE</th>
                <th>BRANCH</th>
            </tr>
       
            <tr>
                <td align="center">BITTU</td>
                <td align="left">22</td>
                <td align="right">CSE</td>
            </tr>
       
            <tr>
                <td align="center">RAKESH</td>
                <td id ="columnID" align="left">25</td>
                <td align="right">EC</td>
            </tr>
         </table>
      <br>
 
        <button onclick="myFunction()">
           Return
        </button>
 
        <p id="paraID"></p>
 
 
 
        <script>
            function myFunction() {
              // Accessing Table data
                var x =
                document.getElementById("columnID").align;
                document.getElementById("paraID").innerHTML = x
            }
        </script>
    </body>
</html>

Output:             

Example 2: Below code sets the TableData to align property.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
           
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
 
<body>
<center>
    <body style="text-align:center;">
 
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
 
        <h2>DOM TableData align property</h2>
         <table width="500" border="1">
                <tr>
                    <th>NAME</th>
                    <th>AGE</th>
                    <th>BRANCH</th>
                </tr>         
                <tr>
                    <td align="center">BITTU</td>
                    <td align="left">22</td>
                    <td align="right">CSE</td>
                </tr>         
                <tr>
                    <td align="center">RAKESH</td>
                    <td id ="columnID" align="left">25</td>
                    <td align="right">EC</td>
                </tr>
         </table>
        <br>
 
        <button onclick="btnclick()">
          Set
        </button>
 
        <p id="paraID"></p>
 
 
 
        <script>
            function btnclick() {
            // Accessing Table data
             var x =
                document.getElementById("columnID").align = "right";
                document.getElementById("paraID").innerHTML = x
            }
        </script>
    </body>
</html>

Output:           

Supported Browsers: The browser supported by HTML DOM TableData align attributes are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!