AAtomic CSS

caption-side

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

클래스 목록

클래스CSS설명
cstcaption-side: top캡션을 테이블 위에 배치 (기본값)
csbcaption-side: bottom캡션을 테이블 아래에 배치

시각적 비교

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

caption-side: top — cst

사용자 목록 (위에 표시)
이름역할
홍길동관리자

caption-side: bottom — csb

사용자 목록 (아래에 표시)
이름역할
홍길동관리자

클래스별 상세

cstcaption-side: top

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

<!-- 캡션이 테이블 위에 표시 (기본값) -->
<table class="cst w100p bcc">
  <caption>월간 매출 현황</caption>
  <thead>
    <tr><th>월</th><th>매출</th></tr>
  </thead>
  <tbody>
    <tr><td>1월</td><td>1,200만원</td></tr>
    <tr><td>2월</td><td>1,500만원</td></tr>
  </tbody>
</table>

csbcaption-side: bottom

캡션을 테이블 아래에 배치합니다. 출처 표기, 부가 설명 등을 테이블 하단에 넣을 때 사용합니다.

<!-- 캡션이 테이블 아래에 표시 -->
<table class="csb w100p bcc">
  <caption>출처: 내부 데이터</caption>
  <thead>
    <tr><th>항목</th><th>수치</th></tr>
  </thead>
  <tbody>
    <tr><td>방문자</td><td>12,345</td></tr>
    <tr><td>전환율</td><td>3.2%</td></tr>
  </tbody>
</table>
table-layoutempty-cells