HTML DOM borderSpacing 속성 – 테이블 셀 간격 설정 방법과 예제

HTML DOM의 borderSpacing 속성은 테이블 셀 사이의 간격을 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트를 통해 테이블의 셀 간격을 동적으로 조절할 수 있습니다.

문법(Syntax)

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

object.style.borderSpacing = "length length|initial|inherit"

속성 값 설명

값	설명
length length	셀 사이의 간격을 지정합니다. 값을 하나만 입력하면 가로와 세로 간격에 모두 적용되며, 두 개의 값을 입력하면 첫 번째 값은 가로 간격, 두 번째 값은 세로 간격에 적용됩니다. 기본값은 0입니다.
initial	해당 속성을 초기값으로 설정합니다.
inherit	부모 요소의 속성 값을 상속받습니다.

예제 코드

다음은 버튼을 클릭하면 테이블의 셀 간격이 넓어지는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      display: flex;
      float: left;
   }
   table {
      border: 3px solid black;
   }
   td {
      border: 3px solid lightgreen;
   }
   th {
      border: 3px solid lightblue;
   }
</style>
<script>
   function IncreaseBorderSpacing(){
      document.getElementById("t1").style.borderSpacing="10px 10px";
      document.getElementById("Sample").innerHTML="테이블 셀 간격이 넓어졌습니다.";
   }
</script>
</head>
<body>
   <table id="t1">
      <tr>
         <th>FRUITS</th>
         <th>PRICE</th>
      </tr>
      <tr>
         <td>MANGO</td>
         <td>40</td>
      </tr>
      <tr>
         <td>APPLE</td>
         <td>50</td>
      </tr>
   </table>
<p>아래 버튼을 클릭하면 위 테이블의 셀 간격이 넓어집니다.</p>
<button onclick="IncreaseBorderSpacing()">셀 간격 늘리기</button>
<p id="Sample"></p>
</body>
</html>

실행 결과

페이지를 처음 열면 다음과 같이 기본 간격의 테이블이 표시됩니다.

HTML DOM borderSpacing 속성 – 테이블 셀 간격 설정 방법과 예제

“셀 간격 늘리기” 버튼을 클릭하면 아래와 같이 셀 사이의 간격이 10px씩 벌어지는 것을 확인할 수 있습니다.

HTML DOM borderSpacing 속성 – 테이블 셀 간격 설정 방법과 예제

이처럼 borderSpacing 속성을 사용하면 CSS를 직접 수정하지 않고도 자바스크립트만으로 테이블 셀 간격을 손쉽게 제어할 수 있습니다. 특히 사용자 인터랙션에 따라 테이블 레이아웃을 동적으로 변경해야 하는 경우 유용하게 활용할 수 있습니다.