Tag 익히기(3)

HTML 기본 Tag 익히기(1) Tag 익히기(2) Tag 익히기(3) HTML 활용

Up
table 짜기
frame 페이지
실습예제

Table 짜기

테이블의 기본구조

tablest.gif (41571 bytes)

기본 테이블

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Align 과  valign

<table width=200 height=100 border=2>
    <tr>
        <td align=left>1</td>
        <td align=center>2</td>
        <td align=right>3</td>
    </tr>
    <tr>
        <td valign=top>4</td>
        <td valign=middle>5</td>
        <td valign=bottom>6</td>
    </tr>
</table>

cellpadding

<table cellpadding=10 cellspacing=0 border=2>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

cellspacing

<table cellpadding=0 cellspacing=15 border=2>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

border

<table cellpadding=0 cellspacing=0 border=5>
    <tr>
        <td width=30%>1</td>
        <td width=30%>2</td>
        <td width=30%>3</td>
    </tr>
    <tr>
        <td width=30%>4</td>
        <td width=30%>5</td>
        <td width=30%>6</td>
    </tr>
</table>

셀 합치기

<table border=1 width=50%>
    <tr>
        <td colspan=2>1</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td rowspan=2>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>

cell 마다 bgcolor를 줄 수 있습니다.

border=0으로 하면 테이블 모양이 보이지 않고 내용만 보입니다.

Frame 페이지

아래위로 나뉘는 프레임

<frameset rows="50%,50%">
    <frame src=top.htm>
    <frame src=bottom.htm>
</frameset>

옆으로 나누고 다시 아래위로 나뉜 프레임

<frameset cols="30%,*" frameborder=no border=0>
    <frame src=left.htm name=left scrolling=yes>
    <frameset rows="20%,*">
<frame src=top.htm name=top>
        <frame src=bottom.htm name=bottom scrolling=auto>
    </frameset>
</frameset>

Target을 지정하여 링크시키기

<a href=newpage.htm target=bottom>여기를 눌러주세요</a>


실습예제 : Text Sample / Image Sample - 이미지 1, 이미지 2