Open In App

CSS caption-side Property

Last Updated : 04 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

This property is used to specify the position where the table caption is placed. It is used in HTML Tables. This property can be used with any element whose display property is set to caption-side.

Syntax: 

caption-side: top|bottom|block-start|block-end|inline-start|inline-end|initial|inherit;

Properties:   

  • top: It specifies that the table caption is placed at the top of the table. It is the default value.
  • bottom: This property specifies that the table caption is placed at the bottom of the table.
  • initial: It sets the property to its default value.

Example: In this example, we are using caption-side:top; property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>caption-side property</title>
    <style>
        .geeks {
            caption-side: top;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>
            caption-side: top:
        </h2>
        <table class="geeks" border="1">
            <caption>
                Table 4.1 Student Details
            </caption>
            <tr>
                <th>Student Name</th>
                <th>Enroll_no.</th>
                <th>Address</th>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>234</td>
                <td>Delhi</td>
            </tr>
            <tr>
                <td>Govind madan</td>
                <td>235</td>
                <td>kolkata</td>
            </tr>
            <tr>
                <td>Suraj Roy</td>
                <td>236</td>
                <td>Mumbai</td>
            </tr>
            <tr>
                <td> Dhruv Mishra</td>
                <td>237</td>
                <td>Dehadun</td>
            </tr>
        </table>
    </center>
</body>
 
</html>


Output: 

Example:  In this example, we are using caption-side:bottom; property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>caption-side property</title>
    <style>
        .geeks {
            caption-side: bottom;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>
            caption-side: bottom:
        </h2>
        <table class="geeks" border="1">
            <caption>
                Table 4.1 Student Details
            </caption>
            <tr>
                <th>Student Name</th>
                <th>Enroll_no.</th>
                <th>Address</th>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>234</td>
                <td>Delhi</td>
            </tr>
            <tr>
                <td>Govind madan</td>
                <td>235</td>
                <td>kolkata</td>
            </tr>
            <tr>
                <td>Suraj Roy</td>
                <td>236</td>
                <td>Mumbai</td>
            </tr>
            <tr>
                <td> Dhruv Mishra</td>
                <td>237</td>
                <td>Dehadun</td>
            </tr>
        </table>
    </center>
</body>
 
</html>


Output: 

Example:   In this example, we are using caption-side: initial; property.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            caption-side: initial;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
              GeeksForGeeks
          </h1>
 
        <h2>caption-side:initial:</h2>
        <table class="geeks" border="1">
            <caption>Table 4.1 Student Details</caption>
            <tr>
                <th>Student Name</th>
                <th>Enroll_no.</th>
                <th>Address</th>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>234</td>
                <td>Delhi</td>
            </tr>
            <tr>
                <td>Govind madan</td>
                <td>235</td>
                <td>kolkata</td>
            </tr>
            <tr>
                <td>Suraj Roy</td>
                <td>236</td>
                <td>Mumbai</td>
            </tr>
            <tr>
                <td> Dhruv Mishra</td>
                <td>237</td>
                <td>Dehadun</td>
            </tr>
        </table>
    </center>
</body>
</html>


Output: 

Supported Browsers: The browsers supported by CSS caption-side Property are listed below:  

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 8.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.0


Previous Article
Next Article

Similar Reads

Server Side Rendering vs Client Side Rendering vs Server Side Generation
In the world of web development, there are several approaches to rendering web pages: server-side rendering, client-side rendering, and server-side generation. Each approach has its own advantages and disadvantages, and choosing the right one for your project depends on your specific needs and goals. In this blog, we’ll explore the differences betw
4 min read
How to place two div side-by-side of the same height using CSS?
The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.display:table-cell; This proper
2 min read
How to Align Images Side By Side using CSS ?
In this article, we will understand how we can Align Images Side By Side using CSS. In CSS, there are many properties to use and align the images, and we can also use JavaScript for that work. but we will perform it using CSS only. Basically, Aligning images side by side means placing two or more image side by side means consecutively one after one
4 min read
How to float three div side by side using CSS?
In this article, we are going to learn how to float three divs side by side using CSS. Three or more different divs can be put side-by-side using CSS. Use the CSS property to set the height and width of the div and use the display property to place the div in a side-by-side format. These are the following ways to solve this problem: Table of Conten
3 min read
How To Place Tables Side by Side using HTML and CSS
In this article, we will learn how to place tables side by side using HTML and CSS. To place tables side by side, first, we create two tables using &lt;table&gt; tag and then apply some CSS styles to place both tables side by side. Place Tables Side by SideExample: Here, we place two Tables Side by Side using HTML and CSS. C/C++ Code &amp;lt;!DOCTY
2 min read
How to put the caption below the table using CSS ?
In this article we are going to learn How to put the caption below the table using CSS, To put the caption below the table we can use the CSS caption-side property. This property is used to specify the position where the table caption is placed. It is used in HTML Tables. This property can be used with any element whose display property is set to c
1 min read
HTML | DOM Table caption Property
The Table caption property returns the &lt;caption&gt; element of a table which is used to define the caption for a table. Only one caption can be assigned to a table and the caption entered inside the &lt;caption&gt; element is center aligned by default. Syntax tableObject.caption Return Value: It returns a string value that defines a text present
2 min read
HTML DOM caption align Property
The HTML DOM caption align Property is used to set or return the value of the align attribute of &lt;caption&gt; element. Note: This property is not supported by HTML5. Syntax: It returns the caption align property. captionobject.align; It sets the caption to align the property. captionobject.align="left | right | center| Top | Bottom" Property Val
2 min read
jQWidgets jqxGauge RadialGauge caption Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent and widely supported framework. jqxGauge represents a jQuery gauge widget, it is an indicator within a range of values. We can use Gauges to show a value in a range of values in the data region, the
2 min read
Difference between Server-Side AJAX framework and Client-side AJAX framework ?
The article focuses on discussing the differences between the Server-side AJAX framework and the Client-side AJAX framework. The following topics will be discussed here: What is a Server-side AJAX framework?What is a Client-side AJAX framework?Server-side AJAX framework vs Client-side AJAX framework Let's start discussing each of these topics in de
3 min read