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>neveropen</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>neveropen</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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
