CSS captionside Property (original) (raw)

CSS caption-side Property

Last Updated : 22 May, 2026

The caption-side property in CSS is used to specify the position of a table caption. It determines whether the caption appears at the top or bottom of the table.

• Commonly used with HTML tables to control caption placement.
• Supports values like top and bottom.
• Helps improve the presentation and readability of tables.

**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: Here, we are using caption-side:top; property.

HTML `

<style>
    .geeks {
        caption-side: top;
    }
</style>

GeeksForGeeks

caption-side: top:

`

**Example: Here, we are using caption-side:bottom; property.

HTML `

<style>
    .geeks {
        caption-side: bottom;
    }
</style>

GeeksForGeeks

caption-side: bottom:

`

**Example: Here, we are using caption-side: initial; property.

HTML `

GeeksForGeeks

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

`