◈ 표 만들기◈

<TABLE></TABLE>

테이블의 시작과 끝을 알리는 태그...

위치, 선의 두께, 색깔 등 많은 옵션을 줄 수 있습니다.

<TR></TR>

가로선-Table Row 의 약자

<TD></TD>

세로선-Table Data 의 약자

<TH></TH>

셀의 제목

<TABLE BORDER=300 CELLSPACING=300>

테두리선 크기,셀과 셀 사이의 간격을 조정합니다. 표를 안보이게 하려면 <TABLE border=0> 이렇게 하시면 되겠져~

<TABLE CELLPADDING=300 BGCOLOR=blue> 

셀과 내부 글자와의 간격을 벌려줌, 바탕색을 지정합니다.

<TABLE WIDTH=300 HEIGHT=300> 

Table 넓이와 높이 지정합니다.

<TD COLSPAN=300 ROWSPAN=300>

셀을 가로,세로로 합칩니다.

<TD ALIGN=LEFT,CENTER,RIGHT VALIGN=TOP,MIDDLE,BOTTOM>

좌우,중앙,상하 등으로 조정할 수 있습니다.(글자내용을)

그러면...지금부터...여러 예제를 보여 드리겠습니다.

2줄 2칸(가로2세로2)표만들기

첫줄첫칸

첫줄둘째칸

둘째줄첫칸

둘째줄둘째칸

<TABLE border>
<TR>
       <TD>첫줄첫칸</TD>
       <TD>첫줄둘째칸</TD>
</TR>
<TR>
       <TD>둘째줄첫칸</TD>
       <TD>둘째줄둘째칸</TD>
</TR>

</TABLE>
표의 정렬 방식(align), 높이(height)와 넓이(width) 조절하기
첫째칸 둘째칸 셋째칸 넷째칸

<TABLE border align="center" height=100 width=200>
<TR>
       <TD>첫칸</TD>
       <TD>둘째칸</TD>
       <TD>셋째칸</TD>
       <TD>넷째칸</TD>
</TR>
</TABLE>
표의 테두리 선 조절하기

표의 두께를 0으로 했을때
첫째칸 둘째칸 셋째칸 넷째칸

<TABLE border=0>
<TR>
       <TD>첫째칸</TD>
       <TD>둘째칸</TD>
       <TD>셋째칸</TD>
       <TD>넷째칸</TD>
</TR>
</TABLE>

표의 두께를 10으로 했을때
첫째칸 둘째칸 셋째칸 넷째칸

<TABLE border=10>
<TR>
       <TD>첫째칸</TD>
       <TD>둘째칸</TD>
       <TD>셋째칸</TD>
       <TD>넷째칸</TD>
</TR>
</TABLE>
표의 바탕색 조절하기

표 전체에 색 넣기
첫째줄첫칸 첫째줄둘째칸
둘째줄첫칸 둘째줄둘째칸

<TABLE border bgcolor="red">
<TR>
<TD>첫째줄첫칸</TD>
<TD>첫째줄둘째칸</TD>
</TR>
<TR>
<TD>둘째줄첫칸</TD>
<TD>둘째줄둘째칸</TD>
</TR>
</TABLE>

표마다 다른색 넣기
빨간색 파란색 초록색

<TABLE border>
<TR>
<TD bgcolor="red">빨간색</TD>
<TD bgcolor="blue">파란색</TD>
<TD bgcolor="green">초록색</TD>
</TR>
</TABLE>

표에 롤오버 효과내기(표에 마우스를 갖다대보세요~)

 마우스대면

색깔이

 예쁘게

변하네요

<table border="1" width="205">

    <tr>

        <td width="110" onMouseOver=this.style.backgroundColor="#ffcc00" onMouseOut=this.style.backgroundColor="">

        

            <p align="center">&nbsp;</p>

        </td>

        <td width="110" onMouseOver=this.style.backgroundColor="#ff6ec7" onMouseOut=this.style.backgroundColor="">

        

            <p align="center">&nbsp;</p>

        </td>

     <tr>

        <td width="110" onMouseOver=this.style.backgroundColor="#ffcc00" onMouseOut=this.style.backgroundColor="">

        

            <p align="center">&nbsp;</p>

        </td>

        <td width="110" onMouseOver=this.style.backgroundColor="#ff6ec7" onMouseOut=this.style.backgroundColor="">

        

            <p align="center">&nbsp;</p>

        </td>

</table>

표에 스타일 효과내기

Madalla's Space

<table border="1" width="150">
<tr>
<td style="border-width:1pt; border-color:blue; border-style:solid;">
Madalla's Space
</td></tr></table>

이와 같이 스타일 서식을 이용해서도 표를 꾸밀 수가 있는데요...
border-width:1pt 는 선굵기를 1pt 로 정하라는 말이구여
border-color:blue 는 선색을 파란색으로 지정하라는 말입니다.
border-style:solid 는 선의 종류를 solid 로 한다는 뜻입니다.
그러면 선의 종류도 여러 가지가 있는데 보여 드리겠습니다...^^ 저기 border-style뒤에 진하게 된 부분 있지요? 진하게 된 부분을 아래 글자와 같은 것으로 바꿔주시면 아래와 같은 표의 선이 생긴답니다^^

dotted

dashed

solid

double

아마 많이 보셨을 겁니다...^^ 스타일 서식을 이용해서 저렇게 멋진 표도 만들 수 있는 것이져...스타일 시트 강좌에 보시면 스타일로는 아마 못하는게 없을겁니다...그러면 저 표 스타일의 여러 속성을 보도록 하지요.

order-top-width:숫자
border-top-color:색상
border-top-style:선의 종류
border-right-width:숫자
border-right-color:색상
border-right-style:선의 종류
border-bottom-width:숫자
border-bottom-color:색상
border-bottom-style:선의 종류
border-left-width:숫자
border-left-color:색상
border-left-style:선의 종류

위와 같이 방향에 따라 표의 두께,색상,종류 등을 가지각색으로 만들 수 있습니다...참고로 나모 웹에디터에서는 표에서 오른쪽 버튼을 누르고 등록 정보를 누르시고 왼쪽 아래에 스타일 단추를 누르시면 스타일을 활용한 여러 표를 만들 수 있을 것입니다~ 그럼 멋진 표를 만드시길 바라면서..

앞으로    계속