테이블 태그 1

그냥저냥 쓰려다보니 알게돼서, 실제로 이게 제대로 알고있는건가 의문이 들긴하지만
요즘 책도 판타지소설만 읽다보니 책포스팅도, 일상 포스팅도 할 게 없어서 테이블태그를 한 번 써볼까한다.
뭐 누가볼까 싶지만... 말 재주가 없어서 말투가 딱딱하고 재미없을지도..


테이블 태그의 기본 구성은 이렇다.

(예제 1.)

<table border="1" cellspacing="0" cellpadding="0" > <tbody> <tr> <td width="100" height="30"> </td> </tr> </tbody> </table>

<table>과 </table> 사이에
<tbody>,</tbody>와 <tr></tr>, <td></td>가 들어가는 것이다.

그렇다면 <table>과 </table>의 차이인 '/' 바로 이 것, 이 것은 끝맺음? 정도로 생각하면 될 듯하다.

테이블 시작~ 테이블 시작 끝!
마찬가지로, tbody, tr, td도 시작과 끝이 있다. 시작과 끝은 한 세트.

그럼 테이블 태그를 하기 앞서서 알아야 할 것이 있는데 각각의 용어들이다.

table 테이블태그의 전체부분. 여기서부터 여기까지 테이블 태그예요~ 알려주는 부분이다.
tbody 테이블태그 몸체부분으로 tbody 안에 소스코드를 집어넣어야 태그가 반영된다.
tr 가로줄이라고 생각하면 된다.
td 칸이라고 생각하면 된다.

Border 선이라고 생각하면 될 듯하다.
Border-color 선 색깔
bgcolor 백그라운드컬러, 배경색이라고 생각하면 된다.
px 필셀의 줄임
Cellspacing 테이블 바깥의 여백을 지정해준다고 생각하면 될 듯 하다.
Cellpadding 테이블 안쪽의 여백을 지정해준다고 생각하면 될 듯 하다.
Width 가로길이를 지정할 때 쓴다.
Height 세로길이를 지정할 때 쓴다.
style 스타일을 지정해줄 때 쓴다.

대충 이정도만 알면 된다.

그럼, 예제1을 html에 적용시켜보면


이러한 테이블이 나오게 된다. 가로 100픽셀에 세로 30 선 굵기 1의 한 줄짜리, 한 칸짜리, 테이블인 것이다.



그럼, 테이블을 두 칸으로 만들어보자.
앞에서 칸은 td라고 했었다.

테이블태그는 단순해서, 무엇인가를 더 넣고 싶으면 소스코드를 더 적으면 늘어난다.
<td></td>가 한 칸이다.
<td></td>를 하나 더 넣으면 두 칸이 된다.

예제 1에 td세트를 하나 더 집어넣어 보았다.

<table border="1" cellspacing="0" cellpadding="0" > <tbody> <tr> <td width="100" height="30"> </td> <td width="100" height="30"> </td> </tr> </tbody> </table>

* 붉은색 부분이 새로 추가된 td세트

두 칸이 되었다. 100x30짜리 두개다.
말을 아주 잘 듣는게 테이블 태그의 매력...

그럼 칸도 늘려봤으니 줄도 한 번 늘려보자.
앞에서 줄은 tr이라 했으니 tr세트를 하나 더 넣어주도록 한다.

<table border="1" cellspacing="0" cellpadding="0" > <tbody> <tr> <td width="100" height="30"> </td> <td width="100" height="30"> </td> </tr> <tr> <td width="100" height="30"> </td> <td width="100" height="30"> </td> </tr> </tbody> </table>

* 붉은색 부분이 새로 추가된 tr세트

이렇게 해서 tr세트가 추가되어, 두 줄이 되었다!


이제, 정리를 해보겠다.

위에 녹색박스 안에 든 예제들을 보면 <table>이 가장왼쪽에 <tbody>가 다음으로, <tr>이 다음으로 <td>가 가장 안쪽에 있는 것을 볼 수가 있다.
테이블 태그의 구성요소에서 table>tbody>tr>td순으로
table이 가장 큰 놈,
tbody가 다음으로 큰 놈, 하지만 table한텐 못이겨서 table 안에서만 놀아야한다.
tr도 마찬가지로 tbody보다 작은 놈이니까 tbody 안에서만 놀아야하고
td 역시 tr보다 작은놈이니 tr안에서만 놀아야한다.

이 약육강식(?) 구조를 잘 알고만 있다면 재미난 것들을 만들어 볼 수 있다.

자세한건 내일 올려야징....
누가볼지도 모르고, 아무도 안볼지도 모르지만..
첫 글은 이만~