CSS 테이블 디자인

아래 테이블 디자인은 너무 내용이 좋아 펌질을 하였다.
우선 출처 부터 밝힌다.

03.05 : 아래 이미지들 링크가 다 깨지는군요. 이미지까지 보실분은 아래 원본으로 가시면 되겠습니다. ^^;

출처 : 네이버 플래쉬 카페 : http://cafe.naver.com/q69
글 원본 : http://cafe.naver.com/ArticleRead.nhn?articleid=74201&sc=e0d4371808422d9c16&clubid=10346911

========================================================================
CSS : 테이블 디자인

페이지의 레이아웃을 위해 지나친 중첩 테이블의 사용은 분명 지양해야 할 방법입니다. 그러나, 웹표준을 지킨다는 지나친 정의감(?)에 테이블 사용 자체를 지양하는 것은 마치 거식증 같다고 해야할까요?

캘린더, 스프레드시트, 차트와 같은 표 형태의 데이터를 마크업하는 경우에는, 확실히 테이블이 용이하면서도 멋진 스타일을 사용할 수 있습니다.

이하 샘플 예제에서 사용할 기본 스타일은 아래와 같습니다.

body{
margin: 0; padding: 10px;
color:#666666;
font-family: Gulim, Dotum, sans-serif;
font-size: 12px; word-spacing: 1px; letter-spacing: -1px;
line-height: 16px;
}

아래와 같은, 기본 스타일의 테이블을 만들어 봅니다.

표 제목, 배경색, 볼드체, 테두리등을 생각해 보면, HTML만을 사용하면 굉장히 코드가 번잡해 집니다.

그러나, 디자인과 스타일은 CSS에 맡기고, 테이블은 기본에 충실하게 데이터만을 포함하면 됩니다. 아래는 위와같은 테이블을 만들기위해 작성한 HTML코드입니다.

 

<table class="basic">
  <caption>월별 지점 방문객 통계 : 2006년</caption>
  <thead>
    <tr><th>방문객수</th> <th>서울지점</th> <th>부산지점</th></tr>
  </thead>
  <tfoot>
    <tr><th>합계</th> <td>5,875</td> <td>4,349</td></tr>
  </tfoot>
  <tbody> 
    <tr><td>4월</td><td>2,085</td><td>1,605</td></tr>
    <tr><td>5월</td><td>1,866</td><td>1,286</td></tr>
    <tr><td>6월</td><td>1,924</td><td>1,455</td></tr>
  </tbody>
</table>

 

- caption태그는 표 제목을 나타내는 태그입니다. 그림과 같이 표 상단에 내용을 배치해 줍니다.

 

- thead, tfoot, tbody태그는 표의 가로열(행)을 그룹화 하는 요소로, 표의 헤더, 꼬리말, 본문을 각각 나타냅니다. 이렇게 표의 내용을 그룹으로 나누어 관리하면, 여러가지 장점이 있습니다. 표의 헤더나 꼬리말을 고정시켜 본문 부분만 스크롤 시키거나, 여러 페이지에 걸쳐진 기다란 표를 인쇄하는 경우 페이지마다 헤더나 꼬리말을 인쇄할 수 있게 됩니다. 또한, 이런 부차적인(?) 부분을 떠나, 헤더나 꼬리말의 경우 본문과 스타일을 다르게 하는 경우가 많습니다. CSS를 이용해 스타일을 입히기가 그만큼 용이하게 됩니다. 사용상 주의할 점은, thead tfoot tbody순서로 사용되어야 합니다. 꼬리말을 본문보다 먼저 표기해 주어야 합니다.

 

- th태그는 제목용 셀, 즉 헤더 셀 태그로, 내용을 굵은 글꼴로 표기하며 가운데 정렬을 해 줍니다. 그만큼, 불필요한 코드의 사용을 줄여줄 수 있습니다.

 

이제, 표의 디자인을 관장할 스타일시트를 살펴봅니다.

 

