CSS caption-side Property

What You’ll Learn

The caption-side property controls where a table caption appears — above or below the table. It helps you label data clearly and improve table readability and accessibility.

Definition and Usage

The caption-side CSS property controls the placement of table captions. It lets you specify whether the caption should appear at the top or the bottom of a table.

This property is particularly useful for enhancing the readability and accessibility of table data by clearly labeling the table’s purpose or contents. Use it with the HTML <caption> element inside a <table>.

📝 Syntax

Apply caption-side to the <caption> element or with a caption selector:

caption {
  caption-side: top | bottom;
}

Basic Example

caption {
  caption-side: bottom;
}

Syntax Rules

• The initial value is top.
• Applies to table caption elements.
• Only affects tables that include a <caption> element.
• The property is inherited, so you can set it on a parent and use inherit on captions.
• Style the caption text separately with font-weight, color, and text-align.

💎 Property Values

The caption-side property accepts keyword values that control vertical caption placement.

The caption Element

Every styled caption starts with correct HTML structure. Place <caption> as the first child inside <table>:

<table>
  <caption>Monthly sales summary</caption>
  <thead>
    <tr><th>Month</th><th>Revenue</th></tr>
  </thead>
  <tbody>
    <tr><td>Jan</td><td>$1,200</td></tr>
  </tbody>
</table>

Then use caption-side in CSS to move the caption above or below the table box. The caption text itself should describe what the table contains — not just repeat column headers.

Examples Gallery

Try bottom captions, default top placement, styled captions, and per-table positioning.

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

<table border="1">
  <caption>This is a table caption</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

<style>
  caption {
    caption-side: top;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
</style>

<table>
  <caption>Employee directory</caption>
  <tr><th>Name</th><th>Role</th></tr>
  <tr><td>Alex</td><td>Designer</td></tr>
</table>

<style>
  .data-table caption {
    caption-side: bottom;
    font-size: 0.8125rem;
    color: #64748b;
    text-align: left;
    padding-top: 0.5rem;
  }
</style>

<table class="data-table">
  <caption>Source: Internal analytics, March 2026</caption>
  <tr><th>Metric</th><th>Value</th></tr>
  <tr><td>Visitors</td><td>12,400</td></tr>
</table>

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

<table class="caption-top">
  <caption>Title above</caption> ...
</table>

<table class="caption-bottom">
  <caption>Note below</caption> ...
</table>

♿ Accessibility

• Always use a caption — Screen readers announce the caption to give context before reading cell data.
• Write descriptive text — Explain what the table shows, not just “Table 1.”
• Placement is visual — Moving the caption with CSS does not change reading order for assistive technology in most browsers; the caption remains associated with the table.
• Do not rely on color alone — Caption styling should remain readable with sufficient contrast.

💡 Best Practices