<table style="border:1 dotted #000000">

<table> 태그 안에 style="border:1 dotted 색" 을 추가하면 됩니다. 익스플로러 5.5 이상에서만 작동한다는 단점이 있습니다.

<table border="0" cellspacing="0" cellpadding="1" background="./img/dotbg.gif">
  <tr>
    <td>
      <table border="0" bgcolor="#FFFFFF">
        <tr>
          <td>신</td>
          <td>의</td>
        </tr>
        <tr>
          <td>키</td>
          <td>스</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

바둑판모양의 배경그림이 들어 있는 큰 테이블 안에 흰색배경의 작은 테이블을 집어 넣는 방법입니다. 이렇게 하면 큰 테이블의 배경이 작은 테이블에 의해 가려지게 됩니다. 모두 가려지는 것은 아니겠죠? 큰 테이블 안의 여백을 1로 했기 때문에 여백만큼의 배경은 보이게 됩니다.

따라서 브라우저 상에서 볼 때는

'큰 테이블의 배경=작은 테이블의 테두리' 가 되는 것입니다. 눈속임 이라고 할 수 있죠^^

<table border="0" cellspacing="1" background="./img/dotbg.gif">
  <tr>
    <td bgcolor="#FFFFFF">신</td>
    <td bgcolor="#FFFFFF">의</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">키</td>
    <td bgcolor="#FFFFFF">스</td>
  </tr>
  </table>

테이블 배경을 바둑판 형식으로 채우고 난 다음, 셀(td)과 셀 사이에 1픽셀만큼의 공백을 준 형태입니다. 셀과 셀 사이 공백 사이에만 테이블의 배경그림이 보여지게 됩니다. 셀의 색을 지정하지 않으면 셀이 투명이 돼서 테이블의 배경그림이 모두 그대로 드러나게 되기 때문에 셀에는 배경색을 넣었야 합니다(예제에서는 #FFFFFF 색)

왼쪽에 보이는 그림은 가로 4 X 세로 4의 이미지를 확대한 모습입니다. 검은 부분을 제외한 나머지 부분은 테이블의 배경색에 맞춰도 되지만, 투명처리 하시는 게 좋겠죠. 그래야 다른색의 문서나 테이블에도 무난하게 사용할 수 있으니까요.

그림을 만들 때는 저렇게 작게 만드는 것보다는 위에서 다운 받은 그림처럼 반복된 이미지를 더 확장해서 만들어 주시는 것이 좋습니다[ ☞ 확장된 이미지 보기 ]. 너무 작은 그림이 테이블의 배경으로 채워지게 되면 브라우저에서 그림을 불러들여서 테이블에 채우는 데 걸리는 시간도 오래될 뿐더러, 스크롤바가 생기는 긴 문서의 경우, 스크롤바를 움직일 때 화면이 툭툭 끊기면서 물결치는 것처럼 보이게 됩니다. 저런 형태의 그림은 이미지를 확장한다 해도 사용되는 색상이 고작 한두가지이기 때문에, 용량이 크게 늘지도 않습니다. ( 줄과 줄 사이가 점선으로 처리 돼 있는 게시판의 경우 이런 현상을 종종 보셨을 겁니다. 스크롤바를 내릴 때 출렁거리는..)

역시 가로 4 X 세로 4의 이미지를 확대한 모습입니다. 위 그림과 약간 다르죠? 위의 그림은 1픽셀짜리 4개가 찍혔지만, 이번 그림은 2픽셀짜리 두개가 찍혔습니다[ ☞ 확장된 이미지 보기 ]. 테이블을 만들어볼까요?

역시 가로 4 X 세로 4의 이미지를 확대한 모습입니다. 이렇게 바탕그림으로 움직이는 그림을 넣으면 테이블의 선이 움직이는 것처럼 보입니다[ ☞ 확장된 이미지 보기 ].