CSS의 border-collapse 속성은 서로 맞닿아 있는 인접 셀의 테두리를 브라우저가 하나로 합쳐서 처리할지, 아니면 각 셀이 자신의 테두리 스타일을 그대로 유지할지를 결정합니다.
border-collapse의 주요 값
collapse: 인접한 셀들의 테두리가 겹치는 부분을 하나로 병합하여 깔끔하고 일관된 테두리 선을 만듭니다. 대부분의 데이터 테이블에서 권장되는 방식입니다.
separate: 각 셀이 독립적인 테두리를 유지합니다. 이 경우 border-spacing 속성으로 셀 사이의 간격을 조절할 수 있으며, 이 값이 기본값(default)입니다.
예제 코드
다음 코드를 실행하면 collapse와 separate 두 값의 차이를 직접 확인할 수 있습니다.
<html>
<head>
<style>
table.one {
border-collapse:collapse;
}
table.two {
border-collapse:separate;
}
td.a {
border-style:dotted;
border-width:2px;
border-color:#000000;
padding: 20px;
}
td.b {
border-style:solid;
border-width:2px;
border-color:#333333;
padding:20px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Border Collapse</caption>
<tr><td class = "a"> India</td></tr>
<tr><td class = "b"> Australia</td></tr>
</table>
<br />
<table class = "two">
<caption>Border Separate</caption>
<tr><td class = "a"> India</td></tr>
<tr><td class = "b"> Australia</td></tr>
</table>
</body>
</html>실행 결과 해설
위 예제에서는 두 개의 테이블을 만들어 비교합니다. 첫 번째 테이블(class="one")에는 border-collapse: collapse;가 적용되어 점선(dotted)과 실선(solid) 테두리가 서로 맞닿는 지점에서 하나로 합쳐집니다.
반면 두 번째 테이블(class="two")에는 border-collapse: separate;가 적용되어 각 셀이 자신만의 테두리를 독립적으로 유지하며, 셀 사이에 약간의 간격이 생기는 것을 확인할 수 있습니다.
활용 팁
표 형태의 데이터를 깔끔하게 보여주고 싶다면 collapse 값을 사용하는 것이 좋습니다. 반대로 각 셀을 카드처럼 개별적인 요소로 강조하고 싶다면 separate 값과 함께 border-spacing 속성을 조합해 보세요.