CSS를 활용하면 HTML 표(table)에 다양한 스타일을 적용할 수 있습니다. 테두리(border) 설정, 테두리 병합(collapse), 표의 너비와 높이 지정은 물론, 셀 안쪽 여백(padding)과 텍스트 정렬(text-align)까지 자유롭게 조절할 수 있습니다. 이번 글에서는 대표적인 표 스타일링 기법을 예제와 함께 하나씩 살펴보겠습니다.
1. 표에 테두리 추가하기 – border 속성
표에 테두리를 적용하려면 CSS의 border 속성을 사용합니다. table, th, td 요소에 각각 테두리 스타일을 지정하면 표 전체와 셀에 테두리가 나타납니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px dashed orange;
}
</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>
위 예제에서는 2px 두께의 주황색 점선(dashed) 테두리가 table, th, td 모든 요소에 적용됩니다. solid(실선), dotted(점선), double(이중선) 등 다양한 테두리 스타일을 시도해 보세요.
2. 표 테두리 병합하기 – border-collapse 속성
기본 상태에서는 셀마다 테두리가 개별적으로 그려져 이중 선처럼 보입니다. 이때 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를 적용하면 셀 사이의 중복된 테두리가 하나로 합쳐집니다. 반대로 기본값인 separate를 사용하면 셀 사이에 간격이 유지되며, border-spacing 속성으로 그 간격의 크기를 조절할 수 있습니다.
3. 셀 안쪽 여백과 텍스트 정렬 – padding, text-align
테두리와 내용 사이의 간격을 조절하려면 padding 속성을 사용하고, 셀 안의 텍스트를 정렬하려면 text-align 속성을 사용합니다. 아래 예제는 여기에 더해 table-layout: fixed와 width: 100%를 적용해 열 너비를 균등하게 배분한 표를 만듭니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid black;
background-color: blue;
color: white;
}
th, td {
border: 1px solid black;
padding: 20px;
text-align: center;
}
table#demo {
table-layout: fixed;
width: 100%;
}
</style>
</head>
<body>
<h2>팀 순위표</h2>
<table id="demo">
<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>
</table>
</body>
</html>
padding: 20px 덕분에 각 셀의 테두리와 텍스트 사이에 충분한 여백이 생겨 가독성이 크게 향상됩니다. 또한 text-align: center로 셀 내용이 가운데 정렬되고, table-layout: fixed로 모든 열의 너비가 동일하게 고정됩니다.
마무리
지금까지 CSS로 HTML 표를 스타일링하는 핵심 속성들을 살펴보았습니다. border로 테두리를 만들고, border-collapse로 테두리를 병합하며, padding과 text-align으로 셀 내부를 다듬으면 훨씬 전문적이고 읽기 편한 표를 완성할 수 있습니다. 여기에 배경색(background-color), 마우스 오버 효과(hover), 줄무늬 효과(nth-child) 등을 추가하면 더욱 세련된 표 디자인을 구현할 수 있습니다.