[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"

-_-