table 태그는 그 쓰임이 다양합니다. 가장 많이 사용되는 경우 리스트형태의 그리드를 보여줄 때가 아닐까요? 여러가지 리스트 아이템을 가지는 경우 table을 사용해 구조화하여 보여줄 수 있죠.

table 태그는 각각의 아이템인 row들이 tr 태그로 구성됩니다. 이때 만약 tr 태그들 사이에 간격을 주려면? 이 경우 어떻게 할까요?



# table 내부 tr 태그에 여백 주는 방법이 방법이 어려운 이유는 tr 태그에는 margin 속성이 적용되지 않기 때문입니다... 이런 이유로 아이템 사이에 간격을 주기 위해서는 다름 방법을 찾아야만 합니다. 가장 효과적인 방법은 무엇일까요?


! 어떤 방법들이 있는가..tr 태그 사이에 간격, 여백을 만드는 방법으로 아래와 같이 3가지 방법이 있습니다.


1. border-spacing 사용하기
이 방법은 가장 쉽고 간단한 방법입니다. border-spacing은 단일값 또는 각각 간격을 조정하는 것이 가능합니다. 만약 위 아래에만 10px 간격을 만들 경우 아래와 같이 이 속성을 table 태그에 사용합니다.
table {
  border-collapse: separate;
  border-spacing: 0 10px;
}

이때 table 태그의 border-collapse의 값은 separate로 설정되어야만 정상적으로 동작하므로 꼭 함께 선언해야합니다.


2. 빈 tr 태그를 만들기
이 방법 역시 간단하지만 비어있는 tr 태그를 넣어야하므로 코드가 지저분해질 수 있습니다. 방법은 쉽고 간단하지만 빈 tr 태그를 넣는 것이 못마땅할 수 있겠죠. 적용 방법은 아래와 같습니다 
<table>
  <tr>
    <td>Line 1</td>
  </tr>
  <tr></tr>
  <tr>
    <td>Line 2</td>
  </tr>
  <tr></tr>
  ...
  ..
</table>

중간에 빈 tr 태그는 간격을 만들기 위한 용도로만 사용됩니다. 테이블의 row들이 적다면 크게 문제 없겠지만 많아지는 경우 성능에 좋지 않을 수 있겠죠. 이 경우 다른 방법을 찾거나 간격을 없애는 것도 또 다른 방법입니다.


3. border-bottom 배경색과 같은 테두리 그리기
이 방법 역시 매우 간단합니다. 배경색과 같은 테두리를 tr 태그에 추가하면 마치 아이템 사이가 떨어진 것 처럼 보이게되겠죠. 아래처럼 클래스를 지정하고 해당하는 클래스는 스타일을 적용하면 좋을 것입니다.
<tr class="space"></tr>

아래는 css 코드입니다.
tr.space {
  border-bottom: 10px solid #fff;
}

여기까지 다양한 3가지 방법을 함께 알아보았습니다. 위 방법 중에서 개인적으로 1번 그리고 3번 방법을 자주 사용합니다.



# 마치면서여기까지 테이블 태그의 아이템 사이에 간격을 만드는 방법을 알아보았습니다. 생각해보면 또 다른 방법도 있을 수 있습니다. table 태그를 사용하지 않고 대신 li태그를 사용하는 것도 방법입니다. 하지만 table 태그 요소는 다양한 메소드와 프로퍼티를 가져서 편리하죠. table DOM Object는 아이템을 선택하거나 추가, 제거 등등 다양한 메소드와 프로터티를 가집니다. 이 부분은 따로 정리하여 포스팅 하도록 하겠습니다.