CSS caption-side Property

CSS caption-side Property

The caption-side property in CSS specifies the position of a table's caption. It allows you to control whether the caption appears above or below the table.

1. Syntax

selector {
  caption-side: value;
}

Value	Description
top (default)	Place the caption above the table.
bottom	Place the caption below the table.

2. Example – Caption Above the Table

table {
  caption-side: top;
}

caption {
  font-weight: bold;
}

<table>
  <caption>Table Title</caption>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

✅ The caption is positioned above the table.

3. Example – Caption Below the Table

table {
  caption-side: bottom;
}

caption {
  font-style: italic;
}

<table>
  <caption>Table Caption Below</caption>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>
</table>

✅ The caption is positioned below the table.

4. Best Practices

✔ Use caption-side to improve table readability and layout.
✔ Consider the context of the table when positioning the caption: usually, above is preferred, but below can be used for certain design needs.
✔ It’s a good practice to ensure the table is styled for accessibility, especially when using captions.