Open In App
Related Articles

HTML | DOM Style captionSide Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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"

Return Values: It returns a string value, which represents the position of the table caption.

Property Values:

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

Example-1: 

html

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

html

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

html

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

html

<!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 1 and above
  • Edge 12 and above
  • Internet Explorer 8 and above
  • Firefox 1 and above
  • Opera 4 and above
  • Apple Safari 1 and above


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads