Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM Table Row vAlign Property

  • Last Updated : 28 Oct, 2021

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. 

Syntax

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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.

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>

Output

Supported Browsers: 

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!