📑 CSS Tutorial: caption-side

📌 Introduction

The caption-side property in CSS controls the placement of a table’s caption.
A caption is defined using the HTML <caption> element, and this property helps you position it either above or below the table. It is especially useful when creating clean, accessible, data-heavy layouts. 📊✨

🎯 What Does caption-side Do?

  • Controls whether a table caption appears at the top or bottom
  • Enhances table readability
  • Helpful for reporting dashboards, invoices, and charts
  • Useful in both HTML tables and display-table layouts

✨ Syntax

Syntax

table {
  caption-side: top | bottom;
}

🧩 Accepted Values

1. top (default)

Places the caption above the table.

Code Snippet

caption-side: top;

2. bottom

Places the caption below the table.

Code Snippet

caption-side: bottom;

🔥 Practical Examples

1. Caption at the Top

Top Caption

<table>
  <caption>Monthly Sales Report</caption>
  <tr><th>Month</th><th>Sales</th></tr>
  <tr><td>Jan</td><td>$15,000</td></tr>
</table>

2. Caption at the Bottom

CSS + HTML

table {
  caption-side: bottom;
}

/* HTML */
<table>
  <caption>Employee Directory</caption>
  <tr><th>Name</th><th>Dept</th></tr>
  <tr><td>Asha</td><td>HR</td></tr>
</table>

3. Using caption-side for styling reports

Styled Caption

caption {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px;
  text-align: left;
}

table {
  caption-side: top;
}

📊 Browser Support

caption-side is well-supported across all major browsers including Chrome, Firefox, Safari, and Edge.

🧠 Tips & Best Practices

  • Use captions for accessibility — they help screen readers understand table context
  • Place captions at the top for readability unless there's a stylistic reason otherwise
  • Combine with text-align and padding for cleaner presentation
>>“A clear caption makes your data easier to understand — small detail, big impact.” 📊✨

🎉 Conclusion

The caption-side property is simple but extremely helpful for improving the clarity and presentation of tables. Whether you’re building dashboards, data tables, or reports, controlling caption placement helps your UI look structured and professional. 🚀