Open In App

HTML DOM Table Header vAlign Property

Last Updated : 23 Aug, 2022
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


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads