• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
HTML

테이블 만들기 - 3

멋진그대 18613

0
흠....전번에는 갑자기 짜근으로 홈을 옮기는 바람에 표만들기 강좌를 한동안 중단을 했다가 다시 이어서 올립니다.....뭐 ...여기서부터는 별루 그렇게 어려운 것은 없습니다...앞에서 대부분을 설명을 했기 때문에 전체적인 느낌(?)만 잡으면 됩니다. 그럼 시작해볼까요?
 여기에서는 이제 표만들기 태그 중에서 한 행을 만들어 주는 명령어인 <tr></tr> 과 한 셀(칸)을 만들어 주는 명령어인 <td></td>에 대해서 알아보겠습니다. 행이 뭔지는 알겠져? 행과 열할때 그 행이랑 같은 의미이져...... <tr> 명령어는 여기서부터 하나의 행을 만든다는 것을 의미하죠..그리고 </tr> 명령어는 여기에서 행을 끝마치겠다는 것을 의미합니다....하지만 <tr></tr>만으로는 당근 표를 만들수 없고...그 안에 셀(칸)을 만들어 주는 <td></td> 가 들어가야 만들어 진답니다...이해가 안되시는 분들을 위해 직접 표를 보면서 설명을 해보죠^^
 
첫번째 행<tr></tr>-->  
셀<td></td> 셀<td></td> 셀<td></td>
여기도 셀 당근 여기도 셀 물론 여기도 셀
마찬가지  셀 또 셀 또또 셀
두번째 행<tr></tr>-->  
세번째 행<tr></tr>-->  

 이제 이해가 되는지....? 위에 표를 보다보면 처음에 제가 무조건 외우라고 했던 표만들기 태그의 뼈대 생각이 나실겁니다........엥? 아직도 뭐가 뭔지 모르겠다고요? 흠........제가 외우라고 했던 거 안외우니깐 당근 모를 수 밖에요........갈켜줄때....제대로 하세요~! 나중에 혼자할려면 힘들어여~ 다시 고거 외우고 오세요! 
 그럼 다 이해하신 분들은 계속 진도를 나가기로 하죠....^^

 보셨다시피 <tr></tr>명령어는 <td></td>명령어를 포함하면서 같이 쓰이게 되죠. 즉, <tr></tr>명령어는 행을 만들고 <td></td>명령어는 그 행안에 셀(칸)을 만들어 주는 겁니다...물론  한 행안에는 하나의 셀(칸)이 들어갈 수도 있고 여러 개의 셀(칸)이 들어갈 수 있답니다....그럼 행속에 셀(칸)을 어떻게 넣는지 배워 볼까요.......

한행에 하나의 셀을
 포함할 경우
한행에 두개의 셀을
포함할 경우
한행에 세개의 셀을
포함하는 경우
두개의 행에 각각
두개씩 셀을 포함할 경우
<tr>
 <td></td>
</tr>
<tr>
 <td>첫번째셀</td>
 <td>
두번째셀</td>
</tr>
<tr>
 <td>첫번째셀</td>
 <td>
두번째셀</td>
 <td>
세번째셀</td>
</tr>
<tr>
 <td>1행 첫번째셀</td>
 <td>
1행 두번째셀</td>
</tr>
<tr>

 <td>2행 첫번째셀</td>
 <td>
2행 두번째셀</td>
</tr>

 간단하져...^^ <tr></tr>명령어안에 자기가 넣고 싶은 셀(칸)수만큼 <td></td>명령어를 넣어주면 된답니다...
자~ 여기까지 이해가 됬다면 이젠 기본적인 표정도는 충분히 만들 수 있습니다. 그럼 중간정리를 한번 해볼까요? 

1행2열 표 2행3열 표 3행4열 표 그럼 이건?
<table border="1" width="100">
 <tr>
  <td>a</td>
  <td>b</td>
 </tr>
</table>
<table border="1" width="100">
 <tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
 </tr>
 <tr>
  <td>d</td>
  <td>e</td>
  <td>f</td>
 </tr>
</table>
<table border="1" width="100">
 <tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
  <td>d</td>
 </tr>
 <tr>
  <td>e</td>
  <td>f</td>
  <td>g</td>
  <td>h</td>
 </tr>
 <tr>
  <td>i</td>
  <td>j</td>
  <td>k</td>
  <td>l</td>
 </tr>
</table>

?

 a b
a b c
d e f
a b c d
e f g h
i j k l
     
 
   

 하핫^^ 네번째에 있는 표를 어떻게 만드는 줄 아시겠나요? 아직 안 배운건데....^^  혹...자기는 자신있게 만들 수 있다고 하시는 분들은 여기서 고마 하차(?)해주시면 감사하겠습니다. 그리고 어설프게 만들 줄 알것같다...하시는 분들은 군소리 말고 계속 보시길 바랍니다....태그매니아는 어설픈 건 용납안합니다.^^ 마지막 네번째 표는 지금까지 배운것보다는 약간 머리가 필요로 하는 건데.........머리회전속도가 빠르신 분들이 유리합니다. 이 순간 평소 자기는 머리도 나쁘고 둔하기때문에  얼굴이 사색(?)되시는 분들도  계실텐데.....절대 희망을 버리지 마시길........아직까지 우리 사회의 교육정책이 엘리트 중심으로만 계속 되고 있는데....태그매니아에서 만큼은 절대 그런 일은 없습니다.  모두 다 평등하게 배우는 사회.....태그매니아가 이끌어 나갑니다....(잉? 어디서 많이 들어본 멘트인데.....--;;;;)
 흠.....빨랑 다음 페이지로 넘어 가죠.........^^

                                                                                                                                                  출처 : 태그매니아

공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story

삭제

"테이블 만들기 - 3"

이 게시글을 삭제하시겠습니까?

검색어 : 202405
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290002 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349033 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 293631 +14
300
normal
오작교 23.12.10.09:32 14430 0
299 Script
normal
오작교 23.12.10.09:29 19711 0
298 CSS
normal
오작교 21.01.09.14:18 40652 0
297 HTML
normal
오작교 15.09.17.08:58 116258 0
296 HTML
normal
오작교 15.09.13.21:38 21525 0
295 HTML
normal
오작교 15.09.13.21:30 25103 0
294 HTML
normal
오작교 15.08.30.12:19 52721 0
293 Script
normal
오작교 15.05.12.14:06 21095 0
292 HTML
file
오작교 12.03.08.13:51 35868 0
291 HTML
normal
오작교 11.06.03.10:44 40687 0
290 CSS
normal
오작교 11.06.03.10:29 70590 0
289 Script
normal
오작교 11.03.22.11:19 43401 0
288 Script
normal
오작교 11.03.22.11:15 38156 0
287 Script
normal
오작교 11.03.22.11:07 37044 0
286 HTML
normal
오작교 11.01.25.10:27 36145 0
285 CSS
normal
오작교 11.01.24.10:40 35316 0
284 HTML
normal
오작교 11.01.24.10:39 37027 0
283 Script
normal
오작교 11.01.24.10:34 38046 0
282 CSS
normal
오작교 11.01.24.10:31 37672 0
281 CSS
normal
오작교 11.01.24.10:27 36149 0