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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>caption-side property</title>
<!--Driver Code Ends-->
<style>
.geeks {
caption-side: top;
}
</style>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
Example: Here, we are using caption-side:bottom; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>caption-side property</title>
<!--Driver Code Ends-->
<style>
.geeks {
caption-side: bottom;
}
</style>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
Example: Here, we are using caption-side: initial; property.
<!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>