시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
> 커뮤니티 > 골드팁 상세보기
커뮤니티 구인구직
사이트등록
현재접속자 새로고침
게시판타이틀 골드팁 / 상세보기
트위터로 보내기 미투데이로 보내기 싸이월드 공감
추천수 436 | 조회수 10,194 | 등록일 2005-11-17 13:55:28

닉네임

HappyCGI

제목

[html] 가는 테이블 만들기
내용
 

HTML상에서 테이블 태그는 그 특성상 보더값을 1로 하고 셀과 셀사이의 간격을 0으로 해도(cellspacing="0")
브라우져 자체가 테이블보더를 입체적으로 표현하려 하고, 보더값이 셀단위로 부여되기 때문에 정작 보더가
1픽셀이 넘을 뿐 아니라 매우 어색해 보이기까지 합니다.
일종의 버그아닌 버그가 되어버린거죠. 물론 해결책은 있습니다.

#1.첫째로 테이블태그의 속성을 이용해서 만드는 방법입니다.

<table border="1" cellspacing="0" cellpadding="0" bordercolordark="#ffffff" bordercolorlight="#000000">
이 방법은 음영의 색깔을 다르게 줘서 테이블보더에 입체감을 주게끔하는 설정값을 그 반대로 줌으로서
가는선으로 보이게 하는 일종의 팁입니다.
하지만 더러는 문제가 생기는 경우가 있어서 추천하진 않겠습니다.

#2.두번째는 스타일을 이용해서 만드는 방법입니다.

<table border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse">
스타일 하고도 border-collapse 속성은 셀과 셀간격의 표현법을 설정해줍니다.
기본값은 separate이며 separate는 셀과 셀간격의 보더를 겹치지 않게 배열합니다. 그럼 1픽셀씩 놓아져서
셀간의 간격이 2픽셀이 되겠죠? 반대로 collapse값은 셀과 셀간격의 보더를 겹쳐서 보여줍니다.
때문에 1픽셀로 보이게 되는 거죠...
훨씬 간단하고 안정적인 방법이므로 추천하겠습니다.

아래는 미리보기
style="border-collapse:separate"

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

 


style="border-collapse:collapse"

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

 



border-collapse
속성을 적절히 부여하고 나서 보더컬러까지 설정하면 완벽한 가는선테이블이 됩니다.
style="border-collapse:collapse" bordercolor="#AE521C"

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

 


추천스크랩소스보기 목록
cyb0124 2006-07-03 12:36:31
답글

좋은 팁이네요. 감사합니다.

jyume 2007-01-24 00:22:20
답글

정말 유용한 팁입니다

kukuboy 2007-04-16 20:40:39
답글

좋은팁이네요..잘배웠습니다.

이전게시글 [perl] 구동되는 프로그램의 실제속도 측정하기 2005-05-18 11:54:13
다음게시글 [HTML] word-break:break-all, nowrap 유용하게 쓰기 2005-11-17 13:57:11