TABLE Element Part II | Cascading with Rows & Column
Home > Document > HTML > 중급 과정 > Table Part II

페이지 목차

1. 행(Row)과 열(Column)

이번에는 행과 열에 대해서 알아 보겠습니다. 먼저 아래의 문서 구조를 봅시다. 명료하게 보기 위해 Table Tag만 넣었습니다. 사실 초보자나 초보자가 아니더라도 테이블을 좀 힘들어하는 사람이 의외로 많은데, 그 이유는 아래의 테이블을 이루고 있는 Element 중에서 TD Element 를 보면 위에서 아래로 즉, 세로 방향으로 나열되어 있습니다. 그런데 실제로 테이블의 Cell은 왼쪽에서 오른쪽으로 즉, 가로 방향으로 진행하게 되져... 이러다 보니 Tag을 보면서 머리 속으로 전체적인 윤곽을 떠 올릴 수 있는 공간감이 좋은 사람은 어려움 없이 테이블을 만들지만 그렇지 못한 경우는 점점 헤매게 되져. 물론 아래의 2행 2열 짜리 표에서는 그럴 일이 없지만 말이져. Cell이 많아지고 거기다 Cell 을 병합하고 하다 보면 사실 단번에 작업할 수 있는 만만한 넘이 결코 아니져. 그러나 앞에서도 말했지만 많은 경험을 하다보면 충분히 극복할 수 있습니다. Body Tag 사이에 아래의 내용을 Coding 하고 실행하면 아래의 출력 결과를 볼 수 있습니다.

입력
  <?xml version="1.0" encoding="euc-kr" ?>
- <table border="2" cellspacing="5" cellpadding="10" align="center">
- <tr>
<!--
 첫번째 Table Row 
  -->
  <td>1행(row) 1열(column)</td>
  <td>1행(row) 2열(column)</td>
  </tr>
- <tr>
<!--
 두번째 Table Row 
  -->
  <td>2행(row) 1열(column)</td>
  <td>2행(row) 2열(column)</td>
  </tr>
  </table>



출력결과  
Row & Column
1행(row) 1열(column)1행(row) 2열(column)
2행(row) 1열(column)2행(row) 2열(column)


Row 1 Row 2 Column 1 Column 2

이 출력 결과로 알 수 있는 사실이 하나 있는데, 그건 바로 테이블의 배경색에 관한 겁니다. 여러분들이 Body Tag에 배경색(bgcolor)을 따로 지정하지 않았다면 기본색인 white 가 테이블의 배경색이 되져. 바로 이 배경색을 예로 아래의 Cascading에 대해 알아 보기로 하겠습니다. 그리고 위의 DHTML로 Row와 Column에 대해 확실히 이해 하시길...^^



2. Table로 알아보는 HTML Element의 Cascading 규칙

우선 Cascading 이 무슨 뜻인지 알아야 되겠군요. Cascading 이란 몇 가지 뜻이 있지만 여기서는 '계단형 폭포수' 라는 뜻으로 해석합니다. 즉, 계단형으로 생긴 구조에 물이 흘러 내린다는 뜻이죠. 왜 이런 표현을 썼는지 아래의 문서 구조를 보시죠.

입력
  <?xml version="1.0" encoding="euc-kr" ?>
- <BODY>
- <table>
- <tr>
  <td>Cell</td>
  </tr>
  </table>
  </BODY>

가장 상위 Element인 body, table, tr, td 순으로 서열이 정해져 있습니다. 이러한 순서가 무엇을 의미하는가 하느냐를 알아보죠. Body Tag 사이에 아래와 같이 붉은 글씨 부분을 입력하고 출력해 보시죠.


입력
<HTML>
    <HEAD>
        <TITLE>Table의 배경색으로 알아보는 HTML Element의 Cascading 규칙</TITLE>
    </HEAD>
    <BODY bgcolor="wheat">
        <table border="2" cellspacing="5" cellpadding="10" align="center">
            <tr>
                <td>1행(row) 1열(column)</td>
                <td>1행(row) 2열(column)</td>
            </tr>
            <tr>
                <td>2행(row) 1열(column)</td>
                <td>2행(row) 2열(column)</td>
            </tr>
        </table>    
    </BODY>
