TABLE Element Part III | Cell size & Text alignment
Home > Document > HTML > 중급 과정 > Table Part III

페이지 목차

5. Cell의 width와 height 조절하기

앞에서 Cell의 bgcolor 로 Cascading 에 대해 알아 보았습니다. 이번에는 Cell 의 폭(Width)와 높이(Height)를 설정하는 방법에 대해 알아보져. 앞에서 tr에 bgcolor를 주어서 행 전체에 bgcolor를 설정했듯이 tr에 height를 설정하면 그 행 전체에 같은 height가 적용됩니다. width의 경우는 일반적으로 1행의 cell 에 지정한 width가 그 열(column)전체에 적용됩니다. 우선 height 를 조절하기 위해 아래의 굵은 글씨 부분을 추가하고 실행해 봅니다.

입력(height 조절)
<HTML>
    <HEAD>
        <TITLE>2행 3열 테이블</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="90%" align="center">
            <tr height="30"><!-- 1 번째 행 -->
                <td>R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
            </tr>
            <tr height="50"><!-- 2 번째 행 -->
                <td>R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
            </tr>
        </table>
    </BODY>
</HTML>


출력결과
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3

각 행 전체가 지정된 높이가 됩니다. 이번에는 'R1 C1' cell 에 height를 지정해서 Cascading에 대해 확인해 보겠습니다. 아래와 같이 tr에 height="30"을 그대로 둔채 아래의 굵은 글씨 부분을 입력하고 실행합니다.

앞에서 Cell의 bgcolor로 Cascading에 대해 알아 보았습니다만 이번에는 Cell의 폭(Width)와 높이(Height)를 설정하는 방법에 대해 알아보져. 앞에서 tr 에 bgcolor 를 주어서 행 전체에 bgcolor 를 설정했듯이 tr 에 height 를 설정하면 그 행 전체에 같은 height가 적용됩니다. width의 경우는 일반적으로 1행의 cell 에 지정한 width가 그 열(column)전체에 적용됩니다. 아래의 굵은 글씨 부분을 추가하고 실행해 봅니다.

입력(height 조절)
<HTML>
    <HEAD>
        <TITLE>2행 3열 테이블</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="90%" align="center">
            <tr height="30"><!-- 1 번째 행 -->
                <td height="80">R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
            </tr>
            <tr height="50"><!-- 2 번째 행 -->
                <td>R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
            </tr>
        </table>
    </BODY>
</HTML>


출력결과
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3

역시 하위 Tag 인 td 에 지정한 height="80" 이 우선하는 군요. 앞의 bgcolor와 마찬가지로... 이렇게 해서 다시 한 번 Cascading에 대해서 알아 보았습니다. 이러한 Cascading은 속성값을 주는 모든 Element에 예외없이 적용되기 때문에 잘 알아 둘 필요가 있습니다. 각 예제의 입력 부분을 잘 살펴본 사람이라면 각 Tag을 오른족으로 들여쓰기를 했다는 사실을 알고 있을 겁니다. 그냥 폼으로 그렇게 한게 아니라 Cascading 관계를 잘 알아보기 위해서 의도적으로 들여 쓴거죠...^^

이번에는 width 조절에 대해 알아 봅시다. 지금 실습하는 예제는 Table의 width를 90%로 했습니다. 이 90%라는 치수는 자기 자신을 담고 있는 한 단계 상위 Tag의 가로 폭의 90%라는 뜻입니다. 여러분들의 경우는 body Tag이 예제에서의 Table Tag의 한 단계 상위 Tag이 된다는 뜻입니다.

입력(width 조절)
<HTML>
    <HEAD>
        <TITLE>2행 3열 테이블</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="90%" align="center">
            <tr height="30"><!-- 1 번째 행 -->
                <td height="80" width="25%">R1 C1</td>
                <td width="25%">R1 C2</td>
                <td>R1 C3</td>
            </tr>
            <tr height="50"><!-- 2 번째 행 -->
                <td>R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
            </tr>
        </table>
    </BODY>
</HTML>


출력결과
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3

