앞의 예제에서는 테이블의 width가 고정되어 있어서 실제로 적용하기가 곤란합니다.

테이블 안의 내용이 늘어날 수록 자연적으로 늘어나게 만들려면 배경이미지를 사용해야 합니다.

<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>

보다유연한 점선 테이블입니다. 테이블 안의 내용이 늘어나면 자동적으로 배경이미지가 패턴으로 깔립니다.

이런 형태의 테이블을 자주 만들다보면 레이아웃을 잡아나가는 실력이 빠르게 향상됩니다.