</HTML>
출력결과
1행(row) 1열(column) 1행(row) 2열(column)
2행(row) 1열(column) 2행(row) 2열(column)

위와 같이 body Tag 에 지정한 bgcolor 가 테이블 전체에 상속되어 테이블의 bgcolor 도 'wheat' 가 됩니다. 그 이유는 뒤의 HTML 고급 과정 중 iframe 부분에서 설명하게 되겠지만 body 부분에 들어가는 Block-Level Element 들은 해당 Tag 에 배경색을 지정하지 않는 이상 모두 투명색(transparent color) 를 가지기 때문이져. 즉, 상위 Tag 에 지정된 배경색이 하위 Tag 투명색에 의해서 그대로 비춰보이게 되어 있습니다.

입력
<HTML>
    <HEAD>
        <TITLE>Table의 배경색으로 알아보는 HTML Element의 Cascading 규칙</TITLE>
    </HEAD>
    <BODY bgcolor="wheat">
        <table border="2" cellspacing="5" cellpadding="10" align="center" bgcolor="gold">
            <tr>
                <td>1행(row) 1열(column)</td>
                <td>1행(row) 2열(column)</td>
            </tr>
            <tr>
                <td>2행(row) 1열(column)</td>
                <td>2행(row) 2열(column)</td>
            </tr>
        </table>    
    </BODY>
</HTML>
출력결과
1행(row) 1열(column) 1행(row) 2열(column)
2행(row) 1열(column) 2행(row) 2열(column)

이 결과를 보면 border를 뺀 테이블 전체의 배경색이 gold가 된 것을 알 수 있습니다. 물론 Table Tag보다 상위인 Body Tag에 배경색을 지정했더라도 말이죠. 즉, 가장 상위 Element인 Table Tag에 지정한 배경색이 하위 Element인 tr과 td에 지정되었다는 사실이져. 그게 머가 그렇게 중요하냐고 생각할지 몰라도 아주 중요합니다. 이러한 개념을 바로 Cascading이라고 하죠. 상위 Tag에 배경색을 지정하고 하위 Tag에는 지정하지 않았을 경우 그 상위 Tag에 지정된 배경색이 하위 Tag에 적용된다는 것인데, 이러게 상위에서 하위로 속성값이 전달되는 것을 상속(Inheritance)라고 합니다. 맨위에서도 보았지만 Table Tag에 배경색을 지정하지 않았을 때는 어땠죠? 그 때는 body Tag에 지정된 bgcolor 속성을 물려 받았죠... 그러면 이번엔 상위와 하위에 모두 같은 속성을 지정할 경우 즉 하위가 상위의 상속을 거부할 경우에 어떻게 되나 보져. 아래와 같이 tr에 굵은 글씨 부분을 추가하고 출력해 보세요.

입력
<HTML>
    <HEAD>
        <TITLE>Table의 배경색으로 알아보는 HTML Element의 Cascading 규칙</TITLE>
    </HEAD>
    <BODY bgcolor="wheat">
        <table border="2" cellspacing="5" cellpadding="10" align="center" bgcolor="gold">
            <tr bgcolor="royalblue">
                <td>1행(row) 1열(column)</td>
                <td>1행(row) 2열(column)</td>
            </tr>
            <tr>
                <td>2행(row) 1열(column)</td>
                <td>2행(row) 2열(column)</td>
            </tr>
        </table>    
    </BODY>
</HTML>

출력결과
1행(row) 1열(column) 1행(row) 2열(column)
2행(row) 1열(column) 2행(row) 2열(column)

예, 이렇게 같은 속성을 상위의 Table Tag과 하위의 Tr Tag에 지정했을 경우 상위의 값을 상속받지 않고 지정된 값이 적용됩니다. 그럼 이번에도 아래의 굵은 글씨를 추가하고 출력하져.

