[css] CSS를 이용한 table 응용

출처: http://www.homejjang.com/09/css_table.php 입니다.

HTML은 간단한 마크업 언어이기 때문에 더이상 확장하기가 힘듭니다. 반면 CSS는 계속 확장하고 있고 응용을 할 부분도 더 많습니다.

최근 Ajax와 같은 새로운 웹개발 방법이 나오면서 보다 동적인 웹을 구현할려는 방향으로 흐르고 있습니다. 이런 분위기는 CSS의 위상을 한층 높여주고 있습니다.

CSS를 이용한 table 응용

table에 사용하는 CSS 속성 중 대표적인 것은 border-collapse와 table-layout 입니다.

border-collapse

일반적으로 테이블에 border값을 지정하면 다소 투박한 border가 나옵니다.

cellspacing값을 0으로 지정한 경우

cellspacing을 사용하더라도 아래와 같이 나옵니다.

cellspacing값을 2로 지정한 경우

border-collapse 속성값을 collapse로 지정하면 아래와 같이 깔끔한 단선으로 처리됩니다.

<table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse;" bordercolor="gray"> <tr> <td>border-collapse 속성값을 collapse로 지정한 경우</td> </tr> </table>

이 때 bordercolor 속성값도 함께 지정합니다.

border-collapse 속성값을 collapse로 지정한 경우

 

table-layout

table-layout 속성은 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지합니다.

보통 셀안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어납니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center"> <tr> <td>셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.</td> </tr> </table>

셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.

 

그러나 셀안의 내용이 공백이 없는 영문이나 숫자인 경우 셀이 지정한 너비 이상으로

밀려버립니다.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

이때  table-layout 속성값을 fixed로 지정하면 셀이 늘어나는것을 방지할 수 있습니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed;"> <tr> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> </tr> </table>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

그러나 문제는 줄바꿈이 일어나지 않고 내용의 일부가 보이지 않습니다. 그러므로 테이블이

깨지면 안되는 경우에만 사용해야 합니다.(파이어폭스에서는 셀 경계선을 넘어서 보입니다.

근데 이게 더 이상합니다.^^;)

CSS는 특히 웹브라우저간에 지원하는 부분이 다르므로 파이어폭스와 IE에서 동시에

확인해 봐야 합니다.