Tailwind CSS - Caption Side

Tailwind CSS - Caption Side

The caption-side utilities control the placement of a table’s <caption> element, allowing you to position it either above or below the table.

Accessibility First: The Importance of <caption>

Before styling, remember that the <caption> element has a crucial semantic purpose: it provides a title or summary for the table’s data. Screen readers use it to give context to visually impaired users. Always include a meaningful caption for your data tables. The caption-side utility is for visual presentation only.

Caption Side Classes

These utilities control the caption-side CSS property.

Class	CSS Properties
caption-top	caption-side: top;
caption-bottom	caption-side: bottom;

Example: Caption at the Top (Default and Recommended)

Using caption-top places the table caption above the table content. This is the standard and most intuitive placement for a table title.

<div class="p-8">
  <table class="w-full border-collapse border border-slate-400">
    <caption class="caption-top p-2 text-lg font-semibold text-left text-slate-700 bg-slate-100 dark:text-slate-200 dark:bg-slate-800">
      Q4 Regional Sales Figures
    </caption>
    <thead class="bg-slate-200 dark:bg-slate-700">
      <tr>
        <th class="border border-slate-300 dark:border-slate-600 p-2">Region</th>
        <th class="border border-slate-300 dark:border-slate-600 p-2">Sales (USD)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border border-slate-300 dark:border-slate-600 p-2">North America</td>
        <td class="border border-slate-300 dark:border-slate-600 p-2">$1,200,000</td>
      </tr>
      <tr>
        <td class="border border-slate-300 dark:border-slate-600 p-2">Europe</td>
        <td class="border border-slate-300 dark:border-slate-600 p-2">$950,000</td>
      </tr>
    </tbody>
  </table>
</div>

Example: Caption at the Bottom

The caption-bottom utility moves the caption below the table. This can be useful for adding footnotes, data sources, or explanatory notes that are secondary to the main table content.

<div class="p-8">
  <table class="w-full border-collapse border border-slate-400">
    <caption class="caption-bottom p-2 text-sm text-center text-slate-500 bg-slate-50 dark:text-slate-400 dark:bg-slate-800">
      Data as of EOD, December 31. All figures are preliminary.
    </caption>
    <thead class="bg-slate-200 dark:bg-slate-700">
      <tr>
        <th class="border border-slate-300 dark:border-slate-600 p-2">Region</th>
        <th class="border border-slate-300 dark:border-slate-600 p-2">Sales (USD)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border border-slate-300 dark:border-slate-600 p-2">North America</td>
        <td class="border border-slate-300 dark:border-slate-600 p-2">$1,200,000</td>
      </tr>
      <tr>
        <td class="border border-slate-300 dark:border-slate-600 p-2">Europe</td>
        <td class="border border-slate-300 dark:border-slate-600 p-2">$950,000</td>
      </tr>
    </tbody>
  </table>
</div>