Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Caption Object

  • Last Updated : 25 Nov, 2021

The DOM Caption Object is used to represent the HTML <Caption> element (A caption element is used to specify caption of a table). The Caption element is accessed by getElementById().
Properties: 
 

  • It has a align Attribute which is used to sets or returns the alignment of the caption.

Syntax: 
 

document.getElementById("id"); 

Where “id” is the ID assigned to the Caption tag.
Example-1: 
 

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 Object</h2>
   
    <table>
        <caption id="GFG">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>
 
    <script>
        function myGeeks() {
            var w = document.getElementById("GFG");
            w.style.color = "green";
            w.style.fontSize = "28px";
        }
    </script>
 
</body>
 
</html>

Output:
Before Clicking On Button: 
 

After Clicking on Button: 
 

Example-2: Caption Object can be created by using the document.createElement method. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 2px soliD green;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;font-size:35px;">
      GeeksForGeeks
    </h1>
    <h2>DOM Caption Object</h2>
   
    <table id="GFG">
        <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>
 
    <script>
        function myGeeks() {
            var cap = document.createElement("CAPTION");
            var txt = document.createTextNode("Students");
            cap.appendChild(txt);
            cap.style.color = "red";
            cap.style.fontSize = "29px";
 
            var tab = document.getElementById("GFG")
            tab.insertBefore(cap, tab.childNodes[0]);
        }
    </script>
 
</body>
 
</html>

Output: 
Before Clicking on Button: 
 

After Clicking on Button: 
 

Supported Browsers: The browser supported by DOM Caption Object are listed below: 
 

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!