본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

table 스타일

최초 작성일
최종 수정일
이번 시간에는...
CSS로 table 스타일 속성들을 살펴 봅니다. 테이블에만 가능한 border-collapse, border-spacing, table-layout, caption-side 같은 속성과, 테이블의 vertical-align 특성, 그리고 div 만으로 테이블을 만들 수 있는 display:table을 알아봅니다.

이번 시간에는 table 요소를 스타일 하는 속성들에 대해서 다뤄 보겠습니다. table 요소는 아무래도 다른 요소들에 비해, 조금 특이하게 나오기 때문에, 스타일 속성 중에서도 이 table 요소 만을 위한 속성들이 있습니다.

border 스타일

물론 테이블 요소는 다른 요소와 마찬가지로 테두리 스타일(border)을 줄 수 있습니다. 보통 table 요소나, th, td 요소 등에 주는 식입니다. 하지만, 테이블에서는 테이블에서만 들어가는 border 관련 속성이 있습니다. 이를 먼저 살펴보도록 하겠습니다.

border-collapse

만약 th, td에 모두 테두리를 준다면 보통 다음과 같이 보여집니다.

셀 간의 공간이 보여집니다
기본적인 테이블 셀 간의 테두리 모습

여기서 보면 테이블의 셀들 간에 공백이 있음을 확인할 수 있습니다. 이 border-collapse 속성은 이런 공백을 가질지, 또는 합쳐서 공백을 없앨지 결정하는 속성입니다. 이 속성은 다른 tr, th, td 요소 등에는 사용할 수 없으며, 오직 table 요소에만 사용할 수 있습니다.

separate
기본 값으로, 셀들을 분리시켜(separate) 사이의 공백을 만듭니다. 사이의 공백이 0이더라도, 테두리가 별개로 나타납니다.
collapse
셀들을 합쳐서(collapse) 사이의 공백을 없애버립니다. 셀이 합쳐지면서 테두리도 합쳐집니다.
inherit
부모의 속성을 상속 받습니다.

border-spacing

이 속성은 border-collapse의 속성 값이 separate일 때, 셀 간의 공백의 크기를 조절해 주는 속성입니다.

그렇기 때문에 당연히 tableborder-collapse:separate 상태여야만 동작하는 속성입니다. 단위는 px이나 em 등이 올 수 있으며, 이 속성은 table 요소에만 적용될 수 있습니다. (tr,th,td 등의 요소에는 적용할 수 없습니다.)

table-layout

테이블은 기본적으로 열과 행을 가지고 있습니다. 만약 해당 셀의 너비를 지정하지 않는 다면, 그 너비는 보통 내부의 요소의 너비에 따라 결정됩니다. 이러한 특징이 도표를 더욱 보기 좋게 만들 수도 있지만, 셀들의 너비가 의도치 않게 보여줄 수 도 있습니다. 심지어 셀에 너비를 주더라도 내부 요소에 따라, 또는 테이블 전체의 너비 때문에, 그 너비를 무시하기도 합니다. 이런 특징은, 테이블로 레이아웃을 잡아야 할 때 골치 아픈 요소입니다. 특히 크로스 브라우징을 하는 데에는 더더욱 그렇고요.

지금 다룰 스타일 속성은 이 특징을 바꿔줄 수 있는 속성입니다. 바로 이 테이블의 레이아웃을 보여줄 때, 어떠한 방식으로 계산할 지 결정하는 속성입니다. 이를 통해서, 기본적인 상태 그대로 내용에 따른 유연한 방식으로 출력이 될 지, 또는 내부 요소를 무시하고 딱딱하게 너비를 잡는 방식으로 출력될 지를 결정합니다. 이 속성 역시 table 요소에만 적용 가능합니다.

auto
기본 값으로, 열의 너비를 자동적으로 잡아 줍니다. 셀의 내부 너비에 따라 너비가 달라지며, 내부 콘텐츠를 모두 읽고 나서 너비를 정해야 하기 때문에, 내부 콘텐츠가 너무 많은 경우 종종 느려질 수 있습니다.
fixed
고정된 방식으로 레이아웃을 잡아 줍니다. 내부 콘텐츠를 무시하고 너비를 잡기 때문에, 셀에 아무런 너비를 지정하지 않는 경우에는 셀의 너비가 동등하게 나타납니다.
inherit
부모의 속성을 상속받습니다.

vertical-align

우린 이미 이 속성을 알고 있습니다. 네, 바로 텍스트 간의 수직정렬을 나타내는 속성입니다. 이 속성은 인라인 요소 간의 관계를 기준으로 정렬을 합니다.

하지만, 테이블의 셀(th, td)에 이 속성이 쓰일 경우, 다른 방식으로 처리됩니다. 바로 셀 안에서의 수직 정렬이 됩니다. 셀의 높이를 기준으로 콘텐츠를 위에 정렬할지, 가운데 정렬할지, 아래로 정렬할 지를 결정합니다. 대신, text-top, baseline 등의 값은 동작하지 않으며, 오직 top, middle, bottom 만을 쓸 수 있습니다.

