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.