Horje
HTML DOM TableData align Property

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 style="text-align:center;">
  <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() {
      // return Table Data align property
      var x =
        document.getElementById("columnID").align;
      document.getElementById("paraID").innerHTML = x
    }
  </script>
  </center>
</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 style="text-align:center;">
  <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() {
      // set Table Data align property
      var x =
        document.getElementById("columnID").align = "right";
      document.getElementById("paraID").innerHTML = x
    }
  </script>
  </center>
</body>
</html>

Output:           

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

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

 


Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML &lt;menuitem&gt; disabled Attribute HTML &lt;menuitem&gt; disabled Attribute
HTML DOM THead vAlign Property HTML DOM THead vAlign Property
HTML DOM THead align Property HTML DOM THead align Property
HTML DOM THead Object HTML DOM THead Object
HTML DOM Table Header align Property HTML DOM Table Header align Property

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 10



 

Horje