[CSS] table에 대해서

CSS를 이용한 table 응용

테이블을 이용하여 레이아웃을 잡는것이 바람직 하지 않다고 하더라도 아직까지는 테이블을 이용한 레이아웃이 여전히 많이 쓰이고 있습니다. 이는 새로운 기술을 익히기가 힘들다는 점도 있지만 웹브라우저들이 CSS를 아직까지 완벽하게 지원하지 못하는 이유도 있습니다. 그러므로 테이블은 여전히 많이 쓰이게 되는 중요한 태그이고, 이 테이블을 좀더 정교하게 다루기 위해서는 CSS를 사용해야 합니다. 테이블에서 자주 사용하는 CSS를 팁 형식으로 계속적으로 소개해 나가겠습니다. 테이블 태그 자체에서 사용하는 CSS 속성으로는 대표적으로 border-collapse 와  table-layout 이 있습니다. border-collapse 는 테이블의 경계선을 어떻게 표시하느냐를 지정하는 속성이고 table-layout 은 테이블 레이아웃을 고정하느냐 여부를 지정하는 속성입니다.

테이블의 선을 단선으로 border-collapse 속성

border-collapse는 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성입니다. 속성값으로는 collapse와 separate를 사용할 수 있습니다. collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다. separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다. <table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;"> <tr>  <td>border-collapse:collapse;</td> </tr> </table> 위와 같이 border-collapse 속성갑을 collapse로 지정하고 border 속성을 추가적으로 지정하면 아래와 같이 깔끔한 테이블을 출력할 수 있습니다. border-collapse:collapse; border-collapse 속성은 테두리선의 표시방법만 지정하므로 반드시 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 합니다. 테이블의 셀이 많을때는 IE와 Firefox에서 조금 다른 모습으로 출력됩니다. IE에서는 추가적으로 TD element에 border 속성을 추가적으로 지정하면 됩니다. <table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;"> <tr>  <td style="border:1px gray solid;">HTML</td>  <td style="border:1px gray solid;">Hypertext Markup Language</td> </tr> <tr>  <td style="border:1px gray solid;">CSS</td>  <td style="border:1px gray solid;">Cascading Style Sheet</td> </tr> </table> HTML Hypertext Markup Language CSS Cascading Style Sheet

table-layout 속성을 이용하여 테이블 고정하기

table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지합니다. 보통 셀안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어납니다. <table width="200" cellpadding="5" cellspacing="2" border="1" align="center"> <tr>     <td>셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.</td> </tr> </table> 테이블의 너비가 200픽셀로 셀안의 내용에 비해서 좁더라도 아래와 같이 자연스럽게 줄바꿈이 일어납니다. 셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다. 반면 홈페이지 주소와 같이 영문으로 공백이 없는 경우는 셀을 밀어버리는 현상이 발생합니다. <table width="200" cellpadding="5" cellspacing="2" border="1" align="center"> <tr>     <td>http://www.homejjang.com/09/border_collapse.php</td> </tr> </table> 위의 테이블과 똑같이 200픽셀로 너비를 지정했음에도 테이블이 밀려나는 걸 확인할 수 있습니다. http://www.homejjang.com/09/border_collapse.php table-layout 속성값을 fixed로 지정하면 테이블의 너비가 200픽셀로 고정됩니다. <table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed;"> <tr>     <td>http://www.homejjang.com/09/border_collapse.php</td> </tr> </table> 그러나 아래와 같이 200 픽셀까지만 보이고 그 이상은 화면에 출력되지 않는 현상이 발생합니다. http://www.homejjang.com/09/border_collapse.php 줄바꿈이 일어나게 할려면 word-break:break-all; 속성을 추가적으로 지정해 주면 됩니다. <table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed; word-break:break-all;"> <tr>     <td>http://www.homejjang.com/09/border_collapse.php</td> </tr> </table> 그러면 아래와 같이 테이블은 고정되고 자연스럽게 줄바꿈이 일어납니다. http://www.homejjang.com/09/border_collapse.php

overflow 속성을 사용한 테이블 스크롤 효과

overflow 속성을 사용한 테이블 스크롤 효과는 많은 부분에 응요할 수가 있습니다. 아래와 같이 overflow 속성값을 auto로 지정한 DIV element 사이에 테이블을 입력하면 스크롤이 생깁니다. <table width="300" border="1"> <tr>     <td width="150">이름</td>     <td width="150">성적</td> </tr> </table> <div style="width: 320px; height: 100px; overflow: auto">     <table width="300px" border="1">         <tr>             <td width="150">홍길동</td>             <td width="150">99</td>         </tr>         <tr>             <td width="150">홍길순</td>             <td width="150">95</td>         </tr>         <tr>             <td width="150">김개똥</td>             <td width="150">82</td>         </tr>         <tr>             <td width="150">김철수</td>             <td width="150">80</td>         </tr>         <tr>             <td width="150">김영희</td>             <td width="150">78</td>         </tr>         <tr>             <td width="150">이철수</td>             <td width="150">75</td>         </tr>         <tr>             <td width="150">이영희</td>             <td width="150">60</td>         </tr>     </table> </div> 이와 같은 방식의 테이블이 잘 쓰이지는 않지만 이런식으로도 응용이 가능하다는 걸 보여주기 위함입니다. 이름 성적 홍길동 99 홍길순 95 김개똥 82 김철수 80 김영희 78 이철수 75 이영희 60