입력
<HTML>
    <HEAD>
        <TITLE>Table의 배경색으로 알아보는 HTML Element의 Cascading 규칙</TITLE>
    </HEAD>
    <BODY bgcolor="wheat">
        <table border="2" cellspacing="5" cellpadding="10" align="center" bgcolor="gold">
            <tr bgcolor="royalblue">
                <td bgcolor="coral">1행(row) 1열(column)</td>
                <td>1행(row) 2열(column)</td>
            </tr>
            <tr bgcolor="brown">
                <td>2행(row) 1열(column)</td>
                <td bgcolor="palegreen">2행(row) 2열(column)</td>
            </tr>
        </table>    
    </BODY>
</HTML>
출력결과
1행(row) 1열(column) 1행(row) 2열(column)
2행(row) 1열(column) 2행(row) 2열(column)

위의 결과를 보면 지정된 속성값이 없으면 상위에서 상속받고, 있으면 그 값이 적용된다는 것을 알 수 있습니다. 그렇다면 테이블의 전체 면적은 Cellspacing을 주어서 생긴 노란색 부분이 되겠군요.

입력
<HTML>
    <HEAD>
        <TITLE>Table의 배경색으로 알아보는 HTML Element의 Cascading 규칙</TITLE>
    </HEAD>
    <BODY bgcolor="wheat">
        <table border="2" cellspacing="0" cellpadding="10" align="center" bgcolor="gold">
            <tr bgcolor="royalblue">
                <td bgcolor="coral">1행(row) 1열(column)</td>
                <td>1행(row) 2열(column)</td>
            </tr>
            <tr bgcolor="brown">
                <td>2행(row) 1열(column)</td>
                <td bgcolor="palegreen">2행(row) 2열(column)</td>
            </tr>
        </table>
    </BODY>
</HTML>

출력결과
1행(row) 1열(column) 1행(row) 2열(column)
2행(row) 1열(column) 2행(row) 2열(column)

위와 같이 Cellspacing을 0으로 주면 테이블의 배경색은 사라집니다. 하지만 사실 밑 바탕에는 노란색이 칠해져 있습니다. Cell에 가려서 안 보일 뿐이져...



3. Parser 와 Renderer

우리가 사용하는 브라우저에는 Parser와 Renderer라는게 탑재되어있습니다. 이번에는 이 두가지의 역할에 대해서 알아보져. 이 두가지의 역할은 우리가 Coding한 문서를 출력시켜주는 기능을 하는데 작성한 문서를 브라우저로 출력시키면 우선

  • Parser가 실행할 문서를 위에서 아래로 읽으면서 문서에 있는 각 Tag에 담긴 정보를 정리하게 되는데, 그 때 정리되는 순서는 위에서 말한 Cascading 규칙에 의해 정리를 하고 그게 끝나면 그 정보를 브라우저의


  • Renderer가 브라우저 창(Canvas라고도 합니다.)에 Rendering을 하는데, 역시 Cascading 순서대로 하게 되져. 위의 테이블 예제에서도 보았지만, 가장 상위 Tag에 지정된 배경색을 칠하고, 한 단계 하위 또 한 단계 하위 하는식으로 칠을 하게 되는거져. 즉, 하위 Tag에 지정된 배경색들은 덧칠이 되는 셈이져. 하위에 지정된 배경색을 빼놓고 칠하는게 아니고 말이져...

이러한 Cascading의 상속 이라는 개념은 뒤에 나올 CSS(Cascading Style Sheet)에서도 똑 같이 적용되기 때문에 확실한 이해와 개념 정리가 필요합니다. 어째 쩜 이해가 되셨습니까?



4. Cell 합치기 (colspan & rowspan Attribute)

테이블을 사용할 때 항상 바둑판 모양으로만 사용하지는 않습니다. 필요에 따라서는 수평이나 수직으로 Cell을 합치게 되는데... 아래의 두 가지 종류를 예를 들면 왼쪽 테이블은 첫번째 이 좌우로 병합되었고, 오른쪽 테이블은 첫번째 이 상하로 병합된 모양입니다. 사실 테이블을 바둑판 모양으로 그냥 사용하는 경우보다 병합해서 사용하는 경우가 오히려 많을지도 모르겠습니다. 행과 열에 대해서는 이 페이지 첫 부분에서 잘 이해했으리라 생각하지만 행이 Row이고 열이 Column 입니다. 혹시 헷갈리면 Column은 영어로 기둥이고 기둥은 수직으로 서있다는 걸 생각하면 되겠습니다.

