HTML DOM의 borderCollapse 속성은 <table> 요소의 테두리를 인접 셀끼리 공유(병합)할지, 아니면 각 셀이 독립적인 테두리를 갖도록(분리) 할지 설정하거나 현재 값을 반환하는 데 사용됩니다. 이 속성은 separate와 collapse 두 가지 주요 값을 가질 수 있습니다.
문법(Syntax)
borderCollapse 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderCollapse = "separate|collapse|initial|inherit";
속성 값(Value)
borderCollapse 속성에 사용할 수 있는 값은 아래와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | separate 기본값으로, 각 테이블 셀이 서로 분리된 개별 테두리를 갖습니다. |
| 2 | collapse 인접한 셀 사이에 테두리가 중복되어 그려지지 않도록 테두리를 하나로 병합합니다. |
| 3 | initial 해당 속성을 브라우저의 기본 초기값으로 설정합니다. |
| 4 | inherit 부모 요소의 속성 값을 상속받아 사용합니다. |
예제(Example)
다음은 borderCollapse 속성을 활용한 실제 예제 코드입니다. 버튼을 클릭하면 자바스크립트 함수가 실행되어 테이블의 테두리가 병합됩니다.
<!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 collapseBorder(){
document.getElementById("t1").style.borderCollapse="collapse";
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="collapseBorder()">COLLAPSE BORDER</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 초기 상태에서는 각 셀이 분리된 테두리를 가진 테이블이 화면에 출력됩니다.
COLLAPSE BORDER 버튼을 클릭하면 borderCollapse 값이 collapse로 변경되어 셀 사이의 테두리가 하나로 합쳐진 것을 확인할 수 있습니다.
정리
borderCollapse 속성은 테이블 디자인에서 시각적으로 깔끔한 레이아웃을 만들 때 유용하게 활용됩니다. 특히 데이터 테이블에서 이중 테두리 현상을 없애고 싶다면 collapse 값을 사용하고, 각 셀을 명확히 구분하고 싶다면 기본값인 separate를 유지하면 됩니다.