CSS caption-side Property

Definition and Usage

The caption-side property places a table’s <caption> on the block-start or block-end side of the table. In horizontal left-to-right writing, that means above (top) or below (bottom).

It applies to table-caption elements and is inherited. The initial value is top. Placement follows the table’s writing-mode.

CSS Syntax

Property Values

How to Use caption-side

Add a real <caption>, then choose top or bottom.

1. Put a <caption> inside the <table> (usually as the first child).
2. Write a clear caption that names the table’s purpose.
3. Set caption-side: top for a title, or bottom for a source note or footnote.
4. Optional: set the property on the table — it inherits to the caption.

Live Preview

Toggle caption-side on a small data table. Watch the caption move above or below the rows.

CSS Examples

Each snippet focuses on caption-side. Use Try It Yourself for a live editor.

<style>
  caption {
    caption-side: top;
  }
</style>

<table>
  <caption>Team scores</caption>
  <tr><th>Team</th><th>Points</th></tr>
  <tr><td>A</td><td>12</td></tr>
  <tr><td>B</td><td>9</td></tr>
</table>

<style>
  caption {
    caption-side: bottom;
  }
</style>

<table>
  <caption>Source: internal report 2026</caption>
  <tr><th>Item</th><th>Count</th></tr>
  <tr><td>Apples</td><td>4</td></tr>
  <tr><td>Pears</td><td>2</td></tr>
</table>

<style>
  table {
    caption-side: bottom;
  }
</style>

<table>
  <caption>Monthly totals</caption>
  <tr><th>Month</th><th>Total</th></tr>
  <tr><td>Jan</td><td>10</td></tr>
  <tr><td>Feb</td><td>14</td></tr>
</table>

Key Takeaways