Open In App

HTML DOM THead align Property

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML DOM THead align property is used to set or return the horizontal alignment of the content within the <thead> element. It is not supported by HTML 5.

Syntax:

  • It returns the align property.
    theadobject.align
  • It sets the align property.
    theadObject.align = "left | right | center | justify | char"

Property Values:

  • left: It sets the text to left-align.
  • right: It sets the text to right-align.
  • center: It sets the text to center-align.
  • justify: It stretches the text of paragraph to set the width of all lines equal.
  • char: It sets the text-align to a specific character.

Return Value : It returns a string value which represents the alignment of the <thead> element.

Example 1: Below HTML Code illustrates how to returns the THead align 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 align property</h2>
    <table>
        <thead id="theadID" align="left">
            <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").align;
            document.getElementById("paraID").innerHTML = thead;
        }
    </script>
</body>
  
</html>


Output:

Example 2: Below code illustrates how to set the THead to align 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 align property </h2>
    <table>
        <thead id="theadID" align="left">
            <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").align = "right";
  
            document.getElementById(
                "paraID").innerHTML = thead;
        }
    </script>
</body>
  
</html>


Output:

Supported Browsers:

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


Last Updated : 28 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads