AAtomic CSS

caption-side

Positions table caption (<caption>) above or below the table.

Class List

ClassCSSDescription
cstcaption-side: topCaption above table (default)
csbcaption-side: bottomCaption below table

Visual Comparison

Compares caption above vs below the table.

caption-side: top — cst

Users list (shown on top)
NameRole
John DoeAdmin

caption-side: bottom — csb

Users list (shown on bottom)
NameRole
John DoeAdmin

Class Details

cstcaption-side: top

Default. Caption above the table.

<!-- Caption displayed above table (default) -->
<table class="cst w100p bcc">
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr><th>Month</th><th>Revenue</th></tr>
  </thead>
  <tbody>
    <tr><td>1Month</td><td>12M</td></tr>
    <tr><td>2Month</td><td>15M</td></tr>
  </tbody>
</table>

csbcaption-side: bottom

Caption below the table. For source citations, supplementary notes.

<!-- Caption displayed below table -->
<table class="csb w100p bcc">
  <caption>Source: Internal data</caption>
  <thead>
    <tr><th>Item</th><th>Figures</th></tr>
  </thead>
  <tbody>
    <tr><td>Visitors</td><td>12,345</td></tr>
    <tr><td>Conversion rate</td><td>3.2%</td></tr>
  </tbody>
</table>
table-layoutempty-cellstable-list