R1 C1
R2 C1 R2 C2
R1 C1 R1 C2
R2 C2



Cell을 좌우로 병합하기
입력
<HTML>
    <HEAD>
        <TITLE>Cell 병합하기</TITLE>
    </HEAD>
    <BODY>
        <table border="2" cellspacing="0" cellpadding="10" align="center" bgcolor="gold">
            <tr>
                <td colspan="2">1행(row) 1열(column)</td>
            </tr>
            <tr>
                <td>2행(row) 1열(column)</td>
                <td>2행(row) 2열(column)</td>
            </tr>
        </table>    
    </BODY>
</HTML>

출력결과
1행(row) 1열(column)
2행(row) 1열(column) 2행(row) 2열(column)

위의 소스 중에서 colspan="2"column span(칸) 이라는 뜻으로 열을 2칸 사용하겠다는 선언인 셈이져.

Cell을 상하로 병합하기
입력
<HTML>
    <HEAD>
        <TITLE>Cell을 상하로 병합하기</TITLE>
    </HEAD>
    <BODY>
        <table border="2" cellspacing="0" cellpadding="10" align="center" bgcolor="gold">
            <tr>
                <td rowspan="2">1행(row) 1열(column)</td>
                <td>1행(row) 2열(column)</td>
            </tr>
            <tr>
                <td>2행(row) 2열(column)</td>
            </tr>
        </table>    
    </BODY>
</HTML>

출력결과
1행(row) 1열(column) 1행(row) 2열(column)
2행(row) 2열(column)

위의 소스 중에서 rowspan="2"row span(칸) 이라는 뜻으로 행을 2칸 사용하겠다는 선언입니다. 이 Cell 병합은 항상 왼쪽 Cell이 오른쪽 Cell을, 윗쪽 Cell이 아래쪽 Cell을 병합합니다. 잘 기억해 두세요.

이번에는 약간 난이도를 높여서 2행 3열 짜리 테이블을 만들어 보져... 새문서를 시작해서 Coding하세요. 아래의 내용중 'R1 C1'은 'Row1 Column1' 의 약자로 1행 1열이라는 뜻이고, <!-- 주석 -->도 적절히 붙히는 연습을 하세요.

입력
<HTML>
    <HEAD>
        <TITLE>2행 3열 테이블</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="90%" align="center">
            <tr><!-- 1 번째 행 -->
                <td>R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
            </tr>
            <tr><!-- 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





헛갈리지 않고 Cell을 병합하는 방법 한 가지.

앞에서도 언급했지만 이 Cell 병합이라는 넘... 참 만만치 않은 넘이져... 저도 어떤 때는 헷갈려서 한참을 헤메곤 하죠. 이렇게 헛 갈리는 가장 큰 이유는 병합 당한 Cell이 없어지기 때문에 없어진 <td>...</td>가 어떤 건지가 초보자에겐 감이 즉시 오지 않기 때문입니다. 그래~서... 한 가지 요령을 소개할까 합니다. 결론부터 말하면 <!-- 주석 -->을 이용하여 병합 당하여 없어질 <td>...</td>를 무효화 시키는 거져... 이번에는 출력결과를 먼저 보시져.

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


위의 출력결과의 Source
<HTML>
    <HEAD>
        <TITLE>초보자를 위한 Ballard</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="90%" align="center">
            <tr>
                <td rowspan="2">R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
            </tr>
            <tr>
                <!--td>R2 C1</td--><!-- R1 C1에 의해서 rowspan을 병합 당함. -->
                <td colspan="2">R2 C2</td>
                <!--td>R2 C3</td--><!-- R2 C2에 의해서 colspan을 병합 당함. -->
            </tr>
        </table>
    </BODY>
</HTML>