사실, 이런 수직 정렬만을 위해서 테이블을 의미가 아닌, 레이아웃을 위해 사용하기도 합니다. 하지만 물론 이는 좋은 방법이 아니며, 이를 어느 정도 보완하는 방법도 다음에 살펴보도록 하겠습니다.

caption-side

테이블 요소 중에는 테이블의 소개 및 설명을 담당하는 caption 요소가 있었습니다. 또한 이 요소는 거의 필수적인 요소이고요. 하지만, 이 요소는 테이블에서 가장 먼저 선언되어야 하기 때문에, 항상 도표의 위에 위치해 있었습니다.

이 속성은 이 caption 요소의 위치를 위 또는 아래로 지정할 수 있도록 합니다. 당연한 소리지만 이 속성은 caption 요소에만 사용할 수 있습니다.

top
기본 값으로, caption의 위치가 위에 위치합니다.
bottom
caption의 위치를 도표의 아래에 위치하도록 합니다.
inherit
부모의 속성을 상속 받습니다.

display: table

방금 까지 살펴본 속성들은, 테이블 요소에서만 사용 가능한 속성들을 살펴보았습니다. 이 테이블 요소들은 다른 일반적인 블록이나 인라인 요소와는 다른 방식으로 보여집니다. 열과 행을 가질 수 있으며, 콘텐츠를 수직 정렬할 수도 있습니다. 이는 사실 레이아웃을 잡기에 편한 부분들을 분명 가지고 있습니다. 하지만, 우리가 전에 배웠듯이 table 요소를 의미가 아닌, 외형적인 이유로 사용하는 것은 자제해야 합니다.

이러한 점을 어느 정도 보완해 줄 수 있는 방법이 display 속성을 이용한 방법입니다. 우린 지난 시간에서 display 속성을 통해서, 인라인과 블록 형태를 바꿔줄 수 있다는 것을 배웠습니다. 사실, 우린 지난 display 시간에 display의 모든 속성 값을 다루지 않았습니다. 그리고 지금 그 중에 테이블과 관련된 속성 값을 더 다뤄보겠습니다. 참고로, 지금 다룰 속성 값들은 IE8부터 지원합니다.

table
요소를 table 요소처럼 만들어 줍니다.
table-caption
요소를 caption 요소처럼 만들어 줍니다.
table-row
요소를 tr 요소처럼 만들어 줍니다.
table-cell
요소를 td 요소처럼 만들어 줍니다.
table-column-group
요소를 colgroup 요소처럼 만들어 줍니다.
table-column
요소를 col 요소처럼 만들어 줍니다.
table-header-group
요소를 thead 요소처럼 만들어 줍니다.
table-footer-group
요소를 tfoot 요소처럼 만들어 줍니다.
table-row-group
요소를 tbody 요소처럼 만들어 줍니다.

이를 보면 거의 테이블 요소의 대부분을 구현해낼 수 있습니다. 그리고 그 해당 요소처럼 처리가 되면, 해당 요소에만 쓸 수 있는 스타일도 적용 가능합니다. 예를 들어 display:table-caption을 적용했다면, caption-side 역시 적용 가능합니다.

이 속성 값들을 이용해서, div만으로 테이블을 만들어 보도록 하겠습니다. 마크 업된 소스를 보면, 테이블 요소를 쓰지 않고, div에 클래스명만 넣었습니다.

이제 이를 가지고 스타일을 주도록 하겠습니다.

살펴본 코드로 구현한 도표 형태
display를 이용한 테이블 구현

이를 통해서, 의미에 맞지 않는 table 요소를 쓰지 않으면서도 div 만으로, 테이블 형태를 구현해냈습니다. 앞의 예시는 table-header-group이나 table-row-group같은 것을 통해서 thead,tfoot 등을 구현했지만, 실질적으로 이 값들을 자주 사용하지는 않습니다. 보통 이런 속성 값이 필요한 요소라면 대개 table을 사용하는 게 적절한 요소일 가능성이 높죠. 보통은 table, table-row, table-cell 정도를 많이 사용합니다.

또한 이 display 만을 이용한, 테이블의 구현은 colspan, rowspan과 같은 셀 병합은 구현하지 못하니, 참고하시기 바랍니다.

요점 정리
  • borer-collapse는 테이블 셀 간의 간격 여부를 결정.
  • border-spacing은 셀 간의 간격 거리를 지정. border-collapse가 serparate가 되어있는 상태에서만 가능.
  • table-layout은 셀의 너비를 유동적으로 할 지 고정으로 할 지 결정. fixed의 경우가 렌더링이 보다 빠름.
  • 테이블의 셀에서 vertical-align은 셀 내부에서의 수직 정렬을 결정함.
  • caption-side로 테이블의 캡션 위치를 맨 위 또는 맨 아래로 지정.
  • display:table을 이용하면, div같은 table이 아닌 다른 요소를 table 처럼 보여줄 수 있음.(table-row는 tr, table-cell은 td처럼)
  • display:table에서는 rowspan, colspan같은 셀 병합은 구현 불가

이 글이 유용하셨다면 친구들에게 공유 해주세요.