테이블의 기본적인 활용입니다 1] 기초적인 테이블 1단계를 만듭니다위 테이블의 작성 예입니다
<table border="3" bordercolor="blue" width="100" height="100"> <tr> <td bgcolor="green"> </td></tr></table></center> 2] 테이블 안에 또 테이블을 만드는 예입니다위 테이블의 작성 예입니다
<center> <table border="3" bordercolor="blue" width="200" height="100"> <tbody> <tr> <td bgcolor="green"> <center> <table border="1" bordercolor="yellow" width="150" height="80"> <tr> <td bgcolor="black"> </td></tr></tbody></table> </td></tr></table></center> tbody 명령을 사용하며 테이블안에 또 하나의 칸을 만들고 싶을때 마다 그 수많큼의 테이블에 이 명령어를 적용합니다 아래는 보기입니다위 테이블의 작성 예입니다
<center> <table border="3" bordercolor="blue" width="200" height="100"> <tbody> <tr> <td bgcolor="green"> <center> <table border="1" bordercolor="yellow" width="150" height="80"> <tbody> <tr> <td bgcolor="black"> <center> <table border="3" bordercolor="blue" width="100" height="60"> <tbody> <tr> <td bgcolor="green"> <center> <table border="3" bordercolor="blue" width="80" height="40"> <tbody> <tr> <td bgcolor="green"> </td></tr></tbody></table> </td></tr></tbody></table> </td></tr></tbody></table> </td></tr></tbody></table></center> 3] 테이블을 옆으로 두칸 만들어 봅니다위 테이블의 작성 예입니다
1칸 2칸 <center> <table border="3" bordercolor="blue" width="200" height="100"> <tr> <td bgcolor="green" align="center">1칸</td> <td bgcolor="yellow" align="center">2칸</td> </tr></table></center> 이렇게 td명령 소스를 작성하면 칸이 만들어지는데 원하는 칸 많큼의 수를 위의 td명령 작성식대로 하면 됩니다 예로 6칸차리입니다위의 소스 예입니다
1칸 2칸 3칸 4칸 5칸 6칸 <center> <table border="3" bordercolor="blue" width="200" height="100"> <tr> <td bgcolor="green" align="center">1칸</td> <td bgcolor="yellow" align="center">2칸</td> <td bgcolor="green" align="center">3칸</td> <td bgcolor="red" align="center">4칸</td> <td bgcolor="yellow" align="center">5칸</td> <td bgcolor="pink" align="center">6칸</td> </tr></table></center> 테이블의 아래로 두칸입니다소스입니다
1칸 2칸 <CENTER> <TABLE borderColor=blue height=100 width=200 border=3> <TR> <TD align=middle bgColor=green>1칸</TD></tr> <TD align=middle bgColor=yellow>2칸</TD> </TR></TABLE></CENTER> 아래 두칸 옆으로 두칸 합해서 4칸입니다소스입니다
위쪽1칸 위옆2칸 아래2칸 옆에2칸 <CENTER> <TABLE borderColor=blue height=100 width=200 border=3> <TR> <TD align=middle bgColor=green>위쪽1칸</TD> <TD align=middle bgColor=yellow> 위옆2칸</TD> </tr> <TD align=middle bgColor=yellow> 아래2칸</TD> <TD align=middle bgColor=yellow> 옆에2칸</TD> </TR></TABLE></CENTER> 위쪽 칸을 하나로 합칩니다소스입니다
위쪽1칸합 아래2칸 옆에2칸 <CENTER> <TABLE borderColor=blue height=100 width=200 border=3> <TR> <TD align=middle bgColor=green colspan="2">위쪽1칸</TD> </tr> <TD align=middle bgColor=yellow> 아래2칸</TD> <TD align=middle bgColor=yellow> 옆에2칸</TD> </TR></TABLE></CENTER> 아래쪽 두칸을 합칩니다소스입니다
위쪽1칸 위옆2칸 아래2칸합 <CENTER> <TABLE borderColor=blue height=100 width=200 border=3> <TR> <TD align=middle bgColor=green>위쪽1칸</TD> <TD align=middle bgColor=yellow> 위옆2칸</TD> </tr> <TD align=middle bgColor=yellow colspan="2"> 아래2칸합</TD> </TR></TABLE></CENTER> 왼쪽 칸 위와 아래를 합칩니다소스입니다
왼쪽1칸 위옆2칸 옆에2칸 <CENTER> <TABLE borderColor=blue height=100 width=200 border=3> <TR> <TD align=middle bgColor=green rowspan="2">왼쪽1칸</TD> <TD align=middle bgColor=yellow> 위옆2칸</TD> </tr> <TD align=middle bgColor=yellow> 옆에2칸</TD> </TR></TABLE></CENTER> 오른쪽칸 위와 아래를 합칩니다소스입니다
위쪽1칸 2칸합 아래2칸 <CENTER> <TABLE borderColor=blue height=100 width=200 border=3> <TR> <TD align=middle bgColor=green>위쪽1칸</TD> <TD align=middle bgColor=yellow rowspan="2"> 2칸합</TD> </tr> <TD align=middle bgColor=yellow> 아래2칸</TD> </TR></TABLE></CENTER> 이런식으로 테이블의 칸을 나누고 칸을 지정하는 td명령어속에다 각각의 원하는 태그를 적용하면 되겠지요 예제 입니다테이블의 아래로 4칸입니다
소스입니다
1칸 2칸 3칸 4칸 <CENTER> <TABLE borderColor=blue height=100 width=200 border=3> <TR> <TD align=middle bgColor=green>1칸</TD> </tr> <TD align=middle bgColor=yellow>2칸</TD> </tr> <TD align=middle bgColor=green>3칸</TD> </tr> <TD align=middle bgColor=yellow>4칸</TD> </TR></TABLE></CENTER> 4] 1항의 테이블에 배경색을 그림으로 바꿉니다배경그림을 바꾼 소스 예입니다
<td background="http://myhome.hanafos.com/~choja311/pattern/153t1.jpg"> 실제 이미지 크기입니다5] 2항의 테이블에 배경색을 그림으로 바꿉니다
위 테이블의 작성 예입니다 배경색을 그림으로 바꾼 소스 보기입니다<td background="http://myhome.hanafos.com/~choja311/pattern/153t1.jpg"> <td background="http://ha927.com.ne.kr/icon3/151.jpg"> 실제 이미지 크기입니다6] 3항의 배경색을 그림으로 바꿉니다
7] 테이블의 두께에 따른 변화입니다 border 값을 0로 지정했을때
1칸 2칸 위 테이블과 같은 효과를 이렇게도 합니다 위 마퀴태그의 예입니다
<marquee direction="up" scrollamount="1"width="200" height="100" bgcolor="yellow"> 마퀴 태그에 폭과 높이를 지정하고 배경색을 지정해 주면 이렇게 됩니다</marquee> border 값을 0로 지정하고 배경그림을 넣을때border 값을 0로 지정하고 배경그림과 색을 넣었을때
실제 사용된 이미지 크기입니다
border 값을 1로 지정했을때
border 값을 5로 지정했을때
border 값을 10로 지정했을때
border 값을 10로 지정하고 밝은부분과 어두운 부분을 나누어서 색을 지정했을 때
위 테이블의 소스 예입니다
<center> <table border="10" bordercolor="blue" bordercolordark="yellow" bordercolorlight="pink" width="200" height="100"> <tr> <td bgcolor="green"> </tr></td></table></center> border 값을 10로 지정하고 밝은부분과 어두운 부분을 나누어서 색을 지정하고 table에 배경그림을 지정해 주었을 때위항의 소스 예 입니다
<center> <table border="10" cellpadding="0" cellspacing="10" bordercolordark="#793D0B" bordercolorlight="#FFB66E" background="http://aaha.pe.kr/POTO/board1.jpg"> <tr> <td background="http://ha927.com.ne.kr/icon3/151.jpg" width=200 height=100> </td></tr></table></center> 실제 사용된 이미지 크기입니다
8] 테이블에서의 간격과 여백을 나타냅니다 태그 명령어는 sellspacing=셀간의 간격을 sellpadding=셀 안쪽의 여백을 지정해 줍니다 2항의 테이블입니다
이 테이블에 셀의 간격과 여백을 0으로 지정해 줍니다 위 테이블과 비교해 보세요
이 테이블에 셀의 간격과 여백을 10으로 지정해 줍니다 위 테이블과 비교해 보세요
위 테이블의 소스 보기입니다 내용 중 숫자를 바꾸어 보시면 되겠지요
<center> <table border="3" bordercolor="blue" width="200" height="100" cellpadding="10"cellspacing="10"> <tbody> <tr> <td background="http://cafeimg.hanmail.net/cf_img2/bbs/play_c_00.gif"bgcolor="yellow"> <center> <table border="1" bordercolor="black" width="150" height="80"cellpadding="10"cellspacing="10"> <tr> <td background="http://cafeimg.hanmail.net/cf_img/icon46.gif" bgcolor="pink"> </tr></td></tbody></table> </tr></td></table></center> 위 테이블에 배경그림을 넣을 경우입니다
출처 : 테이블 만들기
글쓴이 : 제나미 원글보기
메모 :
'[컴관련 정보방]' 카테고리의 다른 글
| [스크랩] 아직도,자판(자,모음)을 보고치십니까? (0) | 2007.01.14 |
|---|---|
| [스크랩] 포토샵과 스위시 / 영상 편집에 관한 자료 모음 (0) | 2007.01.14 |
| [스크랩] 도리도리 소스 (0) | 2007.01.14 |
| [스크랩] MARQUEE 태그소스 모음 (0) | 2007.01.14 |
| [스크랩] 글자를 다양하게 표현해 보자 (0) | 2007.01.14 |