Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS caption-side property
The caption-side property controls the position of a table's <caption> element relative to the table content. This CSS property allows you to place captions on any side of the table for better visual organization.
Syntax
caption-side: top | bottom | left | right | initial | inherit;
Property Values
| Value | Description |
|---|---|
top |
Caption appears above the table (default) |
bottom |
Caption appears below the table |
left |
Caption appears to the left of the table |
right |
Caption appears to the right of the table |
Example
Here's a practical example showing different caption positions:
<html>
<head>
<style>
table {
width: 300px;
border: 2px solid #333;
margin: 20px 0;
border-collapse: collapse;
}
td {
padding: 8px;
border: 1px solid #ccc;
text-align: center;
}
caption.top {
caption-side: top;
font-weight: bold;
color: blue;
}
caption.bottom {
caption-side: bottom;
font-weight: bold;
color: green;
}
caption.left {
caption-side: left;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<table>
<caption class="top">Countries (Top Caption)</caption>
<tr><td>India</td></tr>
<tr><td>UK</td></tr>
<tr><td>US</td></tr>
</table>
<table>
<caption class="bottom">Countries (Bottom Caption)</caption>
<tr><td>France</td></tr>
<tr><td>Germany</td></tr>
<tr><td>Italy</td></tr>
</table>
<table>
<caption class="left">Countries (Left Caption)</caption>
<tr><td>Japan</td></tr>
<tr><td>China</td></tr>
<tr><td>Korea</td></tr>
</table>
</body>
</html>
Browser Compatibility
The caption-side property is widely supported across all modern browsers. Note that the left and right values have limited support in some older browsers.
Common Use Cases
- Data tables: Place captions below for source attribution
- Navigation tables: Use side captions for compact layouts
- Report tables: Top captions for clear table identification
Conclusion
The caption-side property provides flexible positioning for table captions. Use top for standard layouts, bottom for source citations, and side positions for specialized designs.
Updated on: 2026-03-15T23:18:59+05:30
69 Views
Advertisements