table.basic{
  margin: 0; padding: 0; line-height: 21px;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-collapse: collapse;
}
table.basic th, table.basic td{
  margin: 0; padding: 3px 0; width: 160px;
  text-align: center;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
table.basic caption{ margin: 0; padding: 0; }
table.basic th{ background-color: #e9e9e9; }

 

파란색으로 표시된 부분은 테이블의 테두리를 관장하는 부분입니다. 좀 더 간단한 방법도 있습니다만, 브라우저의 특성을 가리지 않도록 정확한 표기에 중점을 둔 방식입니다. 셀의 좌/상(┌) 부분은 테이블 외곽 테두리를 이용하고, 우/하(┘)부분의 테두리는 셀의 테두리를 이용합니다. 최종적으로, 셀을 중첩(border-collapse: collapse)하도록 하면, 여백없이 1px테두리의 테이블이 완성됩니다.

 

기본적으로 여백과 패딩을 나타내는 margin, padding값은 하위요소로 상속되지 않습니다. 브라우저마다 디폴트 상태의 표현방식이 조금 다르기 때문에, 항목마다 적절히 지정해 주는 것이 좋습니다.

 

초록색으로 표시된 부분은 테이블의 폭과 너비를 관장하는 부분입니다.

모든 영역의 너비와 높이는 주로 width, height속성을 일반적으로 사용합니다. 여기서 주의할 점은, 높이를 지정하는데 line-height를 사용하였습니다. 테이블의 셀 높이를 지정할 때, height를 이용하면, 브라우저간 차이가 발견됩니다.

 

* line-height는 인라인 요소의 높이를 지정하는 속성으로, 블록레벨 요소에 지정된 경우, 안에 포함되는 인라인 요소의 높이를 결정해 줍니다. 또한, 이 값은 하위 요소로 상속됩니다. 참고로, width, height는 하위 요소로 상속되지 않는 값입니다.

 

가로 너비를 계산해 볼까요? 셀의 가로 너비는 160px*3 = 480px, 가로방향의 여백/패딩값은 0이므로 1px테두리 3개를 포함해 483px가 되겠네요. 세로 너비는 또 어떻게 될까요? 셀 내의 인라인 요소의 영역 높이를 21px로 지정하고 상,하 여백을 3px로 지정했으니 테두리를 제외한 실제 셀 1개의 화면상 높이는 21px+3px+3px = 27px가 됩니다. 세로 행이 5개 이므로 27px*5 = 135px, 1px테두리가 6개이니 135px+6px = 141px가 됩니다. 거기에 켑션(제목)항목이 21px이므로, 총 141px+21px = 162px가 최종 높이가 되겠네요. * 이렇게 분석을 해보면 각각의 요소가 어떻게 적용되었는지 살펴볼 수도 있고, 문제점이 발견될때 좀더 쉽게 접근을 할 수 있습니다.

 

나머지는 헤더셀(th)에 배경색을 지정하는 부분과 켑션(제목)부분의 여백, 패딩값을 지정하는 부분입니다.

 

설명은 장황하게 했지만, 이렇게 작성된 코드는 HTML부분도 판독하기 쉬울 뿐더러, 미리 작성된 테이블 클레스를 이용해, 테이블의 디자인도 손쉽게 변경할 수 있습니다. (바꾸고 싶은 테이블의 클래스 이름만 바꿔주면 되니까요...) 다음은, 같은 테이블을 이용한 다른 디자인 클레스의 예입니다.

 

table.chart{
  margin: 0; padding: 0; line-height: 21px;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-collapse: collapse;
  }
table.chart th, table.chart td{
  margin: 0; padding: 3px 0; width: 160px;
  text-align: center;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
table.chart caption{
  margin: 0; padding: 0;
  text-align: right;
}

table.chart thead th{
  background-color: #e9e9e9;
  border-bottom: 1px solid #999999;
}
table.chart tfoot th{ background-color: #e2e2e2; }

 

테이블 헤더와 본문 구분선을 좀 짙은 색으로 바꾸고, 합계 부분의 배경색을 따로 설정하기 위해, 헤더셀(th)의 thead 부분과 tfoot부분을 구분해서 따로 지정했습니다. 제목(caption)부분의 정렬 옵션도 추가했습니다.

 

table.excel{
  margin: 0; padding: 0; line-height: 21px;
  border-top: 2px solid #999999;
  border-bottom: 2px solid #999999;
  border-collapse: collapse;
}
table.excel th, table.excel td{
  margin: 0; padding: 3px 0; width: 160px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
}
table.excel caption{
  margin: 0; padding: 0;
  text-align: right;
}
table.excel thead th{
  background-color: #e9e9e9;
  border-bottom: 1px solid #999999;
}
table.excel tfoot th, table.excel tfoot td{
  border-bottom: none;
  background-color: #e2e2e2;
}

 

굵은 테두리를 표 외곽 테두리로 상/하에 설정합니다. 셀 테두리는 아래쪽만 표기하도록 하고, 꼬리말의 아래쪽 테두리를 표기하지않도록 하면, 정확하게 표현됩니다. (사실, border-collapse: collapse에는 셀 중첩의 우선순위가 있기 때문에, 꼬리말의 아래쪽 테두리 설정은 불필요하기도 합니다)

 

처음 적응하는 것이 어려울 뿐입니다. 이렇게 테이블 클래스를 만들어 두면, HTML코드에서 클레스를 입력/변경하는 것만으로 손쉽게 테이블을 디자인할 수 있습니다. 이상 테스트한 코드는 IE7, Firefox2에서 동일한 결과를 보여줍니다.