Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 테이블 캡션 위치를 설정하는 방법

HTML 테이블에서 캡션(caption)의 위치를 설정하려면 JavaScript의 captionSide 속성을 사용하면 됩니다. 이 속성을 활용하면 캡션을 테이블의 위쪽(top)이나 아래쪽(bottom) 등 원하는 위치에 자유롭게 배치할 수 있습니다.

아래 예제 코드를 실행해 보면 버튼 클릭 시 테이블 캡션의 위치가 아래쪽으로 변경되는 것을 확인할 수 있습니다.

예제

<!DOCTYPE html>
<html>
   <body>
      <table id = "newTable" border = "2">
         <caption id = "newCaption">직원 정보</caption>
         <tr>
            <th>사원번호</th>
            <th>이름</th>
            <th>부서</th>
         </tr>
         
         <tr>
            <td>001</td>
            <td>Amit</td>
            <td>IT</td>
         </tr>
         
         <tr>
            <td>002</td>
            <td>John</td>
            <td>Finance</td>
         </tr>
         
         <tr>
            <td>003</td>
            <td>David</td>
            <td>Marketing</td>
         </tr>
      </table>
      <br>
      
      <button onclick = "display()">캡션 위치 변경하기</button>
      
      <script>
         function display() {
            document.getElementById("newCaption").style.captionSide = "bottom";
         }
      </script>
      
   </body>
</html>

참고 사항

captionSide 속성에는 "top", "bottom", "left", "right" 등의 값을 지정할 수 있으며, 기본값은 "top"입니다. 브라우저에 따라 left와 right 값은 지원되지 않을 수 있으므로, 호환성을 고려한다면 top과 bottom 값을 사용하는 것이 안전합니다.