THEAD | TBODY | TFOOT | Table Row Group
Home > Document > HTML > 고급 과정 > Table rowgroup

페이지 목차

Row group

앞 페이지의 Colgroup 이 Column group 을 다루었다면 이번에는 Row group 을 다루는 element 들에 대해서 알아 봅니다. Table Row 의 경우는 TR element 로 하나의 Row를 다루게 되는데, 1 개가 아닌 여러 개의 Row 를 group으로 다루는 element 들이 되겠습니다.

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD  [표 보는 방법]
ElementStart tagEnd tagEmptyDeprecatedDTD
TBODYOO   
THEAD O   
TFOOT O   


TBODY(Table BODY), THEAD(Table HEADer), TFOOT(Table FOOTer) Element
bgcolor
테이블의 배경색, 색상값은 (색상, 길이단위 참조)
예) <tbody bgcolor="silver"> , <thead bgcolor="#EEEECC">
공통 속성 align, class, id, dir, style, lang, valign 등은 ( 공통 속성표 를 참조)


Table Row Group elements
THEAD 테이블의 머리말 부분
TBODY 테이블의 본문 부분
TFOOT 테이블의 꼬리말 부분




예제 1
입력
<HTML>
    <HEAD>
        <TITLE>Table Row Group</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="100%">
            <thead align="center" bgcolor="tomato">
                <tr>
                    <td colspan="3">Table Header</td>
                </tr>
            </thead>
            <tbody bgcolor="gold">
                <tr>
                    <td>R2 C1</td>
                    <td>R2 C2</td>
                    <td>R2 C3</td>
                </tr>
                <tr>
                    <td>R3 C1</td>
                    <td>R3 C2</td>
                    <td>R3 C3</td>
                </tr>
                <tr>
                    <td>R4 C1</td>
                    <td>R4 C2</td>
                    <td>R4 C3</td>
                </tr>
            </tbody>
            <tfoot align="center" bgcolor="palegreen">
                <tr>
                    <td colspan="3">Table Footer</td>
                </tr>
            </tfoot>
        </table>
    </BODY>
</HTML>
출력결과
Table Header
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R4 C1 R4 C2 R4 C3
Table Footer

이와 같이 Table Row group 을 다루는 element 들을 사용하면 여러 개의 Row를 한 번에 다룰 수 있습니다. TBODY 같은 경우 본문을 여러 group으로 나누어 다룰 수도 있습니다. 다음의 예제를 보시져...

입력
<HTML>
    <HEAD>
        <TITLE>TBODY 를 여러 Group 으로 나눈 경우</TITLE>
    </HEAD>
    <BODY>
        <table border="1" cellpadding="0" cellspacing="0" width="100%">		
                <thead align="center">
                    <tr>
                        <td colspan="5">Table Header</td>
                    </tr>
                </thead>
                <tbody bgcolor="gold" align="center">
                <tr>
                    <td>r2 c1</td>
                    <td>r2 c2</td>
                    <td>r2 c3</td>
                    <td>r2 c4</td>
                    <td>r2 c5</td>
                </tr>
                <tr>
                    <td>r3 c1</td>
                    <td>r3 c2</td>
                    <td>r3 c3</td>
                    <td>r3 c4</td>
                    <td>r3 c5</td>
                </tr>
               </tbody>
                <tbody bgcolor="tomato">
                <tr>
                    <td>r4 c1</td>
                    <td>r4 c2</td>
                    <td>r4 c3</td>
                    <td>r4 c4</td>
                    <td>r4 c5</td>
                </tr>
                <tr>
                    <td>r5 c1</td>
                    <td>r5 c2</td>
                    <td>r5 c3</td>
                    <td>r5 c4</td>
                    <td>r5 c5</td>
                </tr>
            </tbody>
            <tbody bgcolor="olive">
                <tr>
                    <td>r6 c1</td>
                    <td>r6 c2</td>
                    <td>r6 c3</td>
                    <td>r6 c4</td>
                    <td>r6 c5</td>
                </tr>
                <tr>
                    <td>r7 c1</td>
                    <td>r7 c2</td>
                    <td>r7 c3</td>
                    <td>r7 c4</td>
                    <td>r7 c5</td>
                </tr>
                <tr>
                    <td>r8 c1</td>
                    <td>r8 c2</td>
                    <td>r8 c3</td>
                    <td>r8 c4</td>
                    <td>r8 c5</td>
                </tr>
            </tbody>
            <tbody bgcolor="beige" align="right">
                <tr>
                    <td>r9 c1</td>
                    <td>r9 c2</td>
                    <td>r9 c3</td>
                    <td>r9 c4</td>
                    <td>r9 c5</td>
                </tr>
                <tr>
                    <td>r10 c1</td>
                    <td>r10 c2</td>
                    <td>r10 c3</td>
                    <td>r10 c4</td>
                    <td>r10 c5</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">Table Footer</td>
                </tr>
            </tfoot>
        </table>
    </BODY>
</HTML>
출력결과
header
r2 c1 r2 c2 r2 c3 r2 c4 r2 c5
r3 c1 r3 c2 r3 c3 r3 c4 r3 c5
r4 c1 r4 c2 r4 c3 r4 c4 r4 c5
r5 c1 r5 c2 r5 c3 r5 c4 r5 c5
r6 c1 r6 c2 r6 c3 r6 c4 r6 c5
r7 c1 r7 c2 r7 c3 r7 c4 r7 c5
r8 c1 r8 c2 r8 c3 r8 c4 r8 c5
r9 c1 r9 c2 r9 c3 r9 c4 r9 c5
r10 c1 r10 c2 r10 c3 r10 c4 r10 c5
Table Footer




Table Element 의 나머지 속성들

TABLE Element
frame
Table border 의 Display 에 관한 속성
void Table border 를 표시하지 않는다.
above Table 의 상단 border 만 표시
below Table 의 하단 border 만 표시
lhs (Left Hand Side)Table 의 왼쪽 border 만 표시
rhs (Right Hand Side)Table 의 오른쪽 border 만 표시
hsides (Horizontal sides)Table 의 상, 하단 border 만 표시
vsides (Vertical sides)Table 의 좌, 우단 border 만 표시
border Table 의 4면 border 모두 표시
rules
Table Cell border 의 Display 에 관한 속성
cols 수직 Cell border 만 표시한다.
rows 수평 Cell border 만 표시한다.
groups Colgroup, Tbody 등 group 간의 경계선 만 표시한다.
none Cell border 를 표시하지 않는다.
all Cell border 를 모두 표시한다.




frame attribute

Table Tag 의 frame 속성에 아래와 같이 각각의 Keyword 를 대입한 결과입니다.

frame="above" frame="below" frame="hsides" frame="vsides"
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
frame="lhs" frame="rhs" frame="void" frame="border"
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3



rules attribute

아래의 Source 를 예제로 설명합니다.

입력
<HTML>
    <HEAD>
        <TITLE>rules attribute</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="100%" rules="cols | rows | groups | all | none">
            <thead align="center" bgcolor="tomato">
                <tr>
                    <td>R1 C1</td>
                    <td>R1 C2</td>
                    <td>R1 C3</td>
                </tr>
            </thead>
            <tbody bgcolor="gold">
                <tr>
                    <td>R2 C1</td>
                    <td>R2 C2</td>
                    <td>R2 C3</td>
                </tr>
                <tr>
                    <td>R3 C1</td>
                    <td>R3 C2</td>
                    <td>R3 C3</td>
                </tr>
                <tr>
                    <td>R4 C1</td>
                    <td>R4 C2</td>
                    <td>R4 C3</td>
                </tr>
            </tbody>
            <tfoot align="center" bgcolor="palegreen">
                <tr>
                    <td>R5 C1</td>
                    <td>R5 C2</td>
                    <td>R5 C3</td>
                </tr>            
            </tfoot>
        </table>
    </BODY>
</HTML>


출력결과 - rules="cols" - 수직 Cell border 만 표시한다.
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R4 C1 R4 C2 R4 C3
R5 C1 R5 C2 R5 C3


출력결과 - rules="rows" - 수평 Cell border 만 표시한다.
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R4 C1 R4 C2 R4 C3
R5 C1 R5 C2 R5 C3


출력결과 - rules="groups" - group 간의 경계선 만 표시한다.
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R4 C1 R4 C2 R4 C3
R5 C1 R5 C2 R5 C3


출력결과 - rules="all" - 모든 border 를 표시한다.
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R4 C1 R4 C2 R4 C3
R5 C1 R5 C2 R5 C3


출력결과 - rules="none" - 아무런 border 도 표시하지 않는다.
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3
R4 C1 R4 C2 R4 C3
R5 C1 R5 C2 R5 C3





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

Top
Back
New
검색