2009/05/20 18:25
<style type="text/css">
.board {width: 500px;}
.num {width: 50px;}
.date {width: 50px;}
.author {width: 80px;}
</style>
<table border="0" cellpadding="0" cellspacing="0" class="board">
<tbody>
<tr>
<td class="num">번호</td>
<td class="title">제목</td>
<td class="date">날짜</td>
<td class="author">작성자</td>
</tr>
</tbody>
</table>
.board {width: 500px;}
.num {width: 50px;}
.date {width: 50px;}
.author {width: 80px;}
</style>
<table border="0" cellpadding="0" cellspacing="0" class="board">
<tbody>
<tr>
<td class="num">번호</td>
<td class="title">제목</td>
<td class="date">날짜</td>
<td class="author">작성자</td>
</tr>
</tbody>
</table>
지영언니에게 전수받은 비법!
번호, 날짜, 작성자 등 가로폭을 어느정도 예상할 수 있는 셀들에 width값을 주고,
1개의 셀만 width값을 auto로 남겨두면 table의 width값대로 잘 맞아들어간다.
border-collapse로 표현할 경우에 전체 셀에 width값을 주면 계산을 정밀하게하여 크로스브라우징을 하려고 해도 파이어폭스3에서 꼭 1픽셀씩 삐져나가더라. 또는 table의 width값이 맞아들어 가면 셀마다 width값이 어긋난다. 어차피 1픽셀 오차도 없이 표현할게 아니라면 저 방법이 최고 단순!
파덕:
<table> - border-bottom, border-right 만 주고
<th>, <td> - border-top, border-left 를 줍니다.
내부셀과 테이블셀의 선종류가 다르면 border를 위한 클래스를 추가해야 하는 상황에 놓이지만,
td, th등 내부 셀의 선종류와 테이블 선종류가 동일 할때에는 이 방법으로 테이블과 셀의 width값을 1픽셀 오차없이 정확히 맞출 수 있다. (파덕님 감사/ㅅ /)
디폴트 css에 border-collapse를 걸어두고 있는 나로썬 귀차니즘으로 잘 사용하지 않게 될지도;ㅂ ;
그리고 css가 적용되지 않는 상황에서도 border로 테이블의 셀 구분을 표현하고 싶어서
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
위와 같이 border="1"을 주어서 작업해봤는데, css작업시 border종류가 dotted나 dashed일 경우 파이어폭스에서 이를 그냥 solid로 표현해버리는 현상을 발견했다. <tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
뭐, border, cellpadding, cellspacing도 사실은 표현을 위한 속성이니 신경안쓰고 0으로 줘도 괜찮겠지.
[웹표준 공부하기 추천 책]
TAG css,
Style Sheet,
table
