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 목록 (위에 표시)
<tr> <th class="tal py8px px12px bg18181B bb1pxsolid27272A cA1A1AA fs12px">NameRole
홍길동관리자

caption-side: bottom — csb

Users 목록 (아래에 표시)
<tr> <th class="tal py8px px12px bg18181B bb1pxsolid27272A cA1A1AA fs12px">NameRole
홍길동관리자

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-cells