위의 Source code를 보면 굵은 글씨로 처리한 <!--td>R2 C1</td--><!--td>R2 C3</td-->를 눈여겨 보면 이 부분이 주석으로 처리되었다는 것을 알 수 있져? 이렇게 td Tag을 아예 지워버릴 것이 아니라 주석으로 처리하면 어떤 Cell이 어떤 Cell을 병합 했는지 한 눈에 알 수 있습니다. 앞의 Table Part I 페이지에서 주석문에 대해 설명을 했지만 주석(Comment) Tag 속에 들어간 내용은 브라우저 창에 출력하지 않는다고 했습니다. 이제 윗 부분에서 Parsing 이라는 것을 배웠으니까 다시 한 번 새롭게 정의를 내리겠습니다.

주석문
"<!--" 에서 "-->" 사이의 내용은 Parsing 하지 말 것




몇가지의 Cell 병합 예제

1. 3행 2열

출력결과 1
R1 C1
R2 C1 R2 C2
R3 C2
Source Code 1
<HTML>
    <HEAD>
        <TITLE>Cell 병합 예제 1 (3행 2열)</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="90%" align="center">
            <tr>
                <td colspan="2">R1 C1</td>
                <!--td>R1 C2</td--><!-- R1 C1에 의해서 colspan 병합됨 -->
            </tr>
            <tr>
                <td rowspan="2">R2 C1</td>
                <td>R2 C2</td>
            </tr>
            <tr>
                <!--td>R3 C1</td--><!-- R2 C1에 의해서 rowspan 병합됨 -->
                <td>R3 C2</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과 2
R1 C1 R1 C2
R2 C2
R3 C1
Source Code 2
<HTML>
    <HEAD>
        <TITLE>Cell 병합 예제 2 (3행 2열)</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="90%" align="center">
            <tr>
                <td rowspan="2">R1 C1</td>
                <td>R1 C2</td>
            </tr>
            <tr>
                <!--td>R2 C1</td--><!-- R1 C1에 의해서 rowspan 병합됨 -->
                <td>R2 C2</td>
            </tr>
            <tr>
                <td colspan="2">R3 C1</td>
                <!--td>R3 C2</td--><!-- R3 C1에 의해서 colspan 병합됨 -->
            </tr>
    </BODY>
</HTML>


2. 3행 3열

출력결과 3
R1 C1
R2 C1 R2 C2 R2 C3
R3 C2
Source Code
<HTML>
    <HEAD>
        <TITLE>Cell 병합 예제 3 (3행 3열)</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="90%" align="center">
            <tr>
                <td colspan="3">R1 C1</td>
                <!--td>R1 C2</td--><!-- R1 C1에 의해서 colspan 병합됨 -->
                <!--td>R1 C3</td--><!-- R1 C1에 의해서 colspan 병합됨 -->
            </tr>
            <tr>
                <td rowspan="2">R2 C1</td>
                <td>R2 C2</td>
                <td rowspan="2">R2 C3</td>
            </tr>
            <tr>
                <!--td>R3 C1</td--><!-- R2 C1에 의해서 rowspan 병합됨 -->
                <td>R3 C2</td>
                <!--td>R3 C3</td--><!-- R2 C3에 의해서 rowspan 병합됨 -->
            </tr>
        </table>
    </BODY>
</HTML>
출력결과 4
R1 C1 R1 C2 R1 C3
R2 C1 R2 C2
R3 C1
Source Code
<HTML>
    <HEAD>
        <TITLE>Cell 병합 예제 4 (3행 3열)</TITLE>
    </HEAD>
    <BODY>
        <table border="1" width="90%" align="center">
            <tr>
                <td>R1 C1</td>
                <td>R1 C2</td>
                <td>R1 C3</td>
            </tr>
            <tr>
                <td>R2 C1</td>
                <td colspan="2" rowspan="2">R2 C2</td>
                <!--td>R2 C3</td--><!-- R1 C1에 의해서 colspan 병합됨 -->
                </tr>
            <tr>
                <td>R3 C1</td>
                <!--td>R3 C2</td--><!-- R2 C2에 의해서 rowspan 병합됨 -->
                <!--td>R3 C3</td--><!-- R2 C2에 의해서 병합됨 -->
            </tr>
        </table>
    </BODY>
</HTML>


다음 페이지에서 계속...




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

Top
Back
New
검색