How to put the caption below the table using CSS ?

Last Updated : 06 Jun, 2023

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 caption-side. There are several parameters for this property, but we have been asked to put the caption below the table, so we will use a single parameter value which is the bottom.

Syntax:

caption-side: bottom;

Example: In this example, we are using the above-explained properties.

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>