HTML DOM TBody vAlign Property

Last Updated : 04 Jan, 2022

The HTML DOM TBody vAlign property is used to set or return the value of the valign attribute of the <tbody> element. The valign attribute is used to specify the vertical alignment of the text-content inside the table body element.

Note: This property is no longer supported in HTML5.

Syntax:

It returns the TBody vAlign property.

TBodyobject.vAlign;

It sets the TBody vAlign property.

TBodyobject.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 <tbody> element.

Example 1: Below HTML code illustrates how to return the TBody 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 TBody vAlign property </h2> 
         <!-- tbody tag starts -->
        <table> 
            <tbody id="tbodyID" valign="top"> 
                <tr> 
                    <td>Shashank</td> 
                    <td>@shashankla</td> 
                </tr> 
                    <tr> 
                    <td>GeeksforGeeks</td> 
                    <td>@geeks</td> 
                </tr> 
            </tbody> 
            <!-- tbody tag ends  -->             
        </table> 
      
         <p> 
            Click button to return the vertical  
            alignment of the TBody element 
        </p> 
  
  
        <button onclick = "btnclick()"> 
            Click Here! 
        </button>  
        <p id ="paraID"></p> 
  
  
        <script> 
            function btnclick() { 
                var tbody = document.getElementById("tbodyID").vAlign; 
                 document.getElementById("paraID").innerHTML = tbody; 
            } 
        </script> 
</body> 
</html>

Output:

HTML DOM TBody vAlign Property

Example 2: Below code illustrates how to set the TBody vAlign property.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        table, 
        th, 
        td { 
            border: 1px solid green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1> 
            GeeksforGeeks 
        </h1> 
  
        <p><b>HTML DOM TBody vAlign property </b></p> 
  
        <!-- tbody tag starts-->
        <table> 
            <tbody id="tbodyID" valign="top"> 
                <tr> 
                    <td>Shashank</td> 
                    <td>@shashankla</td> 
                </tr> 
                <tr> 
                    <td>GeeksforGeeks</td> 
                    <td>@geeks</td> 
                </tr> 
            </tbody> 
            <!-- tbody tag ends  -->
        </table> 
  
        <p> 
            Click on the button to set the 
            vertical alignment of the  
            TBody element 
        </p> 
  
        <button onclick="btnclick()"> 
            Click Here! 
        </button> 
  
        <p id="paraID"></p> 
    </center> 
  
    <script> 
        function btnclick() { 
            var tbody = document.getElementById( 
                "tbodyID").vAlign = "bottom"; 
            document.getElementById("paraID") 
                .innerHTML = "The value of the " 
                + "Attribute was changed to: "  
                + tbody; 
        } 
    </script> 
</body> 
  
</html> 