HTML 테이블에서 접힌 테두리(collapsed border)를 만들려면 CSS의 border-collapse 속성을 사용하면 됩니다. 이 속성은 테이블 셀 사이의 테두리가 어떻게 표시될지를 결정하며, 다음과 같은 값을 가질 수 있습니다.
| 속성 값 | 설명 |
|---|---|
| separate | 테두리가 분리되어 각 셀마다 독립적인 테두리가 표시됩니다. 기본값입니다. |
| collapse | 인접한 셀들의 테두리가 하나로 병합되어 단일 테두리로 표시됩니다. |
아래 예시를 통해 두 속성 값의 차이를 직접 확인해 보세요.
예제 1: border-collapse: collapse 적용하기
다음 코드는 collapse 속성 값을 사용하여 인접한 셀의 테두리를 하나로 합친 접힌 테두리를 만드는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {border-collapse: collapse; }
table, td, th { border: 1px solid blue; }
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>위 코드를 실행하면 셀과 셀 사이의 테두리가 겹쳐져 깔끔한 단일 선으로 표시되는 것을 확인할 수 있습니다.
예제 2: border-collapse: separate 적용하기
다음 코드는 separate 속성 값을 사용하여 각 셀의 테두리를 분리해서 표시하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: separate; }
table, td, th { border: 1px solid blue; }
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>separate 값을 사용하면 각 셀이 서로 분리된 상태로 테두리가 그려지며, border-spacing 속성을 함께 사용하면 셀 사이의 간격도 조절할 수 있습니다.
정리
테이블 디자인 시 대부분의 경우 border-collapse: collapse;를 사용해 테두리를 하나로 합치는 것이 더 깔끔하고 전문적인 모양을 만듭니다. 반면에 셀 사이에 여백이 필요한 특수한 레이아웃에서는 separate 값을 활용하면 됩니다.