JavaScript를 사용해 테이블의 셀 사이 간격을 조절하려면 borderSpacing 속성을 활용하면 됩니다. 이 속성은 CSS의 border-spacing과 동일한 역할을 하며, 셀과 셀 사이의 여백을 픽셀(px) 단위로 지정할 수 있습니다.
borderSpacing 속성이란?
borderSpacing은 DOM 요소의 style 객체에서 제공하는 속성으로, 테이블 내 인접한 셀들 사이의 거리를 설정합니다. 버튼 클릭과 같은 사용자 이벤트에 반응하여 동적으로 간격을 변경할 때 특히 유용합니다.
예제 코드
아래 예제는 직원 정보가 담긴 테이블을 만들고, 버튼을 클릭하면 셀 사이 간격이 15px로 늘어나도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<body>
<table id="newTable" border="2">
<tr>
<th>사원ID</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("newTable").style.borderSpacing = "15px";
}
</script>
</body>
</html>코드 설명
위 코드의 핵심 부분은 다음 한 줄입니다.
document.getElementById("newTable").style.borderSpacing = "15px";동작 방식을 단계별로 살펴보면 다음과 같습니다.
1. getElementById("newTable"): id가 newTable인 테이블 요소를 가져옵니다.
2. .style: 해당 요소의 인라인 스타일 객체에 접근합니다.
3. borderSpacing = "15px": 셀 사이 간격을 15픽셀로 설정합니다.
참고 사항
borderSpacing 속성은 가로와 세로 간격을 각각 다르게 지정할 수도 있습니다. 예를 들어 "10px 20px"처럼 두 값을 공백으로 구분해 입력하면 첫 번째 값은 가로 간격, 두 번째 값은 세로 간격에 적용됩니다. 또한 이 속성이 정상적으로 동작하려면 테이블의 border-collapse 값이 separate(기본값)여야 합니다. collapse 상태에서는 셀 간격이 적용되지 않으니 주의하세요.