CSS / Reference / caption-side

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

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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, th { 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><th scope="col">월</th><th scope="col">수량</th></tr><tr><th scope="row">1월</th><td>12개</td></tr><tr><th scope="row">2월</th><td>18개</td></tr></tbody></table><table class="reference"><caption>월별 판매 수량</caption><tbody><tr><th scope="col">월</th><th scope="col">수량</th></tr><tr><th scope="row">1월</th><td>12개</td></tr><tr><th scope="row">2월</th><td>18개</td></tr></tbody></table></section>
</main>
</body>
</html>

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

표 구조를 유지하기

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

캡션 너비와 쓰기 방향

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

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. caption은 table의 첫 요소 자식으로 유지한 채 caption-side만 top/bottom으로 바꿉니다. 표 제목과 월별 수량 데이터가 함께 읽히는지 확인합니다.
2. 긴 캡션을 넣어 너비에 따라 감싸지는지 보고 text-align만 start/center로 비교합니다. 표시 위치와 캡션 안의 글자 정렬을 구분한 뒤 복구합니다.

관련 조건은 HTML caption 요소의 위치 규칙에서 확인할 수 있습니다.

표 전체의 너비와 셀 크기를 함께 조정하려면 표와 셀의 크기 조절하기를 참고하세요.

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

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