보는 바와 같이 왼족에서 부터 25%, 25%로 width를 주어 테이블을 분할 했습니다. 그렇다면 나머지 C3(column 3)의 width는 얼마일까요? 50%입니다. 전체 테이블의 width를 90% 로 주었기 때문에 흔히들 40% 로 착각하기 쉬운데 Table Tag에 지정한 90%는 Body width의 90%이고, Table 속 Cell의 분할은 다시 100%에서 시작합니다. 이와 같이 상대단위로 값을 주면 브라우저 창의 크기에 따라 폭이 바뀝니다. 이와 같이 나머지 column의 width는 주어도 되고 안 주어도 됩니다. 앞의 Web Image에서 이미지의 width를 각각 절대단위와 상대단위로 주어서 창크기를 조절해 봤던 부분을 참조 하세요. 같은 방법이니까요.

다음은 width를 절대단위로 설정한 예제입니다.
입력
<HTML>
    <HEAD>
        <TITLE>2행 3열 테이블</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="450" align="center">
            <tr height="30" align="center"><!-- 1 번째 행 -->
                <td height="80" width="100">R1 C1</td>
                <td width="150">R1 C2</td>
                <td width="200">R1 C3</td>
            </tr>
            <tr height="50" align="center"><!-- 2 번째 행 -->
                <td>R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3




6. Table 관련 Element (Caption & TH)

TH(Table Header) Element
align
테이블 행의 Cell 또는 Cell 들 속의 내용물의 수평 정렬 ( 공통 속성표 )를 참조. Default : center
예) <tr align="center">
valign
테이블 행의 Cell 또는 Cell 들 속의 내용물의 수직 정렬 ( 공통 속성표 )를 참조
예) <tr valign="baseline">
bgcolor
테이블 행의 Cell 또는 Cell 들 속의 내용물의 배경색, (색상, 길이단위 참조)
예) <tr bgcolor="silver"> , <tr bgcolor="#EEEECC">
height
행의 높이, 사용 단위는 (색상, 길이단위 참조)
예) <tr height="25">
width
행의 너비, 사용 단위는 (색상, 길이단위 참조)
예) <tr height="25" width="150">
nowrap
행속의 셀의 text의 줄바꿈 방지
예) <tr nowrap> , <tr nowrap="nowrap">
bordercolor
행속 Cell 좌우상하의 border 색, 색상값은 (색상, 길이단위 참조)
예) <tr bordercolor="red">
bordercolordark
행속 Cell 우측과 하단의 border 색, 색상값은 (색상, 길이단위 참조)
예) <tr bordercolordark="red" bordercolorlight="blue">
bordercolorlight
행속 Cell 좌측과 상단의 border 색, 색상값은 (색상, 길이단위 참조)
예) <tr bordercolordark="red" bordercolorlight="blue">


Caption Element
align
align(Default : center), class, id 등 (공통 속성표 )를 참조


Caption 과 TH 예제

Caption 은 테이블의 제목(표제)이고, TH(Table Header)은 제목 Cell 에 사용되는 Element 입니다. 마치 <h1></h1> ~ <h6></h6> 이 문서의 제목으로 사용되는 Element인 것 처럼 TH element는 테이블의 제목 Cell 이 되겠습니다. 다음은 Caption 과 TH를 사용한 입력 Source와 출력결과 입니다.

입력
<HTML>
    <HEAD>
        <TITLE>Caption & TH Element</TITLE>
    </HEAD>
    <BODY>
        <table border="1" cellpadding="0" cellspacing="0" width="90%" align="center">
            <caption style="border:1px silver solid;"><B>Caption</B></caption>
            <tr height="30" bgcolor="silver">
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
            <tr height="25">
                <td>R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
            </tr>
            <tr height="25">
                <td>R2 C1</td>
                <td>R2 C2</td>
                <td>R2 C3</td>
            </tr>
            <tr height="25">
                <td>R3 C1</td>
                <td>R3 C2</td>
                <td>R3 C3</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
Caption
Table Heading 1 Table Heading 2 Table Heading 3
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2 R2 C3
R3 C1 R3 C2 R3 C3





7. Cell 속에서의 text 정렬(align : left, center, right / valign : top, middle, bottom)

먼저 Cell 속의 글씨정렬(text-align)에 대해 알아 봅시다. 글씨든지 그림이든지 정렬에는 두가지가 있다는 사실 잘 아시져? 수평정렬(Horizontal alignment)과 수직정렬(Vertical alignment)이 있습니다. align이나 valign을 지정하지 않으면 align은 left가 valign은 middle이 default(기본값)가 된다는 사실은 앞의 Table Part I 의 표에서 설명했으니 잘 아시리라 믿습니다. 아래의 표는 align과 valign 속성을 사용해서 글씨를 정렬한 예입니다.

