테이블의 기본구성방법과 셀합치기 나누기등을 공부하였으면 이제 이런 간단한 태그를 이용한 응용방법을 알아보도록 하자. 우선 가장 많이 응용되는 테이블이용 경계선있는 박스 만들기는 다음과 같다.
| 테이블 제목 | | 이곳의 들어가는 내용은 내가 원하는 글을 넣을 수 있다. 당신의 원하는 만큼 코딩도 가능하며 배경색에 어울리는 그림도 삽입 할 수 있다. |
|
|
| HTML Source |
<table border=0 width=200 cellpadding=0 cellspacing=0>
<tr><td bgcolor=black>
<table border=0 width=100% cellpadding=5 cellspacing=1>
<tr><td bgcolor=black align=center><font color=white>테이블 제목</font></td></tr>
<tr><td bgcolor=white>
이곳의 들어가는 내용은 내가 원하는 글을 넣을 수 있다. 당신의 원하는 만큼 코딩도 가능하며 배경색에 어울리는 그림도 삽입 할 수 있다.
</td></tr>
</table>
</td></tr>
</table> |
|
| 설명 | 테이블을 멋지게 응용하기 위해서는 다음의 두개의 테이블구성성분을 이해하여야 한다.
cellpadding 과 cellspacing은 테이블의 옵션입니다.
테이블을 하나 만들어보죠 가로세로 2개의 셀을 가지는 테이블을
만들어보면 다음과 같이 나온다고 생각하고 설명하죠
┌──────┬──────┐
│ (1,1) │ (1,2) │
├──────┼──────┤
│ (2,1) │ (2,2) │
└──────┴──────┘
셀이란 (1,1) (1,2) (2,1) (2,2) 와 같이 테이블을 구성하는
각각의 영역을 말합니다. (1,1)셀은 첫번째줄 첫째칸의 셀이고
(1,2)셀은 첫번째줄 두번째 셀이라고 하면 셀과 셀의 간격을
픽셀로 조정하는게 cellspacing 입니다.
cell + spacing = cellspacing ( 셀사이 여백)
cellpadding은 셀안의 내용이 셀의 외곽에서 얼마나 떨어져 있는가를
조정합니다.
cell + padding = cellpadding ( 셀 안의 내용과 셀과의 간격 )
그냥 테이블안에 이런것을 안쓰면 디폴트로
cellpadding=3 cellspacing=3 이란것이 들어갈겁니다.
그런데 만약 cellpadding=0 cellspacing=0 이라고 하면 어떻게 될까요?
셀과 셀의 간격이 없고 셀과 셀안의 내용과 간격이 없으므로
다닥 다닥 붙은게 나오겠죠? 이런 것들을 이용하는게 바로 테이블의 응용입니다. 패딩과 스페이싱을 제로로 잡으면 셀과 셀이 붙고 셀안의 내용과 셀과 붙어버리기 때문에 테이블 안에는 여백이라고는 하나도 없게되는거 이게 중요합니다.
그래서 커다란 그림을 부분 부분으로 쪼개어 따로 따로 저장하고 이런 그림을 하나의 그림으로 보여지게 하는 부분이 바로 이 부분이죠. 즉 위에서와 같이 4개이 셀을 가지는 테이블 각각의 셀안에 방금 따로 따로 저장한 그림을 삽입하면 그림과 그림사이에 여백이 없기 때문에 그림이 마치 붙어 있는 듯한 효과를 주게되는 원리입니다.
|
|
| 테이블 제목 | | 이곳의 내용은 각자 원하는 글을 넣을 수 있습니다. 당신의 원하는 만큼 코딩도 가능합니다. | | written by Tianai |
|
|
|
|
