TABLE의 수평,수직 정렬

테이블에서 정렬시 테이블관련 속성에서 지원하는 align을 사용하도록 하자!!!
새로운 <p align=center> 내용 </p> 태그를 사용할 필요가 없고 기존 td 태그에서 처리되므로 훨신 깔끔하다.

table은 align 을 , td 는 align 과 valign을 가진다 (* tr은 사용할 필요가 없을 것임)
align은 테이블 또는 내용이 수평적으로 왼쪽,가운데,오른쪽으로 배치하라는 설정이고,
valign은 내용물이 수직적으로 위로,가운데,아래로 배치하라는 설정이다.

■ table 차원의 align

* 이 테이블이 가장 바깥쪽 테이블이라면 테이블 차원의 정렬을 줄 수 있다.
* 이 테이블이 다른 테이블의 td속에 있다면 td 의 정렬을 이용하여야...!!!

*가운데 배치라면 더 상위에서 <center> ~~~</center> 태그로 정렬을 하는게 좋다



■ td 에서의 수평 정렬 : 해당 td 내에서의 내용물의 align

* 이 테이블이 가장 바깥쪽 테이블이라면 테이블 차원의 정렬을 줄 수 있다.
* 이 테이블이 다른 테이블의 td속에 있다면 td 의 정렬을 이용하여야...!!!

*가운데 배치라면 더 상위에서 <center> ~~~</center> 태그로 정렬을 하는게 좋다



■ td 에서의 수직 정렬 : 해당 td 내에서의 내용물의 valign

TABLE의 Width 와 Height 값 사용하기

테이블은 용도에 따라 width, height 를 정하기도 하고 정하지 않기도 한다.

사용시에는 table태그에서 전체 width를 정하고 각 td 태그에서 width를 다시 쪼개서 할당하는 형태로 사용하게 된다.

간혹 내용물이 이미지이거나 테이블 형태인 경우 내용물의 크기가 더 크면 테이블은 이에 맞춰 자동으로 늘어나게 된다.

이럴 경우는 이 테이블은 width를 정하지 않아도 되는 경우이다.

보통의 경우 height 는 정하지 않고 사용하는 경우가 많다. 내용물의 길이만큼 테이블 height를 맡겨두면 된다.


한가지 !!! 가능하면 하나라도 손을 대지 않는 방향으로 해 두는게 시간적으로 유리!

테이블의 경계선(테두리)

TABLE 태그의 BORDER 속성을 이용해서 경계선(테두리) 를 다양하게 표현하는 방법을 알아본다.

한가지 !!! 내용물 배치를 위한 뼈대를 만들 경우는 대체로 border=0 을 사용한다. BORDER 값에 따라 테이블의 실제적인 외곽이 다르게 나타나기 때문이다.

* BgColor , CellPadding , CellSpacing 은 적용하지 않았는데 이를 적용하면
다양한 효과를 낼 수 있다


■ border

* border 를 지정하지 않으면 테두리가 생기지 않는다 (그래서 바탕색을 넣었다)
* border =0 도 테두리가 생기지 않는다 (그래서 바탕색을 넣었다)

■ borderColor(*border 가 값이 있을 때 유효)

■ borderColorLight, borderColorDark (*border 가 값이 있을 때 유효)

* 두가지 속성 적용시 bordercolor 가 무시 당한다

■ Width * 주로 table 태그와 td 태그에

TABLE의 BackGround 와 BgColor 로 배경 꾸미기

테이블 속에 배경색상이나 배경이미지를 넣을 수 있다.

배경색상은 배경색이 되기도 하고 선으로 나타나기도 한다.
이미지를 배경으로 넣게 되면 그 위에 다른 이미지나 텍스트를 배치할 수 있게 된다.

■ bgcolor * 주로 table과 td 태그에 사용된다

■ background * 주로 table과 td 태그에 사용된다

* 테이블 태그를 정복하는 건 많은 연습과 다양한 문서를 많이 만들어 보는 게 가장 빠른 길이다. 일부러 해보기는 힘들 것이므로 무료 홈페이지 계정을 받아 많은 html문서를 만들어 보는 게 좋은 방법이다.

또 하나 좋은 방법은 유명 사이트의 초기화면을 이미지 다운 받아 그대로 본인의 힘으로 재현해 보는 것도 테이블 테그를 극복하는 지름길이다. (국민은행 초기화면 같은 ...)

* 아래 테이블인 경우 table width=400 으로 정하고 각 td width 는 최상위 첫째 칸에만 준다. 기준이 되는 칸이 width를 가졌기 때문에 아래까지 주면 일만 많아지고 수정시 마우스가 바빠진다!!!

* 여러 칸 width를 정하는 경우 때에 따라 어느 한칸은 width를 주지 않는다.
남은 width가 얼마인지 계산하지 않아도 된다.

■ CellPadding / CellSpacing

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

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


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

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

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

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

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

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

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

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

■ height * 주로 table 태그와 td 태그에

* height 를 주지 않으면 좋지만 꼭 줘야 할 경우는 첫줄에만 height 를 !!!
cellpadding으로 적당한 height가 나오는 경우가 많다.

* table height 가 80 인 경우 두 줄이 필요하다면 때에 따라 어느 한 줄은 height를 주지 않는다. 남은 height가 얼마인지 계산하지 않아도 된다.

테이블 태그 활용하기


테이블관련 태그를 효과적으로 사용한다면 상당한 디자인 효과뿐만 아니라 1픽셀의 오차도 없는 정밀한 웹문서 제작이 가능해진다.

이제부터라도 몇픽셀인지 모르고 사용하는 일이 없도록 하고!!!
만들고 또 만들어 볼 것을 권한다 !!!

서핑 도중에 좋은 테이블 태그를 만나면 반드시 소스분석을 ...
그러면 1달을 공부해도 1년 근무한 사람과 같은 실력을 갖게 된다?!

■ 왼쪽 메뉴 리스트 만들기