본문 바로가기

웹디자인

[홈페이지제작 강좌] HTML 중급강좌(표 만들기 3)

1. 표만들기(3)
  흠....전번에는 갑자기 짜근으로 홈을 옮기는 바람에 표만들기 강좌를 한동안 중단을 했다가 다시 이어서 올립니다.....뭐 ...여기서부터는 별루 그렇게 어려운 것은 없습니다...앞에서 대부분을 설명을 했기 때문에 전체적인 느낌(?)만 잡으면 됩니다. 그럼 시작해볼까요?
 여기에서는 이제 표만들기 태그 중에서 한 행을 만들어 주는 명령어인 <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
     
 
   

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