Skip to content
Related Articles

Related Articles

HTML | DOM Style captionSide Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 08 Aug, 2022

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!