HTML 테이블을 스타일링할 때 border-collapse 속성은 셀 테두리가 서로 어떻게 표시될지를 결정하는 핵심 요소입니다. 이 속성은 크게 collapse(병합)와 separate(분리) 두 가지 값을 가지며, 각각 테이블의 외관을 완전히 다르게 만듭니다.
collapse와 separate의 차이점
separate 값은 각 셀의 테두리를 독립적으로 유지합니다. 즉, 인접한 셀 사이에 간격이 생기고, 각 셀이 자신만의 테두리를 가지게 됩니다. 반면 collapse 값은 인접한 셀들의 테두리를 하나로 병합하여 깔끔하고 일체감 있는 테두리 선을 만들어 줍니다.
아래 이미지는 두 값의 시각적인 차이를 잘 보여줍니다. border-collapse 속성의 separate 값은 셀들의 테두리를 서로 분리된 상태로 표시합니다.
예제 코드
아래 코드를 직접 실행해 보면 separate 값과 collapse 값의 차이를 명확하게 확인할 수 있습니다.
<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>
코드 설명
위 예제에서는 두 개의 테이블을 사용하여 차이를 비교합니다.
- table.one:
border-collapse: collapse;가 적용되어 셀 테두리가 서로 병합됩니다. 점선(dotted) 테두리와 실선(solid) 테두리가 만나는 지점에서 한쪽 스타일이 우선 적용됩니다. - table.two:
border-collapse: separate;가 적용되어 각 셀의 테두리가 개별적으로 표시되며, 셀 사이에 빈 공간이 나타납니다.
추가로, separate 값을 사용할 때는 border-spacing 속성으로 셀 사이의 간격을 조절할 수 있다는 점도 기억해 두면 좋습니다. 일반적으로 데이터 테이블을 깔끔하게 표현하려면 collapse 값이 더 많이 사용됩니다.