CSS caption-side Property
CSS caption-side property lets us put the content of the caption of a table on the specified side. The values are related to the writing mode of the table. The caption-side property gets specified as one of the keyword values among these values- top (above the table), bottom (below the table), left (left side of the table), right (right side of the table), top-outside (above the table but not bound to the horizontal layout) or the bottom-outside (below the table but not bound to the horizontal layout).
Syntax for caption-side Property
Following is the syntax for the caption-side property.
top | bottom | block-start | block-end | inline-start | inline-end
Example: CSS caption-side Property
Here in the example below, we are using the caption-side property with different border colors, and their different values. In this case, we have given the caption-side of the object using all the values of this property. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>The caption-side proeprty in CSS</title>
<style type="text/css">
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 2px solid red;
}
td {
border: 2px solid blue;
}
</style>
</head>
<body>
<table class="top">
<caption>Caption ABOVE the table</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
<br>
<table class="bottom">
<caption>Caption BELOW the table</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
</body>
</html>
Output:
Example 2: CSS caption-side Property
Here in the example below, we are using the caption-side property with different border colours, and their different values. In this case, we have given the caption-side of the object using the non-standard values of this property. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>The caption-side proeprty in CSS</title>
<style type="text/css">
.top caption {
caption-side: top;
}
table {
border: 2px solid red;
width: 8px;
height: 8px;
}
tr{
width: 8px;
height: 8px;
}
td {
border: 2px solid blue;
width: 4px;
height: 4px;
}
</style>
</head>
<body>
<table class="top">
<caption>Caption ABOVE the table</caption>
<tr>
<td>Study Tonight</td>
<td>is the best place for</td>
<td>digital learning</td>
</tr>
</table>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
8 |
8 |
| Opera |
4 |
4 |
| Safari |
1 |
1 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the caption-side property in CSS is top. This property is applicable to the table caption elements. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
