CSS의 border-collapse 속성은 <table> 요소의 테두리를 인접 셀끼리 공유할지, 아니면 각각 분리해서 표시할지를 지정하는 속성입니다. 이 속성은 separate(분리)와 collapse(축소) 두 가지 값을 가질 수 있습니다.
기본 문법
CSS border-collapse 속성의 기본 문법은 다음과 같습니다.
Selector {
border-collapse: /*값*/
}아래 예제들을 통해 border-collapse 속성의 실제 동작을 확인해 보겠습니다.
예제 1: collapse와 separate 비교
<!DOCTYPE html>
<html>
<head>
<style>
#cdemo {
border-collapse: collapse;
}
#sdemo {
border-collapse: separate;
}
table {
display: inline-table;
margin: 30px;
}
th,td {
border: 3px ridge orange;
}
td {
border-color: red;
}
caption {
box-shadow: 0px -5px 4px 3px green;
}
</style>
</head>
<body>
<h2>직원 기록</h2>
<table id="sdemo">
<caption> 직원 정보 (분리된 테두리) </caption>
<tr>
<th>직원</th>
<th>부서</th>
</tr>
<tr>
<td>Tim</td>
<td>운영팀</td>
</tr>
<tr>
<td>Nathan</td>
<td>재무팀</td>
</tr>
<tr>
<td>John </td>
<td>마케팅팀</td>
</tr>
</table>
<table id="cdemo">
<caption> 직원 정보 (축소된 테두리) </caption>
<tr>
<th>직원</th>
<th>부서</th>
</tr>
<tr>
<td>Tim</td>
<td>운영팀</td>
</tr>
<tr>
<td>Nathan</td>
<td>재무팀</td>
</tr>
<tr>
<td>John </td>
<td>마케팅팀</td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
separate 값이 적용된 첫 번째 테이블은 각 셀의 테두리가 서로 떨어져 있어 이중 선처럼 보이는 반면, collapse 값이 적용된 두 번째 테이블은 인접한 테두리가 하나로 합쳐져 깔끔하고 얇은 선으로 표시됩니다.
예제 2: empty-cells 속성과 함께 사용하기
border-collapse는 empty-cells 속성과 함께 사용하면 빈 셀의 표시 여부까지 제어할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
empty-cells: hide;
display: inline-table;
margin: 30px;
}
table+table {
border-collapse: collapse;
empty-cells: hide;
}
td {
border: 3px ridge lightblue;
}
caption {
box-shadow: 0px -5px 4px 3px grey;
}
</style>
</head>
<body>
<h2>데모 테이블</h2>
<table>
<caption>데모 캡션</caption>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
<table>
<caption>데모 캡션</caption>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
정리
- separate: 기본값으로, 각 셀의 테두리가 독립적으로 유지되며 셀 사이에 간격이 생깁니다. 이 경우
border-spacing과empty-cells속성을 함께 사용할 수 있습니다. - collapse: 인접한 셀들의 테두리가 하나로 병합되어 단일 선으로 표시됩니다. 대부분의 데이터 테이블에서 더 깔끔한 모양을 만들 때 활용됩니다.
테이블 디자인 시 원하는 스타일에 따라 두 값을 적절히 선택하여 사용하면 됩니다.