점선테이블

  안녕하세요?
  오늘도 소스분석입니다. 오늘은 테이블을 점선으로 표시하게 하는 소스입니다. 보통 그냥 HTML의 TABLE태그를 사용하면 직선으로 나타나는데 이것을 점선으로 나타나게 하는 겁니다. 그리고 모서리도 둥그스럼하게 나타나게 하구요. 그럼 실행결과부터 볼까요?

이런식으로 테이블이 생깁니다. 어려워보이지요? 생각해보면 간단합니다. 쉽게 말해서 테이블의 맨위,위왼쪽,위오른쪽,중간왼쪽,중간오른쪽,아래왼쪽,아래중간,아래오른쪽을 다 이미지로 채우시면 됩니다. 저 점선으로 된게 다 그림이다라는 말입니다. 그것을 <td>태그에 넣어주시면 됩니다. 그럼 소스를 한번 볼까요?

<table width="300" cellpadding="0" cellspacing="0" border="0" align="center">
<tr height="12">
 <td width="14"><img src="top_left.gif" border="0"></td>
 <td width="270" background="top_center.gif"></td>
 <td width="16"><img src="top_right.gif" border="0"></td>
</tr>
<tr>
 <td background="mid_left.gif"></td>
 <td align="center">보다유연한<br>점선 테이블입니다.<br>테이블 안의 내용이 늘어나면<br>자동적으로 배경이미지

가<br>패턴으로 깔립니다.</td>
 <td background="mid_right.gif"></td>
</tr>
<tr>
 <td><img src="bottom_left.gif" border="0"></td>
 <td background="bottom_center.gif"></td>
 <td><img src="bottom_right.gif" border="0"></td>
</tr>
</table>

보이시지요? td태그에 img src="top_left.gif" 이렇게 들어가 있지요? 즉 맨위 왼쪽편을 이루는 그림파일입니다. 그 밑에는 아예 td의 background를 줘서 전체를 다 top_center.gif라는 그림으로 채웠네요. 나머지도 다 마찬가지입니다. 그럼 그 그림이라는게 어떻게 되어있는지 한번 볼까요?

 (맨위 가운데죠)

(맨밑왼쪽)

(맨밑오른쪽)

(중간오른쪽)

(중간왼쪽)

(맨밑중간)

(맨위왼쪽)

(맨위오른쪽)

  이해가 가시죠? 그럼 다음시간에 또 만나요~

소스출처 : www.homejjang.com