<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으로 줘도 괜찮겠지.
오픈캐스트 발행에 참여해주실 블로거분들은 방명록에 남겨주세요^^
[블로그 꾸미기 추천 책]
댓글을 달아 주세요
table-layout:fixed를 사용하는 방법은 어떨까나..
2009/05/20 18:35 [ ADDR : EDIT/ DEL : REPLY ]나의 디폴트 CSS엔 항상 들어가있지롱
2009/05/21 09:41 [ ADDR : EDIT/ DEL ]좋은 글 잘 읽었습니다.
2009/05/21 10:00 [ ADDR : EDIT/ DEL : REPLY ]저도 린트님처럼 비슷한 방식으로 했었는데요,
다른점이 있다면 .num {width: 21%;}, 이런식으로 width를 %단위로 사용해서 했었습니다..
그런데 특정플젝에 테이블 th 항목이 매우 다양한 경우에는 클래스가 무진장 늘어나더군요...
그렇다고 린트님의 방식이 틀렸다는 걸 말하는 건 절대 아닙니다. -..- width 길이가 변경되더라도
html 페이지를 건드리지않고 css 만으로 width 길이를 조절가능하기때문이죠~
아무튼 이제 겨우 10시인데 방문자수가 벌써 70명이넘고 인기인이시네여~
그런데 궁금한게 있는데요, 리느린트 뜻이 몹니까?! ㅎㅎ 블로그 구경 잘하고 갑니당~
사실 테이블 셀에 width값을 정해주지 않고 자동으로 랜더링 하도록 하는게 가장 유연하고 간단하지만 현실은! 크흑.
2009/05/21 10:11 [ ADDR : EDIT/ DEL ]티스토리 쓸때에는 방문자 수가 이렇게 많지 않았는데,
텍스트큐브닷컴으로 옮기고나서 거의 3배로 올랐어요 덜덜덜...
리느린트는 어떤 만화책에 나오는 캐릭터이름이에요^ -^
Css로 인해 고민이 생겼을때 질문해야 할 곳이 드뎌 생겼네요. ^^;
2009/05/21 11:08 [ ADDR : EDIT/ DEL : REPLY ]ㅎㅎㅎ 고민하다가 모르시면 물어보셔요/ㅅ /
2009/05/21 14:33 [ ADDR : EDIT/ DEL ]안녕하세요.
2009/05/21 12:15 [ ADDR : EDIT/ DEL : REPLY ]봄눈님 포스팅을 통해 알게 되어 RSS로 구독하고 있습니다.
저도 FF의 아리송한 border-collapse 렌더링 때문에 사용을 안하고 있습니다.
table 요소에 기본 속성을 cellspacing="0"을 작성하며,
table 에 선을 주고 싶을때는
<table> - border-bottom, border-right 만 주고
<th>, <td> - border-top, border-left 를 줍니다.
table요소 자체에 border="1"을 줘서 CSS disable 상태의 모습보다는
summary 속성값을 주거나 자식요소로 <caption>요소를 삽입해서 더 접근성을 높이는걸 권해드립니다.
<colgroup><col><thead><tfoot>요소들도 table 의 구조에 맞게 적절히 사용하시면 좋겠습니다.
그리고 저도 라그하는데;;
같은직종이면서 라그하는 분 뵈니 신기하네요-ㅂ- (근데 얼마전에 접으신다는 포스팅을 ㅎㄷㄷ)
접근성을 높이는 테이블에 대한 것이 아닌 width값 주기에 대한 포스팅이라서요 ㅎㅎ
2009/05/21 18:11 [ ADDR : EDIT/ DEL ]다른 요소에 대한 언급은 하지 않았어요.
border주는 방법에 대한 의견 감사합니다~!
라그 접었어요=ㅂ =!ㅋㅋㅋ
사람이 점점 줄고 같이 하던 사람들도 점점 접고해서ㅠ _ㅠ
오호, 요즘 웹 접근성 이야기가 화두가 되고 있는데
2009/05/21 15:39 [ ADDR : EDIT/ DEL : REPLY ]<tbody>는 몸에 배신거에요? ㅎㅎ
제가 두산기업 관련 사이트 유지보수를 하는데..
거기 사이트들은 하도 옛날 버전으로 개발되서(asp.net 1.1 .. 하악~!)
이번에 장애인 차별 금지법 관련되서 대기업 및 공기업들은 홈피에 웹접근성 관련해서 적용하라고
법적인 규제가 내려졌더군요. 물론 4월달 이야기인데 ㅎㅎ
그것때문에 한창 바뻣던 기억이 납니다 ^^ 플래쉬도 다 탭인덱스 먹여야 되고.. 흑흑
아무튼 <tbody> 습관은 참 좋은거 같아요 :)
DTD에 tbody는 table아래에서 반드시 1회 이상 사용하도록 되어있죠@ _@
2009/05/21 16:09 [ ADDR : EDIT/ DEL ]웹표준과 웹접근성을 0순위로 가져야 하는데,
요새 php공부하다보니 개발자들이 지키기 귀찮은것도 있겠구나 하는 안일한 마음이 싹틔워서 반성중이에요 ㅋ
드림위버로 개발하면 웹표준이랑 접근성 준수하기가 훨씬 수월하다고 하던데..
2009/05/21 19:14 [ ADDR : EDIT/ DEL : REPLY ]드림위버를 6년써도 모르는 저는 좀 초보인것 같습니다 ㅎㅎ
웹표준에 대한 관심을 가지고 드림위버를 접근하면 될거같아요 ㅎㅎ
2009/05/21 23:33 [ ADDR : EDIT/ DEL ]저희팀 드림위버 오래쓰신분은 표준코딩 아닐때부터 드림위버 쓰시던분인데 표준코딩도 날라다니면서 하시더라구요 ㅎㅎ
오. 이런 방법이! table 여백 주거나 할때 브라우저마다 다르게 나오는게 골치였거든요.
2009/05/24 12:20 [ ADDR : EDIT/ DEL : REPLY ]나중에 홈페이지 리뉴얼할때 감사히 잘 활용하겠습니다 >ㅅ<
좋은 정보 감사드려요♥
모든 브라우저가 똑같이 랜더링해서
2009/05/24 18:30 [ ADDR : EDIT/ DEL ]크로스브라우징이란 것 자체를 안했으면 좋겠네요 ㅠㅠ