Skip to content
Related Articles

Related Articles

HTML | DOM Style captionSide Property
  • Difficulty Level : Basic
  • Last Updated : 31 Jul, 2019

The DOM Style captionSide property is used to set or return the position of the caption in a table.

Syntax:

  • To get the captionSide Property
    object.style.captionSide
  • To set the captionSide Property
    object.style.captionSide = "bottom | top | initial | inherit"

Property Values:

  1. bottom: This is used to position the caption on the bottom.

    Example-1:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
          DOM Style captionSide Property
        </title>
        <style>
            th,td {
                border: 2px solid black;
                padding: 10px;
                margin: 10px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style captionSide Property
        </b>
        <table>
            <caption id="caption1">
              List of books
            </caption>
            <tr>
                <th>Book</th>
                <th>Author</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>Head First Java</td>
                <td>Bert Bates, Kathy Sierra</td>
                <td>500</td>
            </tr>
            <tr>
                <td>Introduction to Algorithms</td>
                <td>CLRS</td>
                <td>1000</td>
            </tr>
        </table>
      
        <button onclick="setCaptionSide()" 
                style="margin-top: 10px">
            Set captionSide
        </button>
      
        <!-- Script to set captionSide to bottom -->
        <script>
            function setCaptionSide() {
                
                elem = document.querySelector('#caption1');
                elem.style.captionSide = 'bottom';
            }
        </script>
    </body>
      
    </html>

    Output:



    Before clicking the button:

    bottom-before

    After clicking the button:

    bottom-after

  2. top: This is used to position the caption on the top. This is the default value.

    Example-2:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
          DOM Style captionSide Property
        </title>
        <style>
            th,td {
                border: 2px solid black;
                padding: 10px;
                margin: 10px;
            }
              
            #caption1 {
                caption-side: bottom;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style captionSide Property
        </b>
        <table>
            <caption id="caption1">
              List of books
            </caption>
            <tr>
                <th>Book</th>
                <th>Author</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>Head First Java</td>
                <td>Bert Bates, Kathy Sierra</td>
                <td>500</td>
            </tr>
            <tr>
                <td>Introduction to Algorithms</td>
                <td>CLRS</td>
                <td>1000</td>
            </tr>
        </table>
      
        <button onclick="setCaptionSide()" 
                style="margin-top: 10px">
            Set captionSide
        </button>
      
        <!-- Script to set captionSide to top -->
        <script>
            function setCaptionSide() {
                elem = document.querySelector('#caption1');
                elem.style.captionSide = 'top';
            }
        </script>
    </body>
      
    </html>

    Output:

    Before clicking the button:

    top-before



    After clicking the button:

    top-after

  3. initial: This is used to set this property to its default value.

    Example-3:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
          DOM Style captionSide Property
        </title>
        <style>
            th,td {
                border: 2px solid black;
                padding: 10px;
                margin: 10px;
            }
              
            #caption1 {
                caption-side: bottom;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style captionSide Property
        </b>
        <table>
            <caption id="caption1">
              List of books
            </caption>
            <tr>
                <th>Book</th>
                <th>Author</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>Head First Java</td>
                <td>Bert Bates, Kathy Sierra</td>
                <td>500</td>
            </tr>
            <tr>
                <td>Introduction to Algorithms</td>
                <td>CLRS</td>
                <td>1000</td>
            </tr>
        </table>
      
        <button onclick="setCaptionSide()"
                style="margin-top: 10px">
            Set captionSide
        </button>
      
        <!-- Script to set captionSide to initial -->
        <script>
            function setCaptionSide() {
                elem = document.querySelector('#caption1');
                elem.style.captionSide = 'initial';
            }
        </script>
    </body>
      
    </html>

    Output:

    Before clicking the button:

    initial-before

    After clicking the button:

    initial-after

  4. inherit: This inherits the property from its parent.

    Example-4:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
          DOM Style captionSide Property
        </title>
        <style>
            th,td {
                border: 2px solid black;
                padding: 10px;
                margin: 10px;
            }
              
            #parent {
                caption-side: bottom;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style captionSide Property
        </b>
        <div id="parent">
            <table>
                <caption id="caption1" 
                         style="caption-side: top">
                  List of books
                </caption>
                <tr>
                    <th>Book</th>
                    <th>Author</th>
                    <th>Price</th>
                </tr>
                <tr>
                    <td>Head First Java</td>
                    <td>Bert Bates, Kathy Sierra</td>
                    <td>500</td>
                </tr>
                <tr>
                    <td>Introduction to Algorithms</td>
                    <td>CLRS</td>
                    <td>1000</td>
                </tr>
            </table>
        </div>
      
        <button onclick="setCaptionSide()"
                style="margin-top: 10px">
            Set captionSide
        </button>
      
        <!-- Script to set captionSide to inherit -->
        <script>
            function setCaptionSide() {
                elem = document.querySelector('#caption1');
                elem.style.captionSide = 'inherit';
            }
        </script>
    </body>
      
    </html>

    Output:

    Before clicking the button:

    inherit-before

    After clicking the button:

    inherit-after

    Supported Browsers: The browser supported by captionSide property are listed below:

    • Google Chrome
    • Internet Explorer 9.0
    • Firefox
    • Opera
    • Apple Safari
    My Personal Notes arrow_drop_up
Recommended Articles
Page :