Tag caption-side

HTML tables often use <caption> tags to describe their content. By default, the caption appears above the table. But what if you want it below, or styled differently? The caption-side CSS property lets you control where the caption appears in relation to the table.

📌 What is caption-side?

The caption-side property specifies where to display a table’s caption: either above or below the table. It can also accept values like left or right in some browser engines (mainly for paged media or printing).

🧬 Syntax

table {
  caption-side: top | bottom | block-start | block-end | inherit;
}

Common values:

ValueDescription
top(default) Places the caption above the table
bottomPlaces the caption below the table
block-startLogical equivalent of top (depends on writing direction)
block-endLogical equivalent of bottom
inheritInherits value from the parent element

🎯 Examples

1. Placing the caption below the table

<table style="caption-side: bottom;">
  <caption>Monthly Sales Data</caption>
  <tr>
    <th>Month</th><th>Sales</th>
  </tr>
  <tr>
    <td>January</td><td>$1,000</td>
  </tr>
</table>

The caption will appear under the table.

2. Styling the caption with custom CSS

caption {
  caption-side: bottom;
  font-style: italic;
  color: #666;
}

Gives the caption a subtle style and places it under the table.

🔍 How It Works

  • The caption-side property only affects the <caption> tag inside a <table>.
  • It does not move the caption outside of the table’s box — just visually above or below.
  • The direction (top vs. bottom) impacts the reading order and layout flow.
  • Logical values like block-start and block-end support internationalization (e.g., RTL or vertical scripts).

🛠️ Tips & Best Practices

  • Use caption-side: bottom when the caption acts more like a footnote or source.
  • Combine with text-align, font-style, or padding to improve appearance.
  • Keep captions concise and meaningful to improve accessibility.
  • Only one <caption> is allowed per <table> in HTML.

✅ Browser Support

caption-side is widely supported in all major browsers:

  • ✅ Chrome
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge
  • ✅ Internet Explorer 8+

Note: block-start and block-end are supported in newer browsers that handle logical properties.

🔚 Conclusion

The CSS caption-side property gives you clean, semantic control over where table captions appear, making your data more accessible and your layout more flexible.