AAtomic CSS

caption-side

테이블 캡션(<caption>)의 위치를 테이블 위 또는 아래로 지정합니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
cstcaption-side: top캡션을 테이블 위에 배치 (기본값)
csbcaption-side: bottom캡션을 테이블 아래에 배치

시각적 비교

캡션이 테이블 위와 아래에 배치되는 차이를 비교합니다.

caption-side: top — cst

Users 목록 (위에 표시)
<tr> <th class="tal py8px px12px bg18181B bb1pxsolid27272A cA1A1AA fs12px">이름역할
홍길동관리자

caption-side: bottom — csb

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

클래스별 상세

cstcaption-side: top

기본값입니다. 캡션을 테이블 위에 배치합니다.

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