HTML 테이블에서 셀 사이의 간격, 즉 테두리 주변의 공간을 조절하려면 CSS의 border-spacing 속성을 사용하면 됩니다. 이 속성은 테이블 내부의 셀과 셀 사이 거리를 지정하며, 기본적으로 border-collapse: separate 상태일 때만 적용됩니다.
값은 하나 또는 두 개를 지정할 수 있습니다. 하나만 입력하면 가로·세로 간격이 모두 동일하게 적용되고, 두 개를 입력하면 첫 번째 값은 가로 간격, 두 번째 값은 세로 간격으로 설정됩니다.
예제 코드
아래 예제는 border-spacing 속성을 활용해 HTML 테이블의 테두리 주변에 공간을 추가하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
border-spacing: 20px;
width: 300px;
}
</style>
</head>
<body>
<h1>Our Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td style="text-align:center">NetBeans</td>
<td style="text-align:center">MySQL</td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 각 셀 사이와 테두리 주변에 20px의 간격이 적용된 것을 확인할 수 있습니다.
