HTML DOM Table Header vAlign Property

Last Updated : 23 Aug, 2022

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>