잡다한 일상사 WebJoy.kr :: [TABLE] frame 과 rules 속성과 CSS를 이용한 테이블

[TABLE] frame 과 rules 속성과 CSS를 이용한 테이블

WEB/HTML/Css/Script 2007/06/07 15:40 by 아쿠아바다

1. frame과 rules 을 이용한 css 예제

CSS Level 2 에는 다양한 테이블 관련 속성이 추가가 되었습니다.
앞에서도 애기드렸다 시피 테이블은 구조 자체가 일반 HTML 요소와는 조금 다르기 때문이라 생각합니다.
다양한 테이블관련 속성이 있지만 아직 웹브라우저에서 지원되는 것이 미비 합니다만 오늘 소개해드리는것은 지원이 됩니다.
CSS를 이용한 테이블 라인 표현하기에 이미 소개드린 속성입니다.
"border-collapse" 는 테이블의 테두리가 겹쳐지는 것을 분리하는 속성입니다.

No	Subject	User	Date
1	TABLE 속성	나무	2001.11.21
2	TABLE 속성중 frame 과 rules	나무	2001.11.21
3	TABLE 과 CSS 의 조합	나무	2001.11.21

이런 모양의 테이블은 많이들 보아 오셨겠죠.
하지만 이렇게 테이블의 보더를 1 픽셀로 만들려면 좀 손이 많이 가는 작업이였습니다.
하지만 여기에 추가된 소스는 다음처럼 아주 간단합니다.

자 그러면 여기에 frame 과 rules 를 추가하면 모양이 어떻게 바뀌는지 볼까요

No	Subject	User	Date
1	TABLE 속성	나무	2001.11.21
2	TABLE 속성중 frame 과 rules	나무	2001.11.21
3	TABLE 과 CSS 의 조합	나무	2001.11.21

frame 과 rules 를 추가하면 완전히 다른 모양의 테이블이 됩니다.
보시면 border 값을 "1" 이 아닌 "2" 를 주었죠.. 이값은 테이블 위와 아래선에만 적용이 되는것을 아시겠죠.
현재는 테이블 요소에 css 속성을 주었기 때문에 외부에서 테이블의 모양이나 색을 바꿀 수는 없습니다
현재로서는 CSS 만으로 frame 과 rules 를 제어할 수가 없기때문입니다.
하지만 문서객체모델을 이용하시면 외부에서도 마음대로 테이블의 모양을 바꾸실 수도 있습니다.
문서객체모델을 이용한 예제는 추후에 다시 올리도록 하겠습니다.
오늘은 여기 까지입니다.
그럼 즐거운 하루 되세요

'WEB > HTML/Css/Script' 카테고리의 다른 글

[TABLE] 속성 - frame (0)	2007/06/07
[TABLE] 속성 - rules (0)	2007/06/07
[TABLE] frame 과 rules 속성과 CSS를 이용한 테이블 (0)	2007/06/07
HTC를 활용한 링크 포커스 없애기(한번에 점선없애기) (0)	2007/06/07
TABLE사이에 Form문 넣지 않고 사용하는 방법 (0)	2007/06/07
<base>태그를 이용하자! (0)	2007/06/07