CSS의 border-spacing 속성은 표(table)에서 셀과 셀 사이의 간격 너비를 지정하는 데 사용됩니다. 이 속성은 하나 또는 두 개의 값을 가질 수 있으며, 반드시 길이 단위(px, em 등)로 지정해야 합니다.
값을 하나만 입력하면 가로와 세로 간격이 모두 동일하게 적용됩니다. 두 개의 값을 입력하면 첫 번째 값은 좌우(가로) 간격에, 두 번째 값은 상하(세로) 간격에 각각 적용됩니다. 참고로 이 속성은 border-collapse: separate; 상태일 때만 정상적으로 작동하며, 기본값인 collapse에서는 무시됩니다.
사용 예제
아래 코드를 실행하면 표 셀 사이의 간격을 직접 확인할 수 있습니다. 이 예제에서는 가로 간격 15px, 세로 간격 40px로 설정했습니다.
<html>
<head>
<style>
table.one {
border-collapse: separate;
width: 300px;
border-spacing: 15px 40px;
}
</style>
</head>
<body>
<table class="one" border="2">
<caption>border-spacing 속성 예제</caption>
<tr><td> 대한민국 </td></tr>
<tr><td> 영국 </td></tr>
</table>
<br />
</body>
</html>