웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

table 태그 tr 요소 사이에 간격, margin 적용하기

Last Modified : 2018-06-25 / Created : 2018-06-21
65,288
View Count
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는 아이템을 선택하거나 추가, 제거 등등 다양한 메소드와 프로터티를 가집니다. 이 부분은 따로 정리하여 포스팅 하도록 하겠습니다.

Previous

[LESS] 여러개의 LESS 파일을 하나의 css로 만드는 방법

Previous

HTML title 속성으로 툴팁(tooltip) 보여주기