HTML | DOM Caption Object

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

    Before Clicking On Button:

    After Clicking on Button:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.