HTML DOM captionSide 속성 완벽 정리 – 표 캡션 위치(top/bottom) 설정 방법

HTML DOM captionSide 속성이란?

HTML DOM의 captionSide 속성은 표(<table>)에 포함된 캡션(<caption>)의 위치를 가져오거나 설정하는 데 사용됩니다. 캡션 위치는 수직 방향인 위(top)와 아래(bottom) 두 곳으로만 지정할 수 있으며, 좌우 위치는 지원하지 않습니다.

문법(Syntax)

captionSide 속성을 설정하는 기본 문법은 다음과 같습니다.

object.style.captionSide = "top|bottom|initial|inherit"

속성 값 설명

값	설명
top	표 캡션을 표 위쪽에 배치합니다. 기본(default) 값입니다.
bottom	표 캡션을 표 아래쪽에 배치합니다.
initial	해당 속성을 브라우저의 기본 초기값으로 되돌립니다.
inherit	부모 요소의 속성 값을 상속받습니다.

captionSide 속성 활용 예제

다음 예제는 버튼을 클릭하면 자바스크립트를 통해 표 캡션의 위치를 아래(bottom)에서 위(top)로 변경하는 코드입니다. CSS에서는 #t1 선택자로 caption-side: bottom;을 적용해 두었으며, 버튼 클릭 시 style.captionSide 값을 "top"으로 바꿔 결과를 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #t1{
        caption-side: bottom;
        border: 2px dashed black;
    }
    td {
        border: 2px solid blue;
    }
    caption {
        font-size: 24px;
        font-weight: bold;
    }
</style>
<script>
    function changeCaptionPosition(){
        document.getElementById("t1").style.captionSide="top";
        document.getElementById("Sample").innerHTML="캡션 위치가 위(top)로 변경되었습니다.";
    }
</script>
</head>
<body>
   <table id="t1">
       <caption>Demo Caption</caption>
       <tr>
           <th>demo head</th>
           <th>demo head</th>
       </tr>
       <tr>
           <td>there goes my data..</td>
           <td>there goes my..</td>
       </tr>
       <tr>
           <td>there goes my data..</td>
           <td>there goes my..</td>
       </tr>
   </table>
    <p>아래 버튼을 클릭하여 표 캡션의 위치를 변경해 보세요.</p>
    <button onclick="changeCaptionPosition()">캡션 위치 변경</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과(Output)

페이지가 처음 로드되면 CSS 설정에 따라 캡션이 표 아래쪽(bottom)에 표시됩니다.

HTML DOM captionSide 속성 완벽 정리 – 표 캡션 위치(top/bottom) 설정 방법

"캡션 위치 변경(Change Caption Position)" 버튼을 클릭하면 자바스크립트가 실행되어 캡션이 표 위쪽(top)으로 이동하고, 그 결과 메시지가 함께 출력됩니다.

HTML DOM captionSide 속성 완벽 정리 – 표 캡션 위치(top/bottom) 설정 방법

참고 사항

captionSide 속성은 CSS의 caption-side 속성과 동일하게 동작하며, 자바스크립트로 캡션 위치를 동적으로 제어할 때 유용합니다.
Chrome, Firefox, Safari, Edge 등 주요 브라우저에서 모두 원활하게 지원됩니다.
캡션 위치는 반드시 상하(top/bottom)로만 조절할 수 있으므로, 표 디자인 시 캡션의 가독성을 고려해 배치하는 것이 좋습니다.