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 |
|
|
|
* 첫번째 경우는 피하는게 좋겠다. 정확한 표현을 하는 습관을!!! * 두번째 경우는 정확한 넓이를 가지고 있다. 원하는 위치에 내용물 배치할 때 사용 * 세번째는 내용물을 경계에서 붙지 않도록 하고, 셀의 높이를 지정하지 않아도 될 경우가 많다. |
■ 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 적용 |
|
|
|
|
|
|
CellSpacing=5
|
CellSpacing=5
|
CellSpacing=5
|
테이블 사용시 Border,CellPadding,CellSpacing 은 꼭 지정하고 사용하는 습관을 !!! |
'Web(웹) Study > HTML & CSS' 카테고리의 다른 글
CSS우선순위 (0) | 2008.03.29 |
---|---|
css style 지정 순서 (0) | 2008.03.26 |
텍스트(TEXT) (0) | 2008.02.13 |
input 박스안에 미리 지정글 넣어두고 클릭하면 사라지게하는 소스 (0) | 2008.02.13 |
텍스트상자에 한글로 입력이 되게 하는 자바스크립트 (0) | 2008.02.13 |