테이블의 각각의 셀안에는 배경그림을 지정할 수 있다. 그런데 이런 배경그림지정에 다음과 같은 방법을 이용하면 신기하게도 멋진 테두리를 가진 테이블을 만들 수 있다.
 | | | | 안녕하세요
이것은 테이블의 테두리에 점선을 입힌 모습입니다.
신기하지 않습니까?
자 어떻게 하는지 따라해봅시다. |
| | | | |
테이블의 속성을 이용한 방법입니다. 위와 같은 테이블을 구성하기 위해서는 테두리를 만드는 이미지가 필요합니다. 우선 다음의 두개의 이미지를 세이브하시기 바랍니다.
위의 그림의 실제크기는 첫번째 그림은 2*2 픽셀이고 두번째는 1*1 의 투명이미지입니다. 저장할때 이름은 자기 마음대로 저장해도 상관없습니다. 다음의 예제를 구성할때 저장한 이름으로 지정하시면 됩니다. 편의상 첫번째 그림을 point44.gif, 두번째 그림을 blank.gif 라 칭하겠습니다.
| HTML Example | <table border=0 cellpadding=0 cellspacing=0 width=300>
<tr>
<td background=../img/point44.gif><img src=../img/blank.gif border=0></td>
<td background=../img/point44.gif><img src=../img/blank.gif border=0></td>
<td background=../img/point44.gif><img src=../img/blank.gif border=0></td>
</tr>
<tr>
<td background=../img/point44.gif width=1><img src=../img/blank.gif border=0 width=1></td>
<td>
<!-- 점선안에 들어가는 내용부분 -->
<table border=0 width=100% cellpadding=5 cellspacing=5>
<tr><td>
안녕하세요이것은
테이블의 테두리에 점선을 입힌 모습입니다.
신기하지 않습니까?
자 어떻게 하는지 따라해봅시다.
</td></tr>
</table>
</td>
<td background=../img/point44.gif width=1><img src=../img/blank.gif border=0 width=1></td>
</tr>
<tr>
<td background=../img/point44.gif><img src=../img/blank.gif border=0></td>
<td background=../img/point44.gif><img src=../img/blank.gif border=0></td>
<td background=../img/point44.gif><img src=../img/blank.gif border=0></td>
</tr>
</table> |
|
|
|