테이블 태그 사용법 공부

일반적으로 게시판에 글 을 올릴때 <table> <tr> <td> 등등의 html 태그를 사용하여 글을 작성하거나  이 태그를 사용한 남의 글을 퍼다가 올리는 경우가 많이 있습니다.

게시판에 올려진 위의 태그를 사용한 글을 보면 가끔 화면이 이상하게 찌그러져 보이거나 이상하게 보여지는 경우가 있는데, 원인은 모두가 한결같이 <table>태그를 잘 못 써서 그렇게 되는것입니다.

<table> 태그를 제대로 잘 만 사용한다면  얼마든지 예쁜 모양의 화면을 만들 수 있지만 잘 못 사용하면 그야말로 깨지고 찌그러지고 난리가 납니다.

그렇다고 이 <table> 태그의 사용이 복잡하고 어렵냐 하면 절대로 그렇지 않습니다.

아래 두 가지 공식만 유의한다면 아주 쉽게 자기가 원하는 대로 예쁜 모양의 테이블을 만들 수 있습니다.

▶ 시작 과 끝이 꼭 있어야 합니다.

<table><tr><td> 는 테이블을 연다는 뜻입니다.

이 다음에 내용이 들어가겠지요?

그리고 그 뒤에 테이블을 닫는다는 뜻의 </td></tr></table> 이 붙어서 끝이 납니다.
테이블을 열었는데 닫는 걸 잊는다면 테이블은 저 스스로 이 </td></tr></table> 을 찾아서 뒤의 글들을 뒤지고 법석을 떨다가 다른 테이블에 붙어있는 </td></tr></table> 이란 태그를 찾아내어 그 것으로 닫으려고 애를 씁니다, 못 찾는 경우에도 마찬가지지만 결국 그렇게 억지로 테이블을 닫으려고 애를 쓰다보니 화면이 깨지고 찌그러지는 것입니다.

▶ 작성순서를 꼭 지켜야 합니다.
<table><tr><td>..............</td></tr></table> 의 순서가 바뀌어도 안되고 한개라도 빼먹거나  더 집어 넣어도 안 됩니다.

여기서 </ >는 해당 태그를 끝을내고 닫는다는 뜻입니다.

반대로 해석하면 / 가 없는 < >표시는 시작을 의미하는 것이겠지요..

테이블 태그를 자세히 들여다 보면 대충 이렇습니다.

-----------------------------------------------------------------------------

<table border="0" cellspacing="0" cellpadding="0" width="500" height="300" bgcolor="#999999">

<tr align="center">

<td width="500" align="left">

<img src="http://www.kw21.net/img/강아지.jpg" width="500" height="300">

<embed src="http://www.buddhistmusic.co.kr/pds/bbsUpFiles/보석사(경음악).asf"  autostart=true hidden=true>

</td>

</tr>

</table>

---------------------------------------------------------------------------

위의 내용들을 하나하나 설명해 보겠습니다.

☆ border="0"
테이블 의 선을 볼록하게 보여지게 한다는 뜻입니다. 여기서 수치는 볼록한 정도를 표시하는 숫자인데 숫자가 클 수록 많이 볼록해 집니다. 여기서 "0" 은 하나도 볼록하지 않게 한다는 뜻입니다.

☆ cellspacing="0"
테이블 선의 굵기를 표시합니다. 얼핏 border 라는 놈과 의미가 비슷하게 느껴지기도 하지만 전혀 다른 놈이지요.

border 라는 놈과 cellspacing 이라는 놈의 수치를 잘 만 요리하면 액자모양 등등 아주 예쁜 테이블을 만들 수 있습니다. 여기서 "0" 의 수치는 선 굵기가 전혀 없다는 뜻,

즉 테이블 선이 안 보인다는  뜻입니다.

당연히 수치가 높아지면 선 굵기가 더 굵어지겠지요?

☆ cellpadding="0"
테이블 선과 안의 글씨나 그림의 여백 정도를 표시합니다.
선과 글씨 사이의 공백이 보이지요?  바로 이 공백의 정도를 표시하는 것입니다.

테이블  수치가 "0"이 되면 공백이 전혀 없이  보여지겠지요?

