테이블 만들기 (아주 중요한 공부)

참조; 다음 태그에 사용되고 있는 (괄호)를<꺽쇠>로 바꿔줘야함 table은 html의 꽃이라고 할만큼 아주 중요합니다 우선 TABLE TAG와 그 속성들을 한번씩 읽고 갈가요?. . . (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" align="right" valign="top" align="left" valign="middle" 　 align="center" valign="middle" align="right" valign="middle" align="left" valign="bottom" 　 align="center" valign="bottom" align="right" valign="bottom , , 태그를 공부할때 많이 사용하는 속성들을 빨리 이해 하려면 다음의 border,cellpadding,cellspacing,width,height,의 숫치를 1,5,10, 50, 100, 200, 등으로 하나 하나 바꾸어 보세요 그렇게하여 실행시켜보세요 위에 있는 태그속성들을 모두 한번씩 실행해 보세요 아! 그렇구나 1 생각이 들때까지..... 실행시켜서 확인하는것이 가장 큰 깨닫음이요 지름길이죠 이제 table을 만들어 볼가요? 첫째칸 (table border=5 cellpadding=10 cellspacing=10 width=200 height=100) (tr) (td)첫째칸(/td) (/tr) (/table) 위의 소스의 (괄호)를 <꺽쇠>로 모두 바꾸어 실행 시켜 보세요 (table border=5 cellpadding=10 cellspacing=10 width=200 height=100> (tr> (td>첫째칸(/td> (td>둘째칸(/td> (td>셋째칸(/td> (/tr> (/table> 첫째칸 둘째칸 셋째칸 자! 조금 변화를 줘 볼가요? 색갈을 넣어보면? (table border=5 cellpadding=10 cellspacing=10 width=200 height=100) (tr) (td bgcolor=red>첫째칸(/td) (td bgcolor=yellow>둘째칸(/td) (td bgcolor=blue>셋째칸(/td) (/tr) (/table) 위의 소스의 (괄호)를 <꺽쇠>로 모두 바꾸어 실행 시켜 보세요 첫째칸 둘째칸 셋째칸 조금더 변화를 가저 볼가여? 여기에서 많은걸 얻기를 바랍니다 (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) 위의 소스의 (괄호)를 <꺽쇠>로 모두 바꾸어 실행 시켜 보세요 첫째칸 둘째칸 셋째칸 두째줄 첫칸 두째줄 둘째칸 둘째줄 새째칸 colspan과 rowspan의 이해 rowspan=3(세로의 3칸을 합친다) colspan=2(가로의 2칸을 합친다) (table border=1 width=400 cellpadding="10"cellspacing=0) (tr) (td rowspan=3 bgcolor=red)첫칸(/td) (td bgcolor=blue)첫째줄 둘째칸(/td) (td bgcolor=fuchsia)첫째줄 셋째칸(/td) (/tr) (tr) (td colspan=2 bgcolor=yellow)둘째줄(/td) (/tr) (tr) (td bgcolor=violet)셋째줄 둘째칸(/td) (td bgcolor=black) (font color=white)셋째줄 셋째칸(/font)(/td) (/tr) (/table) 위의 소스의 (괄호)를 <꺽쇠>로 모두 바꾸어 실행 시켜 보세요 첫칸 첫째줄 둘째칸 첫째줄 셋째칸 둘째줄 셋째줄 둘째칸 셋째줄 셋째칸 (th)를 이용한 표 만들기 , (HTML) (HEAD) (TITLE) HTML 표그리기 (/TITLE) (/HEAD) (BODY) (CENTER) (TABLE BORDER=5 CELLSPACING=3) (CAPTION) 표 예제 (/CAPTION) (TH ROWSPAN=4) 명세서(/TH) (TH ROWSPAN=2) 날짜 (/TH) (TH COLSPAN=2) 수입 (/TH) (TH COLSPAN=2) 지출 (/TH) (TR> (TH) 항목 (/TH) (TH) 금액 (/TH) (TH> 항목 (/TH) (TH) 금액 (/TH) (TR) (TD) 2001. 2. 1 (/TD) (TD) (PRE) (/PRE) (/TD> (TD) (PRE) (/PRE) (/TD) (TD) 교통비 (/TD) (TD) 5,000 (/TD) (TR) (TD) 2001. 2. 1 (/TD) (TD) 용돈 (/TD) (TD) 10,000 (/TD) (TD) (PRE) (/PRE) (/TD) (TD) (PRE) (/PRE) (/TD) (/TABLE) (/CENTER ) (/BODY) (/HTML) 위의 소스의 (괄호)를 <꺽쇠>로 모두 바꾸어 실행 시켜 보세요 표 예제 명 세 서 날짜 수입 지출 항목 금액 항목 금액 2001. 2. 1 교통비 5,000 2001. 2. 1 용돈 10,000 이해가 되시죠? table 기초였습니다 거듭 강조합니다 보는것 만으론 안되죠, 반드시 하나 하나 실행 시켜 보는게 지름길입니다 여기 까지 오신 님들 대단히 수고 하셧고요 table 공부는 아주 중요한 공부 입니다, 이제까지의 모든 공부를 집대성 할때가 왔군요 여러분이 학수 고대하던 영상에 글 올리기를 해 봅시다 그럼 영상에 글 올리기에서 다시 볼때까지 복습을 많이 해 두세요 기초가 튼튼해야 집을 잘 지을수 있겠죠?