COLGROUP | Table Column Group
Home > Document > HTML > 고급 과정 > Table colgroup

페이지 목차

Colgroup

다시 Table 을 다루는 페이지로군요. 앞에서 Table을 만들면서 이런 불편을 느꼈을 지도 모르겠습니다. TR(Table Row) Element 의 경우는 <TR> Tag에 bgcolor, height, align, valign 등을 설정하면 그 row의 전체 Cell 들에 같은 설정이 되었지만 Column 의 경우는 컬럼 전체를 한 번에 다룰 수 있는 방법이 없어서 같은 bgcolor를 column 전체에 지정하기 위해서 아래의 예와 같이 3행 3열의 Table 의 Column 1 에 해당하는 Cell 마다 bgcolor를 지정하게 됩니다.

입력
<HTML>
    <HEAD>
        <TITLE> 현재 알고 있는 방법으로 Column 에 같은 bgcolor 를 지정할 경우</TITLE>
    </HEAD>
    <BODY>
        <table width="100%" border="1">
            <tr>
                <td bgcolor="gold">R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
            </tr>
            <tr>
                <td bgcolor="gold">R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
            </tr>
            <tr>
                <td bgcolor="gold">R3 C1</td>
                <td>R3 C2</td>
                <td>R3 C3</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3

즉, 이런 식으로 일일이 지정 할 수 밖에 없었습니다. 이 Colgroup, Col 등의 Element 는 이러한 불편을 없애고 Column 전체를 한 번에 Control 할 수 있는 방법을 제공해 줍니다. 이 번 페이지에서는 Column 을 다루는 Element 들에 대해서 알아 봅니다.


Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD  [표 보는 방법]
ElementStart tagEnd tagEmptyDeprecatedDTD
COLGROUP O   
COL FE  


COLGROUP, COL Element
span
사용할 column 갯수
예) <colgroup span="2"> , <col span="3">
width
절대단위 | 상대단위   테이블전체의 가로 크기, 사용 단위는 (색상, 길이단위 참조)
예) <colgroup width="600"> , <col width="90%">
bgcolor
테이블 Column group의 배경색, 색상값은 (색상, 길이단위 참조)
예) <colgroup bgcolor="silver"> , <col bgcolor="#EEEECC">
공통 속성 align, class, id, dir, style, lang, valign 등은 ( 공통 속성표 를 참조)




Col Element 예제

다음의 3행 4열 테이블로 col Element 의 예제를 해 봅시다.

입력
<HTML>
    <HEAD>
        <TITLE>Col Element 를 사용한 Column 다루기</TITLE>
    </HEAD>
    <BODY>
        <table width="100%" border="1">
                <COL bgcolor="gold" align="center">
                <COL span="2" bgcolor="tomato"><!-- 2개의 column 을 사용 -->
                <COL bgcolor="palegreen">
            <tr>
                <td>R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
                <td>R1 C4</td>
            </tr>
            <tr>
                <td>R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
                <td>R2 C4</td>
            </tr>
            <tr>
                <td>R3 C1</td>
                <td>R3 C2</td>
                <td>R3 C3</td>
                <td>R3 C4</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
R1 C1 R1 C2 R1 C3 R1 C4
R2 C1 R2 C2 R2 C3 R2 C4
R3 C1 R3 C2 R3 C3 R3 C4

Source code 를 보면 굵은 글씨로 된 Col Element 부분 중 첫 번째 col 은 span 속성을 사용하지 않았으므로 1번 Column 1개를 사용하고, 두 번째 col 에 span="2" 가 지정되어 있으므로 2, 3번 Column 2개를 3 번째 col도 span 속성을 사용하지 않았기 때문에 4 번 Column 1개, 이렇게 총 4 개의 Column 1개, 2개, 1개로 분할하여 column 을 지정하였습니다.




Colgroup, Col element 의 위치는 어디인가?

Colgroup과 Col element 의 위치는 결론부터 말하자면 자기 맘대로 입니다. 물론 아무대나 라는게 아니고, Table tag 속에서 가장 먼저 나와야 될 필요는 없다는 뜻입니다. 다만 Table tag 바로 밑에 오지 않을 경우에는 </TR>과 <TR> 사이 이기만 하면 어느 곳이건 상관 없습니다. 아래와 같이 1행과 2행 사이에 위치하면

