HTML 테이블을 스타일링할 때 각 셀의 테두리가 이중으로 보이는 경우가 많습니다. 이럴 때 CSS의 border-collapse 속성을 사용하면 인접한 셀들의 테두리를 하나로 합쳐 깔끔하고 전문적인 모양의 테이블을 만들 수 있습니다.
border-collapse 속성이란?
border-collapse 속성은 테이블 셀 사이의 테두리가 어떻게 표시될지 결정합니다. 주요 값은 다음과 같습니다.
- collapse: 인접한 셀의 테두리가 서로 겹쳐져 하나의 테두리로 표시됩니다.
- separate(기본값): 각 셀이 자신만의 독립된 테두리를 가지며, 셀 사이에 간격이 생깁니다.
그럼 실제 예제를 통해 테이블 테두리를 합치는 방법을 살펴보겠습니다.
예제 1: border-collapse 적용하기
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
background-color: black;
color: white;
}
th, td {
border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>팀 순위표</h2>
<table>
<tr>
<th>팀</th>
<th>순위</th>
<th>점수</th>
</tr>
<tr>
<td>인도</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>잉글랜드</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>호주</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>뉴질랜드</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>남아프리카공화국</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>서인도제도</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>파키스탄</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 노란색 점선 테두리가 셀 사이에서 겹쳐지지 않고 하나의 선으로 연결되어 표시됩니다. border-collapse: collapse; 덕분에 인접 셀의 테두리가 자동으로 병합된 것입니다.
예제 2: 셀 테두리 없이 배경색만 사용하는 경우
다음 예제는 테두리 없이 배경색과 글자색만 지정한 경우입니다. 이 경우에도 border-collapse는 레이아웃 방식에 영향을 줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>팀 순위표</h2>
<table>
<tr>
<th>팀</th>
<th>순위</th>
<th>점수</th>
</tr>
<tr>
<td>인도</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>잉글랜드</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>호주</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>뉴질랜드</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>남아프리카공화국</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>서인도제도</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>파키스탄</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>실행 결과
셀 테두리가 없기 때문에 검정 배경 위에 흰색 글자로 된 단일 블록 형태의 테이블이 출력됩니다.
정리
CSS에서 테이블 테두리를 합치려면 table 요소에 border-collapse: collapse;를 선언하면 됩니다. 기본값인 separate와 달리 collapse는 인접 셀의 테두리를 공유하여 이중 선이 생기지 않으므로, 데이터 테이블을 디자인할 때 거의 필수적으로 사용되는 속성입니다. 여기에 th, td 요소에 원하는 border 스타일을 함께 지정하면 더욱 완성도 높은 테이블을 만들 수 있습니다.