그럼 수치가 높아지면? 공백이 그 수치만큼 더 넓어지게 되겠지요.

☆ width="500"
테이블 사이즈(폭)을 지정하는 기호입니다.

수치의 단위는 pixel 입니다.
width=500 의 의미는 500 pixel 길이(폭) 으로 테이블을 만들겠다는 뜻입니다.

가끔 보면 width=100% 라고 표시하기도 하는데 전체 화면의 몇 % 넓이로 지정한다는 뜻입니다.

☆ height="300"
위의 width 가 테이블의 길이를 지정하는 것이라면 이 놈은 테이블의 높이를 표시하는 놈입니다.
단위는 마찬가지로 pixel 이고요... 이 놈도 역시 수치대신 %  로 표시할 수 도 있습니다.

☆ bgcolor=#999999
이 놈은 중요한 놈이니까 잘 귀담아 들으셔야 합니다.
bgcolor 의 bg 는 백그라운드 (background) 의 약자이고 배경이란 뜻인데 (color 는 그냥 칼라고....) 배경색이란 말이지요. 정리하면 테이블의 바탕색을 말합니다.
#999999 처럼 수치로 표시하기도 하지만 bgcolor=red, bgcolor=black 처럼 그냥 문자료 표시해도 됩니다.
수치로 표시되는 것은 칼라 기호이며 수천가지나 되는 색상으로 머리나쁜 사람이 외우려고 애를 쓰는 우를 범하지 않기를 바랍니다.

색상기호표나 포토샵을 이용해서 원하는 색상의 수치를 선택하면 됩니다.

아니면 그냥 red, black, white 처럼 문자로 표시해도 무방합니다.

☆ align="center"
테이블 안에 들어가는 글씨나 그림을 정렬하는 방법을 지정하는 것입니다.
center(중앙) 외에 left(왼쪽정렬) 과 right(오른쪽정렬) 이 있습니다. 위 아래 정렬을 지정하는 것으로는 valign=top(위로 정렬), valign=middle(중간정렬), valign=bottom(아래로정렬)의 3가지가 있습니다.

☆ <img src="http://www.kw21.net/img/강아지.jpg" width="500" height="300">
img src 란 뜻은 이미지불러오기란 뜻인데 = 뒤에 오는 것은 이미지가 있는 서버의 경로를 표시하는 것으로 위위 경우를 예를 들면 kw21.net 의 서버안에 img 란 폴더내에 있는 강아지.jpg 파일을 불러오란 의미입니다.

그림 사이즈는 원래 서버안에 있는 그림 사이즈가 얼마이던 간에 가로 500pixel, 세로 300 pixel 사이즈 크리고 보여주란 소리고, 이 사이즈를 명시하지 않으면 원래의 그림 사이즈 그대로 보여줍니다.

☆ <embed src="http://www.buddhistmusic.co.kr/pds/bbsUpFiles/보석사(경음악).asf"  autostart=true hidden=true>
embed src 란, 동영상이나 음악파일을 불러와 틀어주란 뜻으로 = 뒤에 붙는 것은 그 파일이 있는 곳의 경로를 표시해 주는 것입니다.
autostart=true 라는 것의 의미는 게시판을 열면 따로 플레이 단추를 누르지 않더라도 자동으로 동영상이 뜨던 음악이 나오라는 소리입니다.

수동으로 플레이 단추를 눌러야 동작을 하기를 원하면 autostart=false 라고 하면 됩니다.
hidden=true 라는것은 무슨 소리냐 하면 플레이 스톱 단추가 있는 판넬이 보이지 않게 감추라는 뜻입니다.

반대로 보여지게 하려면 hidden=false 라고 하면 되겠지요?

이상으로 테이블 태그 강의를 마칩니다.

위의 태그에서 지정하는 수치를 직접 바꾸어 가면서 어떻게 달라지나 연습을 해 보는 것으로 실력이 저절로 향상이 될 것입니다.

다시한번 정리하면 테이블을 열면 꼭 닫기를 하는 것을 잊어서는 안되고,

나열하는 순서가 틀리거나  하나라도 빼먹거나 더 집어 넣으면 절대로 안 된다는 것을 명샘해 주시기 바랍니다.