4차 - 태그 기초강의

오늘은 (table)에 대하여 알아보겠읍니다

(table)의 설명을 글로서 표현 할려니 상당히
고민 스럽고 어렵군요.

개념을 하나의 종이 라고 생각 할까요.
우리가 글을 쓰려면 백지가 필요한데
(table)은 백지라고 생각하죠

여기에 가로칸을 만드는게 (td)이고
세로줄을 막는게          (tr)입니다

개념이 이해 안 되시더라도 그냥 따라 해 보셔요
많이 해 보면 이해가 갑니다
그리고 한가지만..
연습 하실때 그냥 복사해서 하지 마시고 반드시 모든 명령어를
직접 치세요. 그래야 늘어요, 이해도 되고

그럼..  아주 간단한 테이블을 우선 한번 만들어 보겠습니다.


간단한 테이블 예
(table border=2)
(tr)(td)테이블 1(/td)(/tr)
(/table)

결과보기

테이블 1

작은 테이블이 하나 생겼죠?

이번엔 그럼.. 가로 세칸, 세로 두줄의 테이블을 
만들어 보겠습니다.
가로 세칸 세로 두줄
(table border=2)
(tr)(td)1-1(/td)
(td)1-2(/td)(td)1-3(/td)
(/tr)
(tr)(td)2-1(/td)
(td)2-2(/td)(td)2-3(/td)
(/tr)
(/table)

결과보기

1-1	1-2	1-3
2-1	2-2	2-3

여기에서 볼 수 있듯이,
테이블의 시작과 끝은 (table)과 (/table)로
표시되고 있습니다.

그리고, 각 가로줄(=행)은 (tr)과 (/tr)로 구분되고 있고,
(각 세로칸(=열)은 (td)과 (/td)로 구분됩니다.
그리고, 이 사이에 내용이 들어가게 됩니다.

이제 좀 더 발전해서, 칸을 합치고 싶으면
어떻게 할까요?
우선 윗줄의 세칸을 모두 합쳐 봅시다
(table border=2)
(tr)(td colspan=3)1-1 (/td)(/tr)
(tr)(td)2-1(/td)
(td)2-2(/td)(td)2-3(/td)
(/tr)
(/table)이렇게 하면

결과보기

1-1
2-1	2-2	2-3

윗줄이 모두 한 칸으로 바뀐 것을 볼 수 있습니다.
눈치가 빠른 분은 어떻게 합치는 지 벌써
아실지도 모르겠네요..

가로 방향으로 2칸 합치기 위해서는
td 태그 안에, colspan=2 라고 써 줍니다.

만일 5칸을 합치고 싶다면,
colspan=5 라고 쓰면 되겠지요..
그리고, 주의사항..
원래 윗줄은 세 칸이고,
그래서, 윗줄엔 td 태그가 세개 있었습니다.
하지만, 맨 첫 칸에서 세 칸 합치는 명령을 내렸으니까,
뒤에 있던, 두개의 td 태그는 지워야 합니다.
자 그럼.. 머리가 좀 복잡 하시겠지만
조금씩 이해 하시리라 생각 합니다

마지막으로 한번만 더 해보겠습니다.
이번에는 좀 더 어려운 것.. 3x2의 테이블에서,
1-1 칸과 2-1 칸을 합치고, 1-2칸과 1-3칸을 합쳐보겠습니다.

1-1 & 2-1	1-2 & 1-3
	2-2	2-3

(table border=2)
(tr)
(td rowspan=2) 1-1 & 2-1 (/td)
(td colspan=2) 1-2 & 1-3(/td)
(/tr)
(tr)
(td) 2-2 (/td)
(td) 2-3 (/td)
(/tr0
(/table)이렇게 소스를 주었답니다


여기서 보셨듯이,
td 태그 같은 것은 줄을 바꾸어 써도 전혀 상관이 없습니다.
가로 방향으로 합칠때는 colspan를 썼고,
세로 방향으로 합칠때는 rowspan을 사용합니다.

아래아 한글을 쓰보신분은 알겠지만
한글에서 표그리기의 셀 나누기 셀 합치기
칸 나누기 칸 합치기와 같은 효과를 내는것입니다.

홈페이지 만들때는 꼭 알아야 할 사항 이지만
간단한 글을 올릴때나 메일 보낼때는
이런 복잡한걸 몰라도 충분해요

그럼 메일 보낼때나 글 올리기위한
테이블의 속성을 알아보겠읍니다

1. border=원하는수
테이블의 테두리 선 굵기를 1 에서20 픽셀로 지정
(원하는 만큼 적으면 됩니다). 이 값을 0으로 놓으면,
테이블 테두리가 사라지죠.

2. width=원하는 크기의 수
테이블의 전체 폭을 픽셀로 지정 합니다
(보통300에서800까지가 적당).
여기서 width=60%와 같은 식으로 주면,
전체 창 크기의 60%로 테이블의 크기를 정하게 되지요.

3. height=200
테이블의 전체 높이를 지정한다.
사용법은 폭 정하는 법과 같습니다.

4. cellspacing=띄우고 싶은 만큼 의 수를 넣음
칸과 칸 사이의 간격을 픽셀로 지정(5에서 50 사이가 적당).

5. cellpadding=띄우고 싶은 만큼 의 수를 넣음
"칸의 테두리"와 "그 안에 쓰여지는 내용" 사이의 간격을 지정.

6. bordercolor=원하는 색 이름
테두리의 색상을 지정.

7. bgcolor=원하는색이름
내용이 들어가는 부분의 배경색을 지정.

모든 속성에 숫자는 원하시는데로 바꾸어 넣어서 실험해보세요

그럼 예를 보죠
(table bgcolor=yellow width=400 height=300 border=20
cellspacing=10 cellpadding=5)
(tr)
(td)
넣고 싶은글.marquee와 font를

지금까지 배운데로 넣으면 됩니다
(/td)(/tr)(/table)
결과보기

넣고 싶은글.marquee와 font를 지금까지 배운데로 넣으면 됩니다

이상이 테이블 만드는 방법입니다
크기를 마음대로 조정하여 지금까지 배우신걸
테이블 속에 넣으면 훌륭한 글이 나올 거예요

팁; 태그로 올린글을 연구하세요
    소스를 보시고 이건 이렇게 했구나
    저건 저렇게해서 된것이구나,보면 알것입니다
    소스보는법은 수정&회람을 눌러보면
HTML로 작성된 원본이 나옵니다