Open In App

HTML DOM THead vAlign Property

Last Updated : 29 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

HTML DOM THead vAlign Property is used to set or return the value of the valign attribute of the <thead> element. The valign attribute is used to specify the vertical alignment of the text content inside the table heading element.

Note: This property is no longer supported in HTML5.

Syntax:

  • It returns the THead vAlign property. 
THeadobject.vAlign;
  • It sets the THead vAlign property. 
THeadobject.vAlign = "top | middle | bottom | baseline";

Property Values:

Property Value

Description

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 <thead> element. 

Example 1: This example illustrates how to return the THead vAlign property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM THead vAlign property
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        table {
            margin: auto;
        }
 
        table,
        th,
        td {
            border: 1px solid green;
        }
 
        thead {
            height: 50px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h2>HTML DOM THead vAlign property</h2>
 
    <table>
        <thead id="theadID" valign="top">
            <tr>
                <td>Username</td>
                <td>User_Id</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Shashank</td>
                <td>@shashankla</td>
            </tr>
            <tr>
                <td>GeeksforGeeks</td>
                <td>@geeks</td>
            </tr>
        </tbody>
    </table>
    <br>
 
    <button onClick="myGeeks()">
        Click Here!
    </button>
 
    <p id="result"></p>
 
    <script>
        function myGeeks() {
            let thead_valign = document
                .getElementById("theadID").vAlign;
 
            document.getElementById("result")
                .innerHTML = "Vertical "
                + thead_valign + " Aligned";
        }
    </script>
</body>
 
</html>


Output:

thead-valign

Example 2: This example illustrates how to set the THead vAlign Property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM THead vAlign property
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        table {
            margin: auto;
        }
 
        table,
        th,
        td {
            border: 1px solid green;
        }
 
        thead {
            height: 50px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h2>HTML DOM THead vAlign property</h2>
 
    <table>
        <thead id="theadID" valign="top">
            <tr>
                <td>Username</td>
                <td>User_Id</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Shashank</td>
                <td>@shashankla</td>
            </tr>
            <tr>
                <td>GeeksforGeeks</td>
                <td>@geeks</td>
            </tr>
        </tbody>
    </table>
    <br>
 
    <button onClick="myGeeks()">
        Click Here!
    </button>
 
    <p id="result"></p>
 
    <script>
        function myGeeks() {
            let thead_valign = document
                .getElementById("theadID").vAlign = "bottom";
 
            document.getElementById("result")
                .innerHTML = thead_valign;
        }
    </script>
</body>
 
</html>


Output:

thead-valign-2

Supported Browsers:

  • Chrome 1
  • Edge 12
  • Opera 1
  • Firefox 15
  • Safari 3


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads