Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM Table Header align Property

  • Last Updated : 27 Dec, 2021

The HTML DOM TableHeader align property is used to set or return the horizontal alignment of the content inside the table header.  It is not supported by HTML 5.

Syntax:

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

Property values:

  • left: It sets the text left-aligned.
  • right: It sets the text right-aligned.
  • center: It sets the text center-aligned.
  • justify: It stretches the text of the 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 horizontal alignment of the <th> element. 

Example 1: Below code illustrates how to return the TableHeader align property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Style to set border -->
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>
            DOM TableHeader align Property
        </h2>
        <table>
            <tr>
                <th id="table" style="padding:15px"
                    align="left">
                    Username
                </th>
            </tr>
            <tr>
                <td>Manas Chhabra</td>
            </tr>
        </table>
        <br>
         
        <button onclick="clickbtn()">
            Click Here!
        </button>
         
        <p id="paraID"
            style="font-size:25px;color:green"></p>
 
 
 
 
        <!-- Script to access th element -->
        <script>
            function clickbtn() {
                var tab = document.getElementById(
                    "table").align;
 
                document.getElementById("paraID")
                    .innerHTML = tab;
            }
        </script>
</body>
 
</html>

Output:

Example 2: Below code illustrates how to set the TableHeader align property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Style to set border -->
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>
            DOM TableHeader align Property
        </h2>
        <table>
            <tr>
                <th id="table"
                    style="padding:15px" align="left">
                    Username
                </th>
            </tr>
            <tr>
                <td>Manas Chhabra</td>
            </tr>
        </table>
        <br>
         
        <button onclick="click1()">
            Click Here!
        </button>
         
        <p id="paraID" style=
            "font-size:25px;color:green">
        </p>
 
 
    </center>
 
    <!-- script to access th element -->
    <script>
        function click1() {
            var tab = document.getElementById(
                    "table").align = "right";
 
            document.getElementById("sudo")
                .innerHTML = tab;
        }
    </script>
</body>
 
</html>

Output: 

Supported Browsers:

  • Google Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari
  • Internet Explorer


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!