HTML 테이블에서 인접한 셀들의 테두리를 하나로 합치고 싶다면 borderCollapse 속성을 사용하면 됩니다. 이 속성은 DOM 스타일 객체의 일부로, 값을 collapse로 설정하면 겹치는 테두리가 단일 테두리로 병합되어 훨씬 깔끔한 표를 만들 수 있습니다.
borderCollapse 속성의 주요 값
- collapse: 인접 셀의 테두리를 하나로 합칩니다.
- separate(기본값): 각 셀이 자신만의 독립적인 테두리를 가집니다.
아래 예제는 버튼을 클릭하면 JavaScript로 테이블 테두리를 축소(collapse)하는 코드입니다. 직접 실행해 보세요.
예제 코드
<!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.borderCollapse = "collapse";
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 호출됩니다. 이 함수 내부에서 document.getElementById()로 테이블 요소를 가져온 뒤, style.borderCollapse에 "collapse" 값을 할당하여 테두리가 즉시 병합됩니다. 결과적으로 각 셀 사이의 이중 테두리가 사라지고 단일 테두리로 표시됩니다.
참고로 CSS에서도 동일한 효과를 얻으려면 table { border-collapse: collapse; }처럼 스타일시트에 선언하면 되며, JavaScript를 사용하면 사용자의 상호작용에 따라 동적으로 테두리 스타일을 변경할 수 있다는 장점이 있습니다.