CSS caption-side
The caption-side
property in CSS specifies the placement of a table caption.
There are four possible values for the caption-side
property:
top
: Places the caption above the table.bottom
: Places the caption below the table.left
: Places the caption to the left of the table.right
: Places the caption to the right of the table.
Let's see some examples of how the caption-side
property works:
<table>
<caption style="caption-side: top;">Caption at the top</caption>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>
In this example, the caption is placed at the top of the table.
<table>
<caption style="caption-side: bottom;">Caption at the bottom</caption>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>
In this example, the caption is placed at the bottom of the table.
<table>
<caption style="caption-side: left;">Caption to the left</caption>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>
In this example, the caption is placed to the left of the table.
<table>
<caption style="caption-side: right;">Caption to the right</caption>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>
In this example, the caption is placed to the right of the table.
By using the caption-side
property, you can control the placement of captions in your tables according to your design needs.