table

WebPrograming관련 : 2007. 3. 11. 01:44
반응형

웹디자인/웹마스터 관련강좌 ㅣ HTML 강좌 ㅣ 테이블의 셀내,셀간 여백 (cellPadding,cellSpacing)


TABLE의 CellPadding 과 CellSpacing 을 이용한 테이블 디자인

CellPadding은 하나의 셀(칸) 에서 내용물과 셀 경계가 얼마나 간격을 둘지를 얘기하는 것이고 ... 이 값을 높이면 내용물에서 셀의 경계선이 멀어지게 된다.

CellSpacing은 개별 셀(칸)이 테이블이나 다른 셀로 부터 얼마나 간격을 줄 건지를 얘기하는 것 ... 이 값을 높이면 테이블로 부터 또는 다른 셀들과의 간격이 멀어지게 된다.

한가지 !!! 내용물 배치를 위한 뼈대를 만들 경우는 정확한 배치를 위해 둘다 "0" 을 사용한다.


■ CellPadding / CellSpacing

CellPadding 지정(X)
CellSpacing 지정(X)
Border 지정(X)
CellPadding=0
CellSpacing=0
Border=0
CellPadding=3
CellSpacing=0
Border=0
   
   
abc 하하
하하 abc
abc 하하
하하 abc

* 첫번째 경우는 피하는게 좋겠다. 정확한 표현을 하는 습관을!!!
* 두번째 경우는 정확한 넓이를 가지고 있다. 원하는 위치에 내용물 배치할 때 사용
* 세번째는 내용물을 경계에서 붙지 않도록 하고, 셀의 높이를 지정하지 않아도 될 경우가 많다.



■ CellSpacing 으로 가늘게 경계선 그리기


* 항목을 배치할 때는 CellPadding을 꼭 사용하는 게 좋다. 경계선에 붙지 않도록 !!!

* 다음에 나오는 선은 Table의 바탕색이 CellSpacing 값 만큼 선으로 나온다


하늘을 가리는 천정(table) 이 있고 바탕색(bgcolor)은 파란색이라면...

그 천정이 4개의 조각(td) 으로 되어 있는데 바탕색(bgcolor)은 흰색이라면...

4개의 조각(td)이 빈틈없이 천정(table)을 덮고 있을 때는 하늘의 파란색(table bgcolor)이 보이지 않았는데...

4개의 조각들(td)의 사이(CellSpacing)를 1픽셀씩 벌린다면 ...

하늘의 파란색이 그 사이로 보이게 된다!!! 그게 선처럼 보이는 것!

CellPadding=3
CellSpacing=1
Border=0

table 에 bgcolor 적용
td 에 bgcolor 적용
CellPadding=3
CellSpacing=1
Border=0

table 에 bgcolor 적용
td 에 bgcolor 적용
CellPadding=3
CellSpacing=1
Border=0

table 에 bgcolor 적용
td 에 bgcolor 적용
abc 하하
하하 abc
abc 하하
하하 abc
abc 하하
하하 abc
abc 하하
하하 abc
abc 하하
하하 abc
abc 하하
하하 abc
CellSpacing=5
abc 하하
CellSpacing=5
abc 하하
CellSpacing=5
abc 하하

테이블 사용시 Border,CellPadding,CellSpacing 은 꼭 지정하고 사용하는 습관을 !!!

반응형
Posted by Real_G