CSS를 활용하면 HTML 표(<table>)의 테두리, 여백, 셀 배치 등 다양한 스타일을 자유롭게 정의할 수 있습니다. 표를 꾸밀 때 자주 사용되는 대표적인 CSS 속성은 다음과 같습니다.
표 스타일링에 사용되는 주요 CSS 속성
- border
테두리 관련 속성으로,border-width(굵기),border-style(스타일),border-color(색상)를 한 번에 지정할 수 있습니다. - border-collapse
표의 셀들이 테두리를 공유할지(병합) 아니면 각각 분리된 테두리를 가질지 지정합니다. 값은collapse또는separate입니다. - caption-side
표 제목(caption) 박스를 표의 위쪽 또는 아래쪽 등 세로 방향 위치에 배치합니다. - empty-cells
내용이 없는 빈 셀의 테두리와 배경을 표시할지 여부를 결정합니다. - table-layout
브라우저가 표의 행, 열, 셀을 배치할 때 사용할 레이아웃 알고리즘(자동 또는 고정)을 정의합니다.
예제 1: 기본 표 스타일 적용하기
다음 예제는 표 전체에 테두리와 패딩, 이탤릭체를 적용하고, 캡션을 하단에 배치하며, 빈 셀에 그림자 효과를 추가하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
border: thin solid;
padding: 5px;
font-style: italic;
}
caption {
caption-side: bottom;
}
td {
box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 모든 셀에 얇은 실선 테두리가 적용되고, 캡션이 표 아래쪽에 나타나며, 초록빛 내부 그림자 효과가 있는 표가 출력됩니다.
예제 2: border-collapse로 테두리 병합하기
아래 예제는 두 개의 표를 나란히 배치하고, 한쪽 표에는 border-collapse: collapse를 적용해 인접 셀의 테두리가 겹쳐지도록 처리한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
table {
border: 3px solid black;
}
td {
border: 3px solid lightgreen;
}
th {
border: 3px solid lightblue;
}
#t2 {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Team Rankings</h2>
<div>
<table id="t1">
<tr>
<th>Team (Test)</th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>
</div>
<div>
<table id="t2">
<tr>
<th>Team (ODI) </th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>실행 결과
왼쪽 표는 셀마다 분리된 테두리가 유지되는 반면, 오른쪽 표는 border-collapse 속성 덕분에 셀 사이의 테두리가 하나로 병합되어 더 깔끔하고 좁은 형태로 출력됩니다.
마무리
border, border-collapse, caption-side, empty-cells, table-layout 속성만 잘 활용해도 HTML 표를 훨씬 보기 좋고 구조적으로 다듬을 수 있습니다. 실제 프로젝트에서는 이러한 속성들을 조합하여 데이터 테이블의 가독성과 디자인을 동시에 개선해 보세요.