메뉴 건너뛰기

조회 수 657 추천 수 57 댓글 2
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 수정 삭제




(컴 교실의 설명 /퍼온 글 ) (응용하고 싶은분을 위해 쏘스를 올립니다)
table은 html의 꽃이라고 할만큼 아주 중요합니다
우선 TABLE TAG와 그 속성들을 한번씩 읽고 갈가요?.
.(table)(/table> 테이블 태그에 맨처음과 맨 끝에 들어갑니다.

(table)(/table> 테이블 태그에 맨처음과 맨 끝에 들어갑니다.

(tr>(/tr> 한 행을 만들어 줍니다..

(caption>(/caption> 표에 제목을 나타냄 .

(td>(/td> 한 셀을 만들어 줍니다..

(th>(th> 셀 제목을 나타냅니다..
.

부가적 속성 기능.

CELLSPACING=수치, 셀과 셀사이의 간격 조정.

CELLPADDING=수치, 셀 내부에 간격 조정 .
WIDTH=수치, 가로 넓이를 지정한다..
HEIGHT=수치, 세로 높이를 지정한다 .
border=수치, 표에 테두리 두께 조정.
(TD COLSPAN=가로셀수 ROWSPAN=세로셀수> .
셀을 가로,세로로 합치고 싶을때 사용 .
.
align="left"(가로 정렬) valign="top" (세로 정렬)
align="center" valign="top"


태그를 공부할때 많이 사용하는 속성들을
빨리 이해 하려면 다음의
border,cellpadding,cellspacing,width,height,의
숫치를
1,5,10, 50, 100, 200, 등으로 하나 하나 바꾸어 보세요
그렇게하여 실행시켜보세요
위에 있는 태그속성들을 모두 한번씩 실행해 보세요
아! 그렇구나 1
생각이 들때까지.....
실행시켜서 확인하는것이
가장 큰 깨닫음이요 지름길이죠
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
(table border=5 cellpadding=10 cellspacing=10 width=400 height=100 bordercolorlight=red bordercolordark=blue)
(tr)
(td bgcolor=red)첫째칸(/td)
(td bgcolor=yellow>둘째칸(/td)
(td bgcolor=blue>셋째칸(/td)
(/tr)
(/table)
위의 소스의 (괄호)를 <꺽쇠>로 모두 바꾸어 실행 시켜 보세요
아래 보이는 이런 모양이 만들어 집니다







첫째칸 둘째칸 셋째칸

이것은 어제그제 올린 바탕 만들기로
세로로 된것입니다 .
이렇게 복잡할필요가 없어
한칸은 버렸습니다.
그리고  하나하나 떼어내어 조사하고
다시 모든것을 바꾸어 조립하여  
커다랗게  만들어 싸이트에 어울리게
했습니다 .
선배님
그래서 머리고리 아프지요 .
 
혼자서 떠들고 ,쓰고 ,죄송합니다.

다 아시는 분께서는  제가 얼마나
우스꽝스럽게 한다라고 생각하시고
눈가마 주시기 바랍니다.

17일날 올린것은  이것을 보고 응용한것입니다





~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
컴교실의 설명
(table border=5 cellpadding=10 cellspacing=10 width=400 height=100 bordercolorlight=red bordercolordark=blue)
(tr)
(td bgcolor=red>첫째칸(/td)
(td bgcolor=yellow>둘째칸(/td)
(td bgcolor=blue>셋째칸(/td)
(/tr) (tr)
(td)두째줄 첫칸(/td)
(td)두째줄 둘째칸(/td)
(td)둘째줄 새째칸(/td)
(/tr)
(/table) 설명끝
위의 소스의 (괄호)를 <꺽쇠>로 모두 바꾸어 실행 시켜 보세요
아래 보이는 이런 모양이 만들어 집니다











첫째칸 둘째칸 셋째칸
두째줄 첫칸 두째줄 둘째칸 둘째줄 새째칸

위의 예문도  제가 어제 만든것의  " 명령어 들인데 " 이것도 한 테이블 안에
여섯칸이지만  
옆으로 긴  아래위 칸 둘만 뽑아  다시
테이블의 색배합, 크기 , 테이블 테두리의 색갈 바탕과 매치 시키기 ~~
그렇게 수도없이 반복하여
끝낸는데 제가 한것은 견본보다 많이 크게 만들었습니다
이제는  응용된 명령어속에  사진,글 ,등을
맘대로 바꿔 끼워 넣기만 하면 됩니다 .
20일에 올린것은  이것을 응용한것입니다 .




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
위의 소스의 (괄호)를 <꺽쇠>로 모두 바꾸어 실행 시켜 보세요

첫째칸 둘째칸 셋째칸
두째줄 첫칸 두째줄 둘째칸 둘째줄 새째칸


colspan과 rowspan의 이해

rowspan=3(세로의 3칸을 합친다)
colspan=2(가로의 2칸을 합친다)

  • ?
    김 혁 2009.04.21 07:14

    TAG연습을 잘 가르처 주어서 고맙습니다.
    앞으로도 체계적으로 교재를 보여 주시기 바랍니다.

    미강후배께서 직접 창안을 하셨다니
    좋은 경험이 되셨겠습니다. 감사합니다.
  • ?
    미강 2009.04.21 08:44

    선배님
    컴에서 고생한 장님은 문고리도 잘 잡아요 .
    그처럼 장님 문고리 잡은거에요 .

    저 위의 간단해보이는 주소를 연습장으로 옮긴 후 부터가
    머리가 아픕니다 . 어떤때는 같은 색이라도
    제대로 안나오고 , 연습장에서 질서로웠던
    글들이 몽탕 붙어버리고 , 하여튼 참 복잡 하기 짝이 없습니다 .
    댓글 감사합니다.