[table] colgroup 속성 (span, width 사용하기)

안녕하세요 웹코기입니다.

table을 사용할 때 아주 유용하고 자주 쓰이는 colgroup에 대해 알아보겠습니다. 

 

colgroup이란 'column group' 이라는 뜻인데요, 말그대로 각 열을 묶은 그룹이라는 뜻입니다. 

 

 

 

자 그러면 어떻게 코딩을 해야하는지 먼저 아래의 예를 보면서 배워보겠습니다.

 

<table>
    <colgroup>
        <col style="width: ; background: ;" span="">
        <col style="width: ; background: ;">
        <col style="width: ; background: ;">
    </colgroup>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

 

우선 코딩하는 방법과 위치는 위와 같구요 ~ 이렇게 사용하는 것이 가장 바른 예시라고 할 수 있겠습니다. 하나씩 살펴보도록 하겠습니다.

 

colgroup안에 col 태그는  '각각의 열에 영향'을 줍니다. 

이게 무슨 말이냐 ? 쉽게 말해서 첫번째 <col style=""> 안에 width : 50px 를 주면 각각의 첫번째 td는 모두 영향을 받아 50px가 됩니다.

 

이렇게 colgroup은 모든 열에 한번에 공통된 css를 주고싶을 때 유용합니다. 

 

하지만 colgroup에서 모든 css가 사용되는 것은 아닙니다. 공통으로 적용되는 css는 제가 위에서 적은 것과 같이 width, background 입니다. (적용되는 css가 더 있는 것을 아시는 분은 댓글주세요)

width, background 라도 한번에 적용을 할 수 있어서 .......... colgroup은 편리한 태그라고 생각되고 실제로도 많이 써요 !! 

 

 

그 다음은 span 속성을 볼게요 ~

span은 익숙하신 분들은 예상하시리라 짐작됩니다만 td, th요소에 주는 colspan과 같은 기능을 합니다 !!

 

예를 들어 <col style="width:50px" span="2"> 라고 적었다면, 2개의 열에 width:50px이 되는 것입니다. 그래서

 

span속성은 여러 개의 열에 공통된 css를 주고싶을 때 사용하면 됩니다.