* 욕설, 비방, 광고, 도배질 글은 임의로 삭제됩니다.

[펌 강의] 15. Table 예제 몇 개

페이지 정보

써니

본문





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도 삽입할 경우가 있으니 주의 하세요.

작성일2005-02-22 16:41

메이저사이트님의 댓글

메이저사이트
안녕하세요. 다양한정보 감사합니다. 온라인카지노 먹튀검증 보증업체 추천 온라인구조대 입니다. //
http://timespototo.com/토토보증놀이터
http://online-safer.com/카지노사이트
http://jusobada.com/링크모음
컴퓨터/인터넷 목록
번호 제목 글쓴이 날짜 조회
171 IT관련직종에 근무하시는분께 진로문제로 간절히 질문드립니다.. 댓글[1] 인기글 공부하는청년 2005-05-03 5278
170 답변글 조언... 인기글 advisor 2005-05-07 5530
169 답변글 IT관련직종에 근무하시는분께 진로문제로 간절히 질문드립니다.. 댓글[1] 인기글 Compusa 2005-05-04 5497
168 답변글 IT관련직종에 근무하시는분께 진로문제로 간절히 질문드립니다.. 댓글[1] 인기글 아나 2005-05-15 5554
167 Rename 댓글[1] 인기글 Ken Kim 2005-04-28 7500
166 답변글 Rename 댓글[1] 인기글 써니 2005-04-29 6404
165 답변글 Rename 댓글[1] 인기글 Ken Kim 2005-04-30 7604
164 무선 인터넷 설치방법을 알려주세요 댓글[1] 인기글 andy 2005-04-28 5832
163 [정보] MS 블랙박스 기능, 개인 사생활 침해 논란 인기글 써니 2005-04-27 5453
162 [정보] 마이크로소프트의 PDF 킬러, “Metro” 댓글[1] 인기글 써니 2005-04-27 5823
161 디카 사진 씨디 로 안 구워져요 댓글[2] 인기글 ??? 2005-04-27 5609
160 [정보] 안연구소, MP3파일 지우는 바이러스 출현경보 댓글[1] 인기글 써니 2005-04-26 5387
159 Marketing Network team 을 많이 소유하신분께 댓글[1] 인기글 rhee 2005-04-14 7419
158 Internet 사업하시는분 께서는PayPal 를 사용하세요 댓글[1] 인기글 Rhee 2005-04-14 5795
157 [정보] 블로그를 통한 악성 코드 배포 증가 댓글[1] 인기글 써니 2005-04-14 5627
156 스크롤바의 글자가 깨어져 나와요. 도와주세요. 댓글[2] 인기글 답답 2005-04-07 5499
155 popups 댓글[1] 인기글 맹맹 2005-04-05 6117
154 답변글 popups 댓글[1] 인기글 유샤인 2005-11-08 7445
153 답변글 popups 댓글[1] 인기글 써니 2005-04-05 5250
152 써니님!! 도와주세요 댓글[1] 인기글 comcast 2005-04-04 5418
151 동영상 관련 댓글[1] 인기글 TR 2005-04-03 5267
150 답변글 동영상 관련 댓글[1] 인기글 nikki 2005-04-05 5499
149 써니님!! 도와주세요.. 댓글[1] 인기글 초보 2005-04-01 5489
148 답변글 써니님!! 도와주세요.. 댓글[1] 인기글 써니 2005-04-03 5450
147 [정보] 소니 PS2 북미 지역 판매 금지 위기 댓글[1] 인기글 써니 2005-03-31 5966
146 DVP642 DVD 플레이어 질문입니다. 댓글[1] 인기글 김진수 2005-03-28 5800
145 컴퓨터 출장 수리(엘에이 지역) 댓글[1] 인기글 PC 수리 2005-03-27 5673
144 영문 window XP 에서 한글문서 만드는 방법 알려주세요 댓글[2] 인기글 JK 2005-03-21 5447
143 "Internet Explorer 문제 발생" 하고 인터넷이 끊어져요!! 댓글[1] 인기글 왕꽃 2005-03-21 5679
142 디지탈 카메라를 구입하고 싶은데요 추천좀.. 댓글[1] 인기글 제키챤 2005-03-20 5888
게시물 검색
* 게시일 1년씩 검색합니다. '이전검색','다음검색'으로 계속 검색할 수 있습니다.
** 본 게시판의 게시물에 대하여 회사가 법적인 책임을 지지 않습니다.