size="2">15. Table 예제 몇 개

이제 테이블에 대한 예제를 몇 개
보도록 하겠습니다. 지금까지 설명한 내용들로 만든 것이니까 아마 이해가
쉽게 갈 겁니다.

1. Table 예제 (1)

<table border cellpadding="3">

    <tr>

        <td align="center">토끼</td>

        <td align="center">거북이</td>

        <td align="center">여우</td>

    </tr>

</table>

• 
  
• 이 표(Table)는 방(셀)이 세
  개 있는 표입니다.
  
• 테두리 선의 두께는 1입니다.
  왜냐구요? border를 주지 않았거든요. 테두리 선의 두께를 없애고
  싶으면 border="0"을 사용하면 됩니다.
  
• cellpadding="3"은
  표의 안쪽 여백을 3 픽셀 만큼 준 것입니다. 여러분의 취향에 맞게
  사용하세요^^
  
• 그리고 각 셀에 있는 내용을
  중앙으로 정렬시켰습니다.
  
• 보기가 별로 좋지는 않네요^^
  
  

2. Table 예제 (2)

<table border cellpadding="3">

    <tr>

        <td width="99"
align="center" bgcolor="blue">토끼</td>

        <td width="99"
align="center" bgcolor="blue">거북이</td>

        <td width="99"
align="center" bgcolor="red">여우</td>

    </tr>

    <tr>

        <td width="99"
align="center" bgcolor="lime">사슴</td>

        <td width="99"
align="center" bgcolor="lime">호랑이</td>

        <td width="99"
align="center" bgcolor="red">강아지</td>

    </tr>

</table>

• 
  
• 셀을 밑에 3개 더 만들었습니다.
  <tr>...</tr> Tag를 사용했지요^^
  
• 그리고 각 셀의 폭을 99픽셀로
  고정시켰어요. 그나마 보기가 좀 나은 것 같네요.
  
• 6 개의 셀에서 두 개씩 각 셀의
  배경 색상을 삽입했습니다. bgcolor="색상" 기억하시죠?
  
  
• <tr>...</tr> Tag
  안의 <td>...</td> Tag의 수가 서로 달라도 상관은
  없지만 가능하면 같게 해주는게 좋습니다. colspan="n",
  rawspan="n"을 사용하면 되지요.
  

3. Table 예제 (3)

<table border cellpadding="3">

    <tr>

        <td width="99"
align="center" colspan="2" bgcolor="blue">토끼

            <p>거북이</td>

        <td width="99"
align="center" rowspan="2" bgcolor="red">여우

            <p>강아지</td>

    </tr>

    <tr>

        <td width="99"
align="center"  vlign="center" colspan="2"
bgcolor="lime">사슴

            <p>호랑이</td>

    </tr>

    <tr>

        <td width="99"
align="center">기린</td>

        <td width="99"
align="center">고양이</td>

        <td width="99"
align="center">코뿔소</td>

    </tr>

</table>

• 
  
• 비교를 위해 셀을 3개 더 추가하고
  색상이 같은 셀을 서로 합쳤습니다. 여기서 추가된 tag는 colspan="n",
  rowspan="n"입니다. 어렵지 않죠? 합치고 싶은 셀의 수만큼
  n을 사용하면 됩니다. 물론 사용하고 있는 셀의 개수 안에서 사용해야죠^^
  
  

3. Table 예제 (4) 

<table border cellpadding="7">

    <tr>

        <td width="99"
align="center" colspan="2" bgcolor="blue">

             <table
border="3">

                <tr>

                    <td
width="96" align="center">토끼</td>

                    <td
width="96" align="center">거북이</td>

                </tr>

            </table>

        </td>

        <td width="99"
align="center" rowspan="2" bgcolor="red">

           <table
border="3">

                <tr>

                    <td
width="90" align="center">여우</td>

                </tr>

                <tr>

                    <td
width="90" align="center">강아지</td>

                </tr>

            </table>

        </td>

    </tr>

    <tr>

        <td width="99"
align="center" colspan="2" bgcolor="lime">

            <table
border="3">

                <tr>

                    <td
width="96" align="center">사슴 </td>

                    <td
width="96" align="center">호랑이</td>

                </tr>

            </table>

         </td>

    </tr>

    <tr>

        <td width="99"
align="center">기린</td>

        <td width="99"
align="center">고양이</td>

        <td width="99"
align="center">코뿔소</td>

    </tr>

</table>

• 
  
• 각각 색상이 동일했던 셀을
  예제 3에서는 같은 셀로 합쳤는데, 여기서는 합친 셀안에 표(table)를
  하나씩 더 추가했습니다.
  
• 눈으로 구분하기 쉽게 표 여백(cellpadding)은
  7로 표현하고 셀 안에 들어가는 표의 테두리 선(border)은 두께를
  3으로 했습니다.
  
• 셀 안에 삽입하는 표(Table)에는
  배경색상을 지정하지 않았기 때문에 셀의 배경색상과 동일하게 보입니다.
  
  
• 각 셀안에 width를 픽셀 단위로
  주었는데, 테이블의 폭을 100%로 하고 거기에 맞춰 셀의 폭을 %로
  나타내주면 브라우저의 크기나 해상도에 덜 영향을 받는 홈페이지를
  만들 수 있습니다. 대부분 800*600을 기준으로 만들면 1024*768에서
  보았을 경우 오른쪽에 여백이 많이 남죠? 야후나 다른 검색사이트들은
  그렇지 않은데..
  
  셀의 폭을 픽셀 단위로 주는 것은 폭의 길이를 고정시킬 수 있어
  편리하지만 위와 같은 단점이 있답니다.
  

앞에서 다른 tag 들도 몇 개 소개해드렸지만
아마도 Table을 사용할 경우 제일 많이 사용하는 Tag는 위에서 예로
보여드린 Tag가 아닐까 싶네요. 기본원리만 몇 개 쉬운 예제로 보여드렸는데,
좀 어려운 예제라도 기본적인 내용만 이해한다면 쉽게 접근할 수 있을
겁니다.

테이블을 사용할 때는 특히나 들여쓰기를
해주는게 좋습니다. 나중에 수작업으로 홈페이지를 수정할 경우 소스를
쉽게 볼 수 있겠죠? 홈페이지를 관리하다 보면 조금 수정하는데 에디터로
수정해서 Ftp로 올리는 작업이 번거로울 수도 있거든요. 그리고 에디터는
자신이 원하지 않는 Tag도 삽입할 경우가 있으니 주의 하세요.