이번에는 테이블을 이용한 박스 만들기에서 제목부분에 그림을 같이 사용해보자. 이렇게 하면 전체 박스를 이미지를 사용하지 않아도 그냥 하나의 이미지만으로 마치 전체 박스가 하나의 이미지인듯한 착각 효과를 부여한다.

Table Example


테이블의 내용을 적는곳


HTML Source


<!------------------------------------------------
첫번째 테이블 지정 외곽을 나타낸다. 패딩과 스페이싱이 제로이다. 그리고 테이블의 넓이는 삽입하고자 하는 그림의 넓이와 일치시킨다. 예제처럼 그림밑에 바로 테이블을 위치시키기 위해서는 넓이를 강제지정해야 한다.

그림아래 어떤 내용을 담을 예정이므로 2*1 테이블을 만든다 첫번째 줄에는 그림을 그리고 두번째 줄에는 내가 원하는 내용을 담는다. 첫번째 줄과 두번째 줄에는 여백이 하나도 없으므로 붙어버리고 두번째 줄에 내가 원하는 내용을 넣기 위해 그 내용을 다시 테이블로 작성하는 방식이다.

따라서 두번째 줄에 들어가는 테이블은 셀페딩과 셀스페이싱이 각각 5와 1임을 주의해서 봐야 한다. 여기서 테두리를 확정짓는 부분이 셀스페이싱 부분이다.

전체적인 테이블의 테두리를 더 두껍게 하고 싶으면 1이 아니라 2, 3, 4, .. 이런 식으로 높이면 된다.  

cellpadding=5 가 하는 역활은 이제 셀안의 내용이 셀과 얼마나 떨어져 있게 할까하는 부분을 결정한다. 역시 5보다 크게 잡을 수 있으며 크게 잡으면 잡을 수록 셀과 내용과의 거리는 멀어지고 작아질수록 가까워진다.
------------------------------------------------>

<table border="0" cellpadding="0" cellspacing="0" width="171">
<tr><td><img src="그림파일지정" border=0></td></tr>
<tr><td bgcolor=#4273bd>

<!-- 두번째 테이블 내부 테이블을 나타낸다 -->
<table border=0 cellpadding=5 cellspacing=1>
<tr><td bgcolor="#ECECFF">
테이블의 내용을 적는곳
</td></tr></table>

</td></tr></table>