table 만들기와 usemap

<table> , <tr>, <td>

 

table : 테이블

tr : 테이블의 행을 정의

td : 테이블의 열을 정의

예시)

<table>

     <tr><td>테이블내용1</td><td>테이블내용2</td></tr>

     <tr><td>테이블내용3</td><td>테이블내용4</td></tr>

</table>

테이블 태그의 속성

border : 테두리 지정

bordercolor : 테두리 색상 지정

cellpadding : 셀과 문자 사이의 여백

cellspacing : 셀과 셀 사이의 여백

bgcolor : 테이블 배경 색상 지정

width : 테이블의 가로 사이즈 지정

height : 테이블의 세로 사이즈 지정

align : 테이블 정력(left, center, right)

<table border="1" bordercolor="red" cellpadding="5" cellspacing="5">

     <tr><td>테이블내용1</td><td>테이블내용2</td></tr>

     <tr><td>테이블내용3</td><td>테이블내용4</td></tr>

</table>

colspan : n 은 가로로 몇개의 셀을 합칠건지 지정

rowspan : n은 세로의 몇개의 셀을 합칠건지 지정

<table border="2" width="400" height="200" align="center">

     <tr>
               <td colspan="2">테이블내용 BB</td><td>테이블내용 AA</td>
     </tr>
     <tr>
               <td rowspan="2">테이블내용 CC</td><td>테이블내용 DD</td><td>테이블내용 EE</td>
     </tr>
     <tr>
               <td>테이블내용 FF</td><td>테이블내용 GG</td>
     </tr>

</table>

 

테이블을 사용하면 각각의 개별이미지에 링크를 걸어서 새로운 웹페이지로 연결할 수 있도록 만들수 있습니다.

하지만, 이런 작업없이 하나의 이미지에 여러가지 이미지를 작성하여 각각의 개별이미지에 링크를 걸수도 있습니다.

레이아웃이나 코딩작업이 보다 수월하지요. 이미지가 많다면 좌표값 입력에 애를 좀 먹긴 하겠지만...^^

사용하려는 전체 이미지의 좌측 상단의 모서리에서부터 1~4의 순서대로 좌표값을 입력하면 된다.

 

 

아래와 같이 코딩하면 됩니다.

<p><img src="~~~~~~~~" usemap="#cate" alt="" /></p>
<map name="cate" id="Map">
     <area shape="rect" coords="100,200,300,400" href="http://~~~~~~~~~" alt="~~~~~~" />

     <area shape="rect" coords="100,200,300,400" href="http://~~~~~~~~~" alt="~~~~~~" />

     <area shape="rect" coords="100,200,300,400" href="http://~~~~~~~~~" alt="~~~~~~" /> 

</map>