태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

<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>


즉, 이런 식으로 일일이 지정 할 수 밖에 없었습니다. 이 Colgroup, Col 등의 Element 는 이러한 불편을 없애고 Column 전체를 한 번에 Control 할 수 있는 방법을 제공해 줍니다. 이 번 페이지에서는 Column 을 다루는 Element 들에 대해서 알아 봅니다.
Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD  [표 보는 방법] Element     Start tag     End tag     Empty     Deprecated     DTD
COLGROUP           O                 
COL           F     E           
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>


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>


이렇게 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>


이 경우처럼 전체적으로 글씨색이 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>

'웹표준 > Html' 카테고리의 다른 글

HTML 색상표 - HTML BGM color  (0) 2010.08.23
w3c 문서_번역문서  (0) 2010.08.20
COLGROUP | Table Column Group  (0) 2010.08.12
플래쉬 위에 레이어 올리기  (2) 2010.01.26
frameset, frame  (0) 2010.01.11
동영상이 로딩될때까지 이미지 보여주기  (0) 2007.12.06
Posted by 고시랑