Open In App

HTML DOM Table Header vAlign Property

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML DOM TableHeader vAlign property is used to set or return the value of the vAlign attribute of the <th> element. The vAlign attribute is used to specify the vertical alignment of the text-content inside the Table Header.

Note: This property is no longer supported in HTML5.

Syntax:

  • It returns the Table Header vAlign Property. 
TableHeaderobject.vAlign;
  • It sets the Table Header vAlign Property. 
TableHeaderobject.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 that represents the vertical alignment of the Table Header. 

We will utilize the above property values & will understand its implementation through the example.

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

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Style to set border -->
    <style>
    table,
    th,
    td {
        border: 1px solid black;
    }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
        DOM TableHeader vAlign Property
    </h2>
    <table>
        <tr>
            <th id="table"
                style="padding:15px"
                valign="baseline"> Username
            </th>
        </tr>
        <tr>
            <td>Manas Chhabra</td>
        </tr>
    </table>
    <br>
    <button onclick="myGeeks()"> Click Here!</button>
    <p id="sudo"
        style="font-size:25px;
               color:green"></p>
 
             
    <!-- Script to return Table Header vAlign Property -->
    <script>
    function myGeeks() {
        var tab = document.getElementById("table").vAlign;
        document.getElementById("sudo").innerHTML = tab;
    }
    </script>
</body>
</html>


 Output:

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

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Style to set border -->
    <style>
    table,
    th,
    td {
        border: 1px solid black;
    }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>
            DOM TableHeader vAlign Property
        </h2>
        <table>
            <tr>
                <th id="table"
                    style="padding:50px"
                    valign="baseline"> Username
                </th>
            </tr>
            <tr>
                <td>Manas Chhabra</td>
            </tr>
        </table>
        <br>
        <button onclick="myGeeks()"> Click Here! </button>
        <p id="sudo"
           style="font-size:25px;
                  color:green">
        </p>
 
    </center>
     
    <!-- Script to set the Table Header vAlign Property -->
    <script>
    function myGeeks() {
        var tab = document.getElementById(
                "table").vAlign = "bottom";
        document.getElementById("sudo").innerHTML = tab;
    }
    </script>
</body>
</html>


 Output:

Supported Browsers:

  • Google Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari
  • Internet Explorer


Last Updated : 23 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads