HTML DOM Table Row vAlign Property

Last Updated : 25 Feb, 2022

The HTML DOM Table Row vAlign Property is used to set or return the value of the valign attribute of the <tr> element. The valign attribute is used to specify the vertical alignment of the text-content inside the Table Row.

Note: This property is not supported by HTML5.

Syntax

It returns the Table Row vAlign Property.

TableRowobject.vAlign;

It sets the Table Row vAlign Property.

TableRowobject.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. It has a default value.

Return Value: It returns a string value which represents the vertical alignment of the TableRow element.

Example 1: Below code illustrates how to return the vAlign Property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>
            GeeksForGeeks
        </h1>
 
        <h2>HTML DOM tableRow vAlign Property</h2>
 
        <table style="height:200px" border="1">
            <tr id="GFG" valign="top">
                <th>Name</th>
                <th>Expenses</th>
            </tr>
 
            <tr valign="bottom">
                <td>BITTU</td>
                <td>2500.00</td>
            </tr>
 
            <tr valign="middle">
                <td>RAKESH</td>
                <td>1400.00</td>
            </tr>
        </table>
 
        <button onclick="myGeeks()">
            Click Here!
        </button>
 
        <p id="sudo"></p>
 
 
 
 
    </center>
     
    <script>
        function myGeeks() {
            var row = document.getElementById("GFG").vAlign;
            document.getElementById("sudo").innerHTML = row;
        }
    </script>
</body>
 
</html>

Output:

Example 2: Below code sets the vAlign Property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
 
<body>
    <center>
 
        <h1>
            GeeksForGeeks
        </h1>
 
        <h2>HTML DOM tableRow vAlign Property</h2>
 
        <table style="height:200px" border="1">
            <tr id="GFG" valign="top">
                <th>Name</th>
                <th>Expenses</th>
            </tr>
 
            <tr valign="bottom">
                <td>BITTU</td>
                <td>2500.00</td>
            </tr>
 
            <tr valign="middle">
                <td>RAKESH</td>
                <td>1400.00</td>
            </tr>
        </table>
 
        <button onclick="myGeeks()">
            Click Here!
        </button>
 
        <p id="sudo"></p>
 
 
 
 
    </center>
     
    <script>
        function myGeeks() {
            var row = document.getElementById(
                      "GFG").vAlign = "bottom";
            document.getElementById("sudo").innerHTML = row;
        }
    </script>
</body>
 
</html>