Home »
CSS
The caption-side Property in CSS
CSS | caption-side Property: Here, we are going to learn about the caption-side property with syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on January 07, 2020
CSS | caption-side Property
Introduction:
We deal with captions and tables daily while developing a web page but the little known fact is that captions can be positioned as one desires them to be. Therefore, for achieving such orientation many properties exist and one of the most prominent of them is the caption-side property in CSS.
A Gist:
The caption-side is a display property that makes it much easier to be implemented and thus the orientation of the caption can be altered. Now that we have a general idea of the property let us have a look at the formal definition of this property for a better understanding and what it is capable of.
Definition:
The caption-side property is used to specify the position where the caption of the table is supposed to be placed. This property can be applied to any element whose display property is set to caption-side.
Syntax:
Element{
caption-side : top|bottom;
}
Therefore, it should be clear from the definition that the property is an easy-to-use property. However, the caption-side property can take two values and those are,
Let us understand these properties one by one,
caption-side : bottom
The first value of the caption-side property is the Bottom value. This caption-side value is used to display the caption just below the table.
Syntax:
Element{
caption-side : bottom;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
caption-side: bottom;
}
</style>
</head>
<body>
<h1>The caption-side Property</h1>
<table border="1">
<caption>Student record</caption>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Abc</td>
<td>Compiler Design</td>
<td>93</td>
</tr>
<tr>
<td>xyz</td>
<td>Operating System</td>
<td>70</td>
</tr>
<tr>
<td>uvw</td>
<td>Maths</td>
<td>66</td>
</tr>
</table>
</body>
</html>
Output
In the above example, it can be seen that the caption "student record" is below the table and the code was not even that hard, so go ahead and try it out yourself.
caption-side : top
The next value on the list of caption-side property is the top value. Just opposite to the Bottom value, this caption-side value is used to display the caption just above the table.
Note: The top value of this property is also the default value.
Syntax:
Element{
caption-side : top;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
caption-side: top;
}
</style>
</head>
<body>
<h1>The caption-side Property</h1>
<table border="1">
<caption>Student record</caption>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Abc</td>
<td>Compiler Design</td>
<td>93</td>
</tr>
<tr>
<td>xyz</td>
<td>Operating System</td>
<td>70</td>
</tr>
<tr>
<td>uvw</td>
<td>Maths</td>
<td>66</td>
</tr>
</table>
</body>
</html>
Output
In the above example, it is clearly visible that the Top value works just opposite to the Bottom value as the caption "student record" is placed above the table.
CSS Tutorial & Examples »