웹문서 제작에 가장 숙련도를 요구하는 태그로 TABLE 태그가 있다.
웹문서에서 TABLE 태그는 내용물 전체의 배치를 위한 뼈대를 제공하고,
내용물을 직접 나타내기도 하며, 이미지와 더불어 디자인의 중요한 한 요소를 차지하고 있다.

웹문서 제작에 있어 많은 시간을 들이는 부분이기도 하고 문서내 태그중에 대부분을 차지하기도 한다.

실제 서비스되는 웹문서에서 모든 내용물은 테이블 속에 담겨져 있다고 가정하면 된다.

TABLE의 만들기

테이블의 구성요소는 행과 열 (줄과 칸) 이다.

최고 바깥에 <table> ~~ </table>
이 속에는 여러 줄의 <tr> ~~</tr>
또 이 속에는 여러 칸의 <td> ~~ </td> 로 구성된다.

아래 소스 정도는 직접 메모장에서 연습을 해보는게 좋다. 나중엔 툴을 이용하기 때문에 2-3년된 사람이 태그를 모르는 경우도 많다. 물론 일을 할 때는 툴의 힘을 빌리지만 세세한 부분은 직접 소스를 건드려야 할 경우가 많고 프로그래밍이 포함된다면 소스를 손대지 않으면 안된다~~~

■ 1줄 1칸 테이블

* 이제 2칸으로 만들어 보자 !!! 칸을 의미하는 <td>내용</td> 를 하나 더 준비 !!

■ 1줄 2칸 테이블

* 이번엔 2줄로 만들어 보자 !!! 줄을 의미하는 <tr>~~</tr> 를 하나 더 준비 !!

■ 2줄 2칸 테이블

* 이번엔 두개의 테이블을 만들어 보자 !!! 테이블을 의미하는 <table>~~</table> 를 하나 더 준비 !!

■ 2줄 2칸 테이블이 두개 !

* 이번엔 두개의 테이블을 옆으로 나란히 배치해 보자!!!

■ 테이블 두개를 옆으로 배치 !

TABLE의 칸을 가로 세로 합치기

앞에서서 테이블 만드는 연습을 했다. 이제 가로로 또는 세로로 합치는 것만 마스타 하면 테이블 구조는 모두 끝나게 된다.

이력서 양식 같은 데서 많이 봤겠지만 몇개 셀을 합쳐서 하나의 셀로 사용하고자 하는 경우 가로 또는 세로로 합치는 걸 알아야 한다.

■ rowspan : 가로로 합치기

* 위 테이블에서 서울이 중복되는 경우이므로 한 칸으로 합쳐서 표현할 수 있다!!

■ 결과

■ colspan : 세로로 합치기

* 위 테이블에서 인원단이 중복되는 경우이므로 한 칸으로 합쳐서 표현할 수 있다!!

■ 결과

* 한개 문서 전체의 내용을 테이블 하나로 표현하고자(자랑이 아님!) 무리한 rowspan, colspan 을 사용해서는 안된다. 최대한 테이블 단위로 내용물을 분리하고 꼭 필요한 경우에만 사용하도록 !!! (만들 때 , 수정할 때 시간이 걸리지 않도록...)

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 태그의 BORDER 속성을 이용해서 경계선(테두리) 를 다양하게 표현하는 방법을 알아본다.

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

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


■ border

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

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

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

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

TABLE의 BackGround 와 BgColor 로 배경 꾸미기

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

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

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

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

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

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

■ CellPadding / CellSpacing

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

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


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

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

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

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

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

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

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

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

TABLE의 Width 와 Height 값 사용하기

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

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

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

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

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


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

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

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

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

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

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

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

테이블 태그 활용하기


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

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

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

■ 왼쪽 메뉴 리스트 만들기

*** 여기까지 테이블 태그를 마치고 자바스크립트로 넘어가면 된다

폼태그,레이어 가 있지만 이는 자바스크립트를 통하여 콘트롤되므로 자바스크립트에서 만나게 될 것이다~~~

*** 장시간 허접한 html 공부를 한다고 수고했네여!