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