테이블(table) 태그를 사용해 표를 만든 뒤 각각의 셀, td 태그 간의 간격을 조정하는 방법에 대하여 알아봅니다.



# Table 테이블에서 border-spacing 셀 간격 조절하기만약 테이블 셀 사이의 간격이 존재하거나 없는 경우 이를 변경하기 위해서 사용하는 css 속성 border-spacing입니다.을 사용하여 조정할 수 있습니다. 아래와 같이 사용합니다.
table {
  border-spacing: 2px;
  border-collapse: separate;
}

위와같이 border-spacing 속성을 사용하면 셀 사이, 즉 테두리 사이의 간격을 원하는 값으로 조정할 수 있습니다. 위에는 border-spacing 아래에 border-collapse속성을 separate으로 지정하였는데 만약 spacing을 지정하였음에도 변화가 없다면 이 속성이 collapse로 설정되었는지 확인하시기 바랍니다. border-spacing은 separate일 경우에만 적용됩니다. 그럼 아래 예제를 참고하세요.



# border-spacing 예제소스 코드보기 아래는 border-spacing 속성의 크기 값에 따른 몇 가지 예제소스입니다. 값에따라 어떻게 달라지는지 확인해보세요.

! border-spacing: 10px 인 경우 @border.css
table {
  border-spacing: 10px;
  border-collapse: separate;
}
table td {
  width: 30px;
  background: #ccc;
}

@border.html
<table>
  <tr>
    <td>1<td>
    <td>2<td>
    <td>3<td>
  </tr>
</table>

위 코드의 실행결과 아래와 같이 출력됩니다.

123


! border-spacing 값이 0인 경우의 예제
보시는 것처럼 테이블 안의 td태그, 즉 셀간의 간격이 10px입니다. 그럼 값이 0px을 주고 어떻게 변하는지 보겠습니다.
@border.css
table {
  border-spacing: 0px;
  border-collapse: separate;
}
table td {
   width: 30px;
   background: #ccc;

@ border.html
<table>
  <tr>
    <td>4<td>
    <td>5<td>
    <td>6<td>
  </tr>
</table>

아래는 실행결과입니다.

456



# 마치면서, 자세한 설명위의 두 가지 예제를 보면 아래는 border-spacing 값에 따라 간격이 조정되었음을 확인할 수 있습니다.
이처럼 테이블의 간격을 조정할때 margin이나 left, right 속성을 이용하지 않고도 간단하게 border-spacing만으로 셀사이 간격이 가능한점 알아두시기 바랍니다.