래채'sTory

 

전통적으로 표를 많이 사용하는 한국의 문서 스타일 때문에, 웹페이지에도 테이블 태그를 이용한 표작업이 빈번한 편입니다. 다음은, 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

Internet Explorer 의 style 랜더링 버그(?)와 관련된 내용입니다. "Squish the Internet Explorer Z-Index Bug"에서 지적하고 있는 내용입니다.
동일한 코드를 브라우저 별로 확인해보면 IE만 다른 모양을 보여주는 것을 확인 할 수 있습니다.
부모의 z-index 값을 absolute 속성을 지닌 자식이 영향을 받아서 의도와 다르게 표시되는 버그입니다.

예제 코드 1

파이어폭스 3.0.6, 크롬 2 Beta, 사파리 4, 오페라 9.64, IE 8에 동일한 코드(1번 예제 코드)를 열었을 때의 모습입니다.

z-index 값이 20인 D1i 가 D1o의 영향으로 z-index 값이 낮은 D2o에 가려지는 모습을 볼 수 있습니다.

예제 코드 2
해결 방법은 D1o에 D2o보다 큰 z-index 값을 적용해서 해결이 가능합니다. 예제 코드 2는 D1o에 z-index 값을 할당해서 의도한 것과 같이 보이도록 한 것 입니다.


원본 링크  : http://wiz.pe.kr/527

background-image:url(1.jpg) ;	배경이미지의 url
background-repeat:no-repeat ; background-repeat:repeat ; background-repeat:repeat-x ; background-repeat:repeat-y ;	반복적으로 표현하지 않음 반복적으로 표현(디폴트) repeat-x : x 방향으로만 반복 repeat-y : y 방향으로만 반복
background-position: bottom 100px ;	표현하고자 하는 위치(상하 좌우) - left,top,right,bottom - 100px, 200px - 10%,20%
background-attachment: fixed ;	배경을 고정 시키기(스크롤시) 생략하면 스크롤됨 body 태그나 iframe,레이어 같은 스크롤이 생기는 곳에서 사용할 수 있다

링크 : http://www.webmadang.net/script/script.do?action=read&boardid=3002&page=1&seq=34