Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM THead vAlign Property

  • Last Updated : 04 Jan, 2022

The 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:

  1. top: It sets the content to the top-align.
  2. middle: It sets the content to middle-align.
  3. bottom: It sets the content to the bottom-align.
  4. 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: Below HTML code illustrates how to return the THead vAlign property.

 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
  
<body>
    <center>
    <h1>
        GeeksforGeeks
    </h1>
    <h2>HTML DOM THead vAlign property </h2>
    <table>
        <thead id="theadID" align="left" 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>
    <button onclick="btnclick()"
        Click here 
    </button>
    <p id="paraID"></p>
  
    </center>
    <script>
        function btnclick() {
            var thead = document.getElementById("theadID").vAlign;
            document.getElementById("paraID").innerHTML = thead;
        }
    </script>
</body>
  
</html>

Output:

Example 2: Below HTML Code illustrates how to set the THead vAlign Property.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
  
<body>
    <center>
    <h1>
        GeeksforGeeks
    </h1>
    <h2>HTML DOM THead vAlign Property </h2>
    <table>
        <thead id="theadID" align="left" 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>
    <button onclick="btnclick()"
       Click here 
    </button>
    <p id="paraID"></p>
  
    <script>
        function btnclick() {
            var thead = document.getElementById(
                "theadID").vAlign = "bottom";
  
            document.getElementById(
                "paraID").innerHTML = thead;
        }
    </script>
</body>
  
</html>

Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Opera mini
  • Firefox
  • Apple Safari


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!