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

[펌 강의] 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/링크모음
컴퓨터/인터넷 목록
번호 제목 글쓴이 날짜 조회
7157 10 Of The Most Effective Ai Instruments For Journalists That… 인기글 Mammie Feaster 2024-06-25 2162
7156 What's The Story With The Mlm Home-Based Business? 인기글 Twyla Gatenby 2024-06-25 2264
7155 What's Enhancing In Journalism? A Complete Information For B… 인기글 Elyse Sowden 2024-06-25 2162
7154 10 Of One Of The Best Ai Tools For Journalists To Help You W… 인기글 Jude Robichaud 2024-06-25 2190
7153 Hire Call Girls Bhopal 인기글 Rae Hanran 2024-06-25 1183
7152 10 Of One Of The Best Ai Instruments For Journalists That Ca… 인기글 Amy Mcneal 2024-06-25 2131
7151 Pdf News Enhancing And The Editorial Process Elisabeth Fondr… 인기글 Moshe 2024-06-25 2216
7150 How To Find Reliable Online Debt Relief Services 인기글 Alfredo Lawes 2024-06-25 2133
7149 delta-8-thc-black-friday-deals 인기글 Humberto 2024-06-25 1705
7148 Pdf News Enhancing And The Editorial Course Of Elisabeth Fon… 인기글 Niklas 2024-06-25 2293
7147 Sports Toto Site: Betting Your Way to Fun with Flair! 인기글 Christin Schref… 2024-06-25 2404
7146 10 Of The Most Effective Ai Tools For Journalists That Will … 인기글 Mitchel Hightow… 2024-06-25 2123
7145 10 Of The Most Effective Ai Tools For Journalists That Can H… 인기글 Roy 2024-06-25 2212
7144 Why News Modifying Is Important And How You Can Turn Out To … 인기글 Janina 2024-06-25 2267
7143 Enjoy The Dining Table That Doubles As A Poker Table 인기글 Carri 2024-06-25 2257
7142 threesome Help! 인기글 Staci 2024-06-25 2368
7141 Comment Faire De La Pâte D'amande 인기글 Delila 2024-06-25 2033
7140 How I Improved My Wózki Dla Noworodka – Trendy I Nowości In … 인기글 Brain Whyte 2024-06-24 2061
7139 Helper Recruitment: A Lifesaver in Language English - The Un… 인기글 Luz 2024-06-24 2278
7138 Elles sont Brossées et Mises sous Vide 인기글 Demetria 2024-06-24 2099
7137 You Can Work From Home And Stuff Envelopes - These Are Legit… 인기글 Zenaida 2024-06-24 2266
7136 History With The Celtic Tattoos 인기글 Steven 2024-06-24 2246
7135 Truffes Noires Surgelées - Tuber Melanosporum Vente en Gros … 인기글 Ezekiel Christo… 2024-06-24 1819
7134 Online Poker Secrets Revealed - The "Online Poker Advan… 인기글 Demetra 2024-06-24 2175
7133 Купить диплом университета: советы и рекомендации. 인기글 Veronica 2024-06-24 2094
7132 Before You Sign Up To An Online Stockbroker 인기글 John 2024-06-24 2237
7131 Where To Play 7 Card Stud Poker Online? 인기글 Lawrence Ah Mou… 2024-06-24 2241
7130 Work At Home - Emptying Envelopes Is A Legitimate Job. 인기글 Stephany 2024-06-24 2279
7129 Spin to Win: Mastering the Art of Online Slot Gaming 인기글 Enriqueta 2024-06-24 2382
7128 Truffes Var : Quel objet pour Mail de relance ? 인기글 Layla 2024-06-24 2364
게시물 검색
* 본 게시판의 게시물에 대하여 회사가 법적인 책임을 지지 않습니다.