입력
<HTML>
    <HEAD>
        <TITLE>Col Element 를 사용한 Column 다루기</TITLE>
    </HEAD>
    <BODY>
        <table width="100%" border="1">
            <tr>
                <td>R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
                <td>R1 C4</td>
            </tr>
                <COL bgcolor="gold" align="center">
                <COL span="2" bgcolor="tomato"><!-- 2개의 column 을 사용 -->
                <COL bgcolor="palegreen">
            <tr>
                <td>R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
                <td>R2 C4</td>
            </tr>
            <tr>
                <td>R3 C1</td>
                <td>R3 C2</td>
                <td>R3 C3</td>
                <td>R3 C4</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
R1 C1 R1 C2 R1 C3 R1 C4
R2 C1 R2 C2 R2 C3 R2 C4
R3 C1 R3 C2 R3 C3 R3 C4

이렇게 Colgroup 또는 Col element 가 나오는 이후 부터 적용됩니다.




Colgroup Element 예제 1

앞의 col Element 가 column 하나 하나에 대한 설정을 하는 element 였다면 Colgroup element 는 column 이 하나건 둘이건 column 전체를 group 으로 지정하는 element 입니다. Colgroup element 는 특히 Table 전체에 공통적으로 적용시켜야 될 속성이 있고, column 마다 따로 지정해야 될 속성이 있을 때 사용된 COL element 들을 COLGROUP element 로 묶어서 사용합니다. 아래는 Source code...

입력
<HTML>
    <HEAD>
        <TITLE>Colgroup Element 를 사용한 Column 다루기</TITLE>
    </HEAD>
    <BODY>
        <table width="100%" border="1">
                <COLGROUP align="center" style="color: blue;">
                <COL bgcolor="gold" align="left">
                <COL span="2" bgcolor="tomato">
                <COL bgcolor="palegreen">
                </COLGROUP>
            <tr>
                <td>R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
                <td>R1 C4</td>
            </tr>
            <tr>
                <td>R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
                <td>R2 C4</td>
            </tr>
            <tr>
                <td>R3 C1</td>
                <td>R3 C2</td>
                <td>R3 C3</td>
                <td>R3 C4</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
R1 C1 R1 C2 R1 C3 R1 C4
R2 C1 R2 C2 R2 C3 R2 C4
R3 C1 R3 C2 R3 C3 R3 C4

이 경우처럼 전체적으로 글씨색이 blue, 글자정렬이 center 이고, Column 1 의 경우만 글자 정렬을 왼쪽 맞춤할 경우 Colgroup element 에 글씨색과 글자정렬을 지정하고 예외적인 Column 은 Col element 를 사용하여 해당 Column 에 따로 지정합니다.



Colgroup Element 예제 2

이번에는 Col element 대신 전부 Colgroup element 로 대체 시켰을 경우를 생각해 보져. Code를 실행 시켜보면 알겠지만 아무런 차이도 없습니다만, 뒤에 나올 Table 속성 중 rules 속성에서 차이를 보입니다.

입력
<HTML>
    <HEAD>
        <TITLE>Colgroup Element 를 사용한 Column 다루기</TITLE>
    </HEAD>
    <BODY>
        <table width="100%" border="1">
                <COLGROUP bgcolor="gold" align="left">
                <COLGROUP span="2" bgcolor="tomato">
                <COLGROUP bgcolor="palegreen">
            <tr>
                <td>R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
                <td>R1 C4</td>
            </tr>
            <tr>
                <td>R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
                <td>R2 C4</td>
            </tr>
            <tr>
                <td>R3 C1</td>
                <td>R3 C2</td>
                <td>R3 C3</td>
                <td>R3 C4</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
R1 C1 R1 C2 R1 C3 R1 C4
R2 C1 R2 C2 R2 C3 R2 C4
R3 C1 R3 C2 R3 C3 R3 C4


다음 페이지의 Row group 에서 계속...




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색