HTML DOM TableData vAlign Property

Last Updated : 23 Aug, 2022

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() {

            // return Table data vAlign Property
            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() {

            // set Table data vAlign Property
            var x =
                document.getElementById(
                    "columnID").vAlign = "bottom";

            document.getElementById(
                    "paraID").innerHTML = x
        }
    </script>
</body>
</html>