아이디 비밀번호 | 회원가입 | 비밀번호분실
   
 새로운소식
 FAQ
 웹프로그램
 웹DB
 웹서버
 웹프로그램수정
 해피칼럼
 골드팁
 
제작의뢰
웹프로그램 판매몰
 
현재위치: 메인 해피포럼 황금 : 게시물 읽기
  2005-11-17 (13:55:28) from 211.199.40.171
  작성인 : HappyCGI 조회수 : 8412   
제목 : [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"

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

 





HappyCGI's SIGN
개발자의 미덕은

게으름(Laziness)
참지말기(Impatience)
교만(Hubris)


   메모
cyb0124
2006-07-03
12:36:31
좋은 팁이네요. 감사합니다.^^
jyume
2007-01-24
00:22:20
정말 유용한 팁입니다...^^
kukuboy
2007-04-16
20:40:39
우...좋은팁이네요..잘배웠습니다.

:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~

  

 
제목
작성인
조회
등록일
[html] 가는 테이블 만들기
HappyCGI
8413
2005-11-17
 



  HOME | 회사소개 | 제작의뢰 | 개인정보취급방침 | CGIMALL | 자료실 | 사이트등록 | 랭킹100 | 포럼 | 초보가이드 | 질문과답변 | 배너광고
Copyrightⓒ1997~2008 HappyCGI All rights reserved
Powered By HappyCGI