입력
<HTML>
    <HEAD>
        <TITLE>Cell 속의 text 정렬</TITLE>
    </HEAD>
    <BODY>
        <table border="1" cellpadding="0" cellspacing="0" align="center" width="100%">
            <tr height="100">
                <td valign="top"><B>default</B>, top</td>
                <td align="center" valign="top">center, top</td>
                <td align="right" valign="top">right, top</td>
            </tr>
            <tr height="100">
                <td><B>default</B>, <B>default</B></td>
                <td align="center">center, <B>default</B></td>
                <td align="right">right, <B>default</B></td>
            </tr>
            <tr height="100">
                <td valign="bottom"><B>default</B>, bottom</td>
                <td align="center" valign="bottom">center, bottom</td>
                <td align="right" valign="bottom">right, bottom</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
default, top center, top right, top
default, default center, default right, default
default, bottom center, bottom right, bottom


valign : baseline 정렬

valign 속성의 Keyword 중에서 이제 baseline 하나가 남았군요. baseline 이란 text 의 바닥선을 말합니다. 같은 TR(Table Row)에 있는 Cell 들에서 각각 다른 크기의 글씨를 사용할 경우 Cell 상단(top)에 정렬시키지 않고 글자의 바닥선에 정렬 시킵니다. 이 때 기준은 가장 크기가 큰 글자가 됩니다. 아래의 DHTML은 valign top 과 baseline을 잘 구분해 주고 있읍니다. 'valign' button 위에 마우스 커저를 올려 보시져.

valign="baseline"
R1 C1 R1 C1 R1 C1

글씨가 top 으로 정렬했을 때 글씨의 상단부가 일직선상에 일치하지 않는 이유는 글씨가 클수록 글씨가 차지하는 면적과 순순한 글씨의 면적 사이의 상단부 간격(padding-top)이 넓어지기 때문입니다. 아래의 테이블에서 배경색을 보면 테두리의 상단부는 top에 일치해 있습니다. 글씨의 노란 배경을 보면 글씨으 상단부가 top에 일치하지 않는 이유를 이해가 되리라 생각합니다. 이런 이유에서 일반적으로 글씨의 경우는 Cell의 상단부(top)에 수직정렬 시키기 보다는 주로 'baseline' 에 valign 합니다.


병합된 cell 에서의 수평 정렬

병합된 Cell 에서 text를 수평 정렬할 때는 고려해야 될 사항이 있습니다. 예를 들어 아래와 같이 coding하면

입력
<HTML>
    <HEAD>
        <TITLE>1행을 병합하기 전 상태</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="400" align="center">
            <tr height="50" align="center">
                <td width="200">R1 C1</td>
                <td width="200">R1 C2</td>
            </tr>
            <tr height="50" align="center">
                <td width="200">R2 C1</td>
                <td width="200">R2 C2</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
R1 C1 R1 C2
R2 C1 R2 C2


이런 결과가 나오게 된다는 거 아시져?... 그리고 아래와 같이 Cell을 병합했습니다. 그런데...

입력
<HTML>
    <HEAD>
        <TITLE>1행을 병합하고 난 다음</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="400" align="center">
            <tr height="50" align="center">
                <td width="200" colspan="2">R1 C1</td>
                <!--td width="200">R1 C2</td--><!-- 주석으로 TD 를 쥑였씸더 -->
            </tr>
            <tr height="50" align="center">
                <td width="200">R2 C1</td>
                <td width="200">R2 C2</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
R1 C1
R2 C1 R2 C2

이렇게 출력 결과가 나옵니다. 벌써 눈치를 챈 사람도 있겠지만, Cell을 병합했는데, 글씨가 Cell 전체의 Center로 오지 않는 이유는 1행의

<td width="200" colspan="2">R1 C1</td>

에서 width가 200 으로 지정되었기 때문입니다. 이렇게 width가 200 으로 지정되어 있으면 병합되어 400 이 된 Cell width의 center가 아닌 지정되어 있는 width 200의 center로 정렬이 되져... 이럴 때는

<td width="400" colspan="2">R1 C1</td> 으로 width를 지정하든지 아니면

<td colspan="2">R1 C1</td> 처럼 아예 width를 지정하지 않으면

출력결과
R1 C1
R2 C1 R2 C2


비로소 이렇게 전체 400 width의 center에 정렬이 됩니다. 잘 기억해 두세요...^^

또 다음 페이지에서 Table은 계속 됩니다... The table must go on!... Table은 계속 되어야 한다!!!




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

Top
Back
New
검색