Open In App

HTML DOM THead vAlign Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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


Last Updated : 29 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads