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 [표 보는 방법]
Element	Start tag	End tag	Empty	Deprecated	DTD
TBODY	O	O
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

Top

Back

New

검색