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

[펌 강의] 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/링크모음
컴퓨터/인터넷 목록
번호 제목 글쓴이 날짜 조회
7362 royal-cbd-broad-spectrum-relief-cbd-gummies-30ct-150mg-cbc-7… 인기글 Demetrius 2024-06-26 1726
7361 Sauté De Légumes Surgelés 인기글 Yolanda McCrae 2024-06-26 2120
7360 Some Sundry Ideas On Video Poker Strategy 인기글 Rosie 2024-06-26 2205
7359 Определение водоносного слоя в процессе бурения скважины 인기글 Tosha 2024-06-26 2013
7358 kraken18.at 인기글 Lavonda 2024-06-26 2452
7357 Authentic Poker Chips Sets 인기글 Fidel Armenta 2024-06-26 2123
7356 Recette De Couscous Au Safran 인기글 Caridad Mathis 2024-06-26 2045
7355 Betting on a Better Future: Unraveling the Mystique of Gambl… 인기글 Cameron 2024-06-26 2397
7354 продвижение сайтов уфа 인기글 Barry 2024-06-26 1645
7353 The Mysterious Mystery Into dolcett Uncovered 인기글 Patricia 2024-06-26 2362
7352 How To Avoid Online Casino Gambling Risks And Play It Safe 인기글 Helene 2024-06-26 2381
7351 creme-kong-200ml 인기글 Shelly Pelletie… 2024-06-26 1728
7350 candy-killa 인기글 Irwin Ahmad 2024-06-26 1727
7349 Poker Chips And More: The Roots Of Poker 인기글 Cruz 2024-06-26 2293
7348 BESPOKE GAME DEVELOPMENT STUDIO 인기글 Augusta Yarbrou… 2024-06-26 2244
7347 7 Card Stud Poker - Rules And Gameplay 인기글 Louis 2024-06-26 2237
7346 Gâteau À L'ananas Avec Glaçage Au Fromage À La Crème 인기글 Jim 2024-06-26 1962
7345 Roll the Digital Dice: A Deep Dive into the World of Online … 인기글 Desiree Wilbank… 2024-06-26 2157
7344 Poker Chips And More: The Roots Of Poker 인기글 Sylvester 2024-06-26 2257
7343 Free Poker - Society Poker Series 인기글 Rozella Dunning 2024-06-26 2204
7342 Sun Tzu’s Awesome Tips On Mysite 인기글 Mariel 2024-06-26 2559
7341 Moonlighting as an Emcee: Unveiling the Charms of Host Part-… 인기글 Jann 2024-06-26 2387
7340 Best Sportsbooks Offering Bitcoin Cryptocurrency as a Method… 인기글 Celina 2024-06-26 2272
7339 jwn6826552393846 인기글 Leroy 2024-06-26 1350
7338 How To Avoid Online Casino Gambling Risk And Play It Safe 인기글 Bernardo 2024-06-26 2442
7337 Want A Thriving Business? Avoid Mysite! 인기글 Tory 2024-06-26 2454
7336 تنزيل فيديو 750 인기글 May 2024-06-26 1923
7335 Waiter Part-Time: Serving Up More Than Just Food 인기글 Stacey 2024-06-26 2132
7334 Top 5 Reasons Why Poker Is Not A Game Of Risk 인기글 Candra 2024-06-26 2261
7333 Texas Holdem Poker Tips - 3 Tips For Speedy Success 인기글 Meghan 2024-06-26 2182
게시물 검색
* 본 게시판의 게시물에 대하여 회사가 법적인 책임을 지지 않습니다.