table

웹디자인/웹마스터 관련강좌 ㅣ 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 은 꼭 지정하고 사용하는 습관을 !!!