Skip to content
Related Articles

Related Articles

HTML | DOM caption align Property

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Jul, 2022
View Discussion
Improve Article
Save Article

The HTML DOM caption align Property is used to set or return the value of the align attribute of <caption> element.

Note: This property is not supported by HTML5.

Syntax: 

It returns the caption align property.

captionobject.align;

It sets the caption align property.

captionobject.align="left | right | center| Top | Bottom"

Property Values: 

  • left: It sets the left-align to the caption element.
  • center: It sets the center alignment to the caption element. It is the default value.
  • right: It sets the right-align to the caption element. 
  • Top: It sets the top-align caption of the table. 
  • Bottom: It sets the bottom-align caption of the table.

Return Value: It returns a string value that represents the alignment of the caption element. 

Example 1: This example returns the caption align property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;font-size:35px;">
        GeeksForGeeks
    </h1>
    <h2>DOM Caption align Property</h2>
 
    <table>
        <caption id="GFG" align="left">Students</caption>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
    <br>
    <button onclick="myGeeks()">Submit</button>
    <p id="sudo"></p>
 
 
    <script>
        function myGeeks() {
            var w = document.getElementById("GFG").align;
            document.getElementById("sudo").innerHTML = w;
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking on the Button: 

  • After clicking on the Button:

 

Example 2: This example returns the caption align property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;font-size:35px;">
        GeeksForGeeks
    </h1>
    <h2>DOM Caption align Property</h2>
 
    <table>
        <caption id="GFG" align="left">
            Students
        </caption>
 
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
    <br>
    <button onclick="myGeeks()">Submit</button>
    <p id="sudo"></p>
 
 
 
    <script>
        function myGeeks() {
            var w = document.getElementById(
                    "GFG").align = "right";
 
            document.getElementById(
                    "sudo").innerHTML = w;
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking on the Button:

 

  • After clicking on the Button:

 

Supported Browsers: The browsers supported by HTML DOM caption align Property are listed below:

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!