CSS / Reference / caption-side

caption-side는 표의 caption이 표 위쪽 또는 아래쪽에 배치되도록 지정합니다. caption은 표의 제목이나 설명을 담는 요소이며, 이 속성은 글자 정렬이나 셀의 순서를 바꾸는 기능이 아닙니다.

문법과 주요 값

table { caption-side: bottom; }
caption { text-align: start; padding-block: 0.5em; }

값의 적용 범위와 문법은 MDN의 caption-side 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 caption-side-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>caption-side 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
table { border-collapse: collapse; }
td { border: 1px solid #006c9c; padding: 10px; }
caption { padding: 8px; font-weight: bold; }
.target { caption-side: bottom; }
.reference { caption-side: top; }
</style>
</head>
<body>
<main id="demo">
<h1>caption-side 적용 비교</h1>
<section class="samples"><table class="target"><caption>월별 판매 수량</caption><tbody><tr><td>내용</td><td></td></tr><tr><td>두 번째</td><td>값</td></tr></tbody></table><table class="reference"><caption>월별 판매 수량</caption><tbody><tr><td>내용</td><td></td></tr><tr><td>두 번째</td><td>값</td></tr></tbody></table></section>
</main>
</body>
</html>

같은 caption이 첫 표 아래와 두 번째 표 위에 표시됩니다. 소스에서 caption을 표 뒤로 옮겨야 하는 것은 아닙니다.

표 구조를 유지하기

caption은 table의 직접 자식으로 사용하고 표의 내용을 구체적으로 설명합니다. 아래에 표시하려고 caption을 table 밖의 일반 문단으로 바꾸면 표 제목으로서의 연결이 약해질 수 있습니다. 화면 위치와 HTML의 의미를 분리해 생각하세요.

캡션 너비와 쓰기 방향

긴 caption은 표 너비와 주변 레이아웃에 따라 감싸질 수 있습니다. 위·아래라는 표현은 일반적인 가로쓰기 문서의 모습이며 세로쓰기 등에서는 실제 배치 방향을 확인해야 합니다. 캡션과 표 사이 공간은 padding이나 적절한 여백으로 조절합니다.

적용되지 않거나 예상과 다를 때

• 캡션이 일반 div나 p가 아닌 caption 요소인지 확인합니다.
• caption 자체에 다른 caption-side 규칙이 적용되어 table에서 받은 값을 덮어쓰는지 확인합니다.