[CSS] 11. Table ( 테이블 설정 )

이번 포스팅에서는 CSS를 이용한 테이블 관련 속성을 설정하는 것을 알아보도록 하겠습니다.

테이블 관련 속성에는 다음과 같은 것들이 있습니다. 

• border-collapse

• border-spacing 

• caption-side 

• empty-cells 

• table-layout 

 

이제 이 속성들을 어떻게 사용하는지 한번 볼까요??? ^-^ 

The border-collapse Property:

이 속성은 다음 두가지 값을 가질 수 있습니다. collapse 와 separate.  

다음은 두 가지 값에 대한 예제입니다. 

<style type="text/css"> table.one {border-collapse:collapse;} table.two {border-collapse:separate;} td.a { border-style:dotted; border-width:3px; border-color:#000000; padding: 10px; } td.b {border-style:solid; border-width:3px; border-color:#333333; padding:10px; } </style> <table class="one"> <caption>Collapse Border Example</caption> <tr><td class="a"> Cell A Collapse Example</td></tr> <tr><td class="b"> Cell B Collapse Example</td></tr> </table> <br /> <table class="two"> <caption>Separate Border Example</caption> <tr><td class="a"> Cell A Separate Example</td></tr> <tr><td class="b"> Cell B Separate Example</td></tr> </table>

직접 테스트 해보세요.

 

Collapse 속성값을 주게되면 테이블 내의 셀들의 보더가 붙어있을 경우 한줄로 보이게 됩니다.

반대로 separate속성값을 주게되면 붙어있는 두 셀의 보더가 따로 떨어져서 보이게 됩니다.

 

 

 

The border-spacing Property:

이 속성은 보더 사이의 간격을 띄우는 속성입니다. 속성값으로는 하나 또는 두개의 값을 가질 수 있고, 이 값은 길이의 단위여야 합니다.

값을 하나만 줄 경우에는 가로, 세로에 동일한 값이 적용이 되며 두개의 값을 줄 경우에는 첫째값이 가로 스페이스, 두번째 값이 세로 스페이스를 위한 값으로 간주됩니다.

NOTE: Netscape 7 또는 IE 6 에서는 적용되지 않는다고 하네요. 아직도 IE 6 사용하는 사람이 있을지는 의문이지만요. 

<style type="text/css"> /* If you provide one value */ table.example {border-spacing:10px;} /* This is how you can provide two values */ table.example {border-spacing:10px; 15px;} </style>

앞서 했던 예제의 소스를 변경해보도록 하겠습니다. 

<style type="text/css"> table.one { border-collapse:separate; width:400px; border-spacing:10px; } table.two { border-collapse:separate; width:400px; border-spacing:10px 50px; } </style> <table class="one" border="1"> <caption>Separate Border Example with border-spacing</caption> <tr><td> Cell A Collapse Example</td></tr> <tr><td> Cell B Collapse Example</td></tr> </table> <br /> <table class="two" border="1"> <caption>Separate Border Example with border-spacing</caption> <tr><td> Cell A Separate Example</td></tr> <tr><td> Cell B Separate Example</td></tr> </table>

결과는 아래와 같습니다.

 

직접 테스트 해보는 것 잊지 마세요. 꼭 이요!!! ^-^ 

 

The caption-side Property:

이 속성은 캡션을 어디에 위치시킬 것인지에 대한 속성입니다. 속성값으로는 다음 네가지 중 한개를 가질 수 있습니다. top, bottom, left or right.  그럼 각각의 예제를 한번 볼까요?? 

NOTE: IE 에서는 작동을 안할 수 있다는 군요.

<style type="text/css"> caption.top {caption-side:top} caption.bottom {caption-side:bottom} caption.left {caption-side:left} caption.right {caption-side:right} </style> <table style="width:400px; border:1px solid black;"> <caption class="top"> This caption will appear at the top </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style="width:400px; border:1px solid black;"> <caption class="bottom"> This caption will appear at the bottom </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style="width:400px; border:1px solid black;"> <caption class="left"> This caption will appear at the left </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style="width:400px; border:1px solid black;"> <caption class="right"> This caption will appear at the right </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table>

결과는 아래와 같습니다.

 

 

 

The empty-cells Property:

이 속성은 빈 셀과 관련된 속성입니다. 속성값으로는 show, hide, inherit 중에 하나를 가질 수 있습니다. 

<style type="text/css"> table.empty{ width:350px; border-collapse:separate; empty-cells:hide; } td.empty{ padding:5px; border-style:solid; border-width:1px; border-color:#999999; } </style> <table class="empty"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td class="empty">value</td> <td class="empty">value</td> </tr> <tr> <th>Row Title</th> <td class="empty">value</td> <td class="empty"></td> </tr> </table>

 

 

결과는 아래와 같습니다. 

 

 

 

The table-layout Property:

이 속성은 브라우저에 테이블을 보여줄 때 어떻게 보여줄 것인지를 컨트롤 할 수 있게 해주는 속성입니다. 속성값으로는 fixed, auto, 또는 inherit 을 가질 수 있습니다.

 

세가지 값에 대한 차이점을 한번 알아보도록 하죠. 

NOTE: 참고로 이 속성은 많은 브라우저에서 지원하지 않는다고 합니다.

<style type="text/css"> table.auto { table-layout: auto } table.fixed { table-layout: fixed } </style> <table class="auto" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <br /> <table class="fixed" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table>

결과는 아래와 같습니다.

 

 

 

 

꼭 스스로 테스트 해보고 결과를 확인하세요.  

 

브라우저 별로 해보고 브라우저의 버전별로 해보고 열심히 공부해야 고수가 될 수 있습니다.

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_tables.htm