브라우저별 테이블 height 값으로 본 픽셀 테스트

<style type="text/css">
body{ margin:20px; padding:0; font-size:12px; }
table{ width:700px; border:0; border-spacing:0; padding:0;}
table th, table td{ border-bottom:1px #ccc solid; height:20px;}
</style>
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

조건부 주석 : table{border-collapse:collapse;}

위 CSS를 적용하면 각 브라우저별로 아래와 같은 수치가 나온다.
조건부 주석을 단 이유는 ie6,ie7이 border-spacing:0; 을 인식하지 못하고 벌어지는 현상이 나오기 때문이다.

파이어폭스:19px
오페라:19px
ie:22px
크롬:21px
사파리:21px

이번엔 테이블에 직접 cellpadding="0" cellspacing="0" 값을 넣고 실험해 보았다. 당연히 주석처리 된 부분도 빠진다.
border-collapse:collapse 역시 값을 다르게 보여주기 때문에 꺼리는 편.

파이어폭스:19px
오페라:19px
ie:20px
크롬:20px
사파리:20px

파폭과 오페라를 뺀 나머지 브라우저는 내가 원하는 height=20px 값을 정확하게 보여주었다. 하코사에서 테이블값을 넣을때
cellpadding="0" cellspacing="0" 은 테이블에 직접 넣는게 좋다는 말을 들었는데 직접 실험해보니 수치가 말해준다.

파폭과 오페라에 핵을 쓰기 싫어 이미지 처리를 해보았다.

body{ margin:20px; padding:0; font-size:12px; }
table{ width:700px; border:0;}
table th, table td{ background:url(b_list_bg.gif) repeat-x 0 20px; height:21px;}

<table cellpadding="0" cellspacing="0">
</table>

모든 브라우저가 동일하게 20px;의 결과값을 보여준다.

아래와 같은 디자인의 게시판을 만들경우 table에 background:url(new_boardList.gif) no-repeat; 를 넣으면 col 값이 있을 경우 th 부분에 ie 6/ie 7 에서  원치않는 border가 나오게 된다. 

이럴 경우 반드시 col 을 써줘야 하는 경우가 아니라면 생략하도록 한다.  또는 div/span로 테이블을 감싸 div/span에 이미지를 넣는 방법도 있다. 
레이아웃을 만들때 보통 게시판이 들어가게 되는 공간을 div로 만들고 그 밑에 ul태그로 버튼을 넣게 되는데 이럴경우 테이블과 ul태그를 한꺼번에 감싸기 때문에 테이블의 이미지를 위해서 불필요한 div/span 을(를) 넣을 수 밖에 없게 된다. 경우에 따라 선택해서 쓰면 되겠다.