[css]테이블(표) 디자인 - HTML과 CSS를 이용한

 

전통적으로 표를 많이 사용하는 한국의 문서 스타일 때문에, 웹페이지에도 테이블 태그를 이용한 표작업이 빈번한 편입니다. 다음은, HTML/CSS를 이용한 테이블(표)디자인에 대해 살펴봅니다. 

 

[ border="1"의 일반적인 테이블(표) ]

No	Subject	Date
1	http://www.naver.com	2006.11
2	http://kr.yahoo.com	2006.11

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999">

 

위와 같이, 테이블 테두리값 1px로 설정한다 하더라도 실제 웹브라우저 상에서는 테두리가 2px로 보입니다.

그러한 까닭은, 이 각각의 1px셀 테두리가 서로 만나면서 2px(1px+1px)이 되기 때문입니다.

아래 테이블에서와 같이 "셀 간격"을 띄워놓고 보면 그 이유를 좀 더 분명하게 이해할 수 있습니다.

 

No	Subject	Date
1	http://www.naver.com	2006.11
2	http://kr.yahoo.com	2006.11

<table width="500" border="1" cellspacing="5" cellpadding="3" bordercolor="#999999">

 

border-collapse

셀 및 테이블 테두리를 포개는 설정에 관한 TABLE태그에 대한 CSS입니다. 먼저, 적용된 모습을 살펴봅니다.

No	Subject	Date
1	http://www.naver.com	2006.11
2	http://kr.yahoo.com	2006.11

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;">

 

- separate : 테이블 전체의 외곽선과 각 셀의 외곽선을 각각 표시합니다. 
- collapse : 테이블 전체의 외곽 및, 각 셀의 외곽선을 경계에서 중복하여 표시합니다.
ex) TABLE { border-collapse: separate } 

 

위와 같이, 아주 간단하게, 1px 외곽선 테이블(표)를 만들 수 있습니다. 해당 CSS는 IE5이상부터 지원되는 기능이며, FireFox 2.0의 경우도 지원되고 있습니다. (단, border="1"이 아닌 경우, 즉 그 이상의 값을 설정한 경우, FireFox에서는 여유선이 표시됩니다)

참고)  너비나 형식이 다른 외곽선이 포개질 때는 다음과 같은 우선 순위를 가집니다.

border-style:hidden설정 외곽선이 최우선, 너비가 넓은 외곽선이 그 다음의 우선 순위를 가집니다.

너비가 같은 경우에는 double, solid, dashed, dotted, ridge, outset, groove, inset 순서로 표기되며,

색상만 다른 경우에는 셀, 가로열, 가로열 그룹, 세로열, 세로열 그룹, 테이블 순서로 표시됩니다.

 

Rules

표 내부 셀간의 구분선을 어떻게 표시할 지에 대한, TABLE태그의 속성입니다. 먼저, 적용된 모습을 살펴봅니다.

No	Subject	Date
1	http://www.naver.com	2006.11
2	http://kr.yahoo.com	2006.11

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="none">

 

- none : 선없음

- groups : thead, tbody, tfoot, colgroup요소의 경계 표시

- rows : 가로열의 경계 표시

- cols : 세로열의 경계 표시

- all : 모든 경계 표시

 

Frame

표 외곽 테두리를 어떻게 표시할 지에 대한, TABLE태그의 속성입니다. 먼저, 적용된 모습을 살펴봅니다.

No	Subject	Date
1	http://www.naver.com	2006.11
2	http://kr.yahoo.com	2006.11

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="none" frame="hsides">

 

- void : 테두리 없음

- above : 윗 부분만 테두리 표시

- below : 아래 부분만 테두리 표시

- hsides : 위, 아래 부분만 테두리 표시

- lhs : 왼쪽만 테두리 표시

- rhs : 오른쪽만 테두리 표시

- vsides : 좌/우 테두리만 표시

- box, border : 상하좌우 모든 테두리 표시

 

No	Subject	Date
1	http://www.naver.com	2006.11
2	http://kr.yahoo.com	2006.11

<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows" frame="hsides">

 

이상의 HTML 태그 속성과 CSS를 이용하면, 위와 같은 테이블(표)를 손쉽게 제작할 수 있습니다.

 

FireFox v2.0

위에서 잠깐 언급했듯이, FireFox(v2.0)의 경우, 이전의 Netscape에서 지원하지 않았던 border-collapse스타일을 지원하고 있습니다. 다만, 아래 그림에서와 같이 테두리의  border값을 2px이상으로 설정한 경우, 여유선이 표시되는 현상이 있습니다. 이 경우, 테이블 외곽 테두리를 모두 표기한 경우, 어긋나 보이게 됩니다. 그러나 border값이 1px인 경우에는 IE와 똑같은 스타일로 표시됩니다.

<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows" frame="hsides"> 

 

<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows">

출처  : http://cafe.naver.com/hacosa.cafe