Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM TableData vAlign Property

  • Last Updated : 17 Nov, 2021

The HTML DOM TableData vAlign property is used to set or return the value of the vAlign attribute of the <td> element. The vAlign attribute is used to specify the vertical alignment of the text content inside the Table Data cell.

Note: This property is no longer supported in HTML5.

Syntax:

  • It returns the Table Data vAlign property.
TableDataobject.vAlign;
  • It sets the Table Data vAlign Property.
TableDataobject.vAlign = "top|middle|bottom|baseline"; 

Property Values:

  • top: It sets the content to the top-align.
  • middle: It sets the content to middle-align.
  • bottom: It sets the content to the bottom-align.
  • baseline: It sets the context to baseline. The baseline is the line where most of the characters sit.

 

Return Values: It returns a string value that represents the vertical alignment of the

element.

Example 1: Below code returns the Table Data vAlign 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 vAlign 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" 
                    valign="top">25</td>
                <td align="right">EC</td>
            </tr>
        </table>
        <br>
  
        <button onclick="btnclick()">
            Return
        </button>
  
        <p id="paraID"></p>
    </center>
  
    <script>
        function btnclick() {
  
            // Accessing Table data
            var x = document.getElementById(
                    "columnID").vAlign;
                      
            document.getElementById(
                    "paraID").innerHTML = x
        }
    </script>
</body>
  
</html>

Output:

Example 2: Below HTML code demonstrates to set the vAlign 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 vAlign 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" 
                    valign="top">25</td>
                <td align="right">EC</td>
            </tr>
        </table>
        <br>
  
        <button onclick="btnclick()">
            Return
        </button>
  
        <p id="paraID"></p>
    </center>
  
    <script>
        function btnclick() {
  
            // Accessing Table data
            var x =
                document.getElementById(
                    "columnID").vAlign = "bottom";
  
            document.getElementById(
                    "paraID").innerHTML = x
        }
    </script>
</body>
  
</html>

Output: 

Supported Browsers: The browser supported by HTML DOM TableData vAlign 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!