CSS에서 표(table)에 테두리를 추가하려면 border 속성을 사용합니다. border 속성은 표 전체뿐 아니라 개별 셀(th, td)에도 적용할 수 있어, 원하는 디자인에 맞게 유연하게 활용할 수 있습니다.
border 속성의 기본 구조
border 속성은 아래 세 가지 값을 한 번에 지정할 수 있습니다.
- 테두리 두께(border-width): 예) 2px, 5px
- 테두리 스타일(border-style): 예) dashed(점선), solid(실선), dotted(점선)
- 테두리 색상(border-color): 예) orange, green
예제 1: 표 전체에 동일한 테두리 적용
table, th, td 요소에 같은 border 값을 지정하면 표 외곽선과 모든 셀에 동일한 스타일의 테두리가 적용됩니다. 아래 예제에서는 주황색 점선(dashed) 테두리를 사용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px dashed orange;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>출력 결과
예제 2: 표와 셀에 서로 다른 테두리 적용
table 요소와 th, td 요소에 각각 다른 border 값을 지정하면 표 외곽선과 내부 셀의 테두리를 다르게 꾸밀 수 있습니다. 아래 예제에서는 표 외곽에는 굵은 주황색 점선을, 각 셀에는 가는 초록색 점선을 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 5px dashed orange;
}
th, td {
border: 1px dashed green;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>출력 결과
참고: border-collapse로 더 깔끔한 표 만들기
기본 상태에서는 인접한 셀들의 테두리가 서로 분리되어 이중 선처럼 보일 수 있습니다. 이럴 때 table 요소에 border-collapse: collapse;를 함께 지정하면 셀 사이의 테두리가 하나로 합쳐져 훨씬 깔끔하고 정돈된 표를 완성할 수 있습니다.