목록 수정 삭제 쓰기

지금부터는 단순 암기보다는 약간의 이해가 필요로 하는 것을 배우보도록 하겠습니다. 바로 <td>명령어에 들어가는 속성에 대해서 알아보겠습니다.
 
속성 기능
 colspan="가로셀수"  셀의 수만큼 가로 셀들을 하나로 병합해줍니다.
 rowspan="세로셀수"  셀의 수만큼 세로 셀들을 하나로 병합해줍니다.
 nowarp  브라우저 크기와 상관없이 테이블크기 고정
 width="수치"  셀의 너비를 조정해줍니다.
 align=left , center , right  셀안에 수평정렬을 지정해줍니다.
 valign=top , middle , bottom , baseline  셀안에 수직정렬을 지정해줍니다.
　
 위에 속성을 한번 쫘~악 읽어보니 뭔지 알겠남유? 이해는 되는 것 같기도 한데......역쉬...잘 모르겠지요.....그럼 또 다시 예제와 함께 이해를 팍팍 시켜드리겠습니다.^^
　
A
B C

　

<table border="1" width="250">
 <tr>
  <td colspan="2">A</td>
 </tr>
 <tr>
  <td>B</td>
  <td>C</td>
 </td>
</table>


 위에 표는 colspan 속성을 사용하면 간단하게 만들 수 있습니다. colspan="가로셀수"  속성은 해당셀수만큼 가로행에 있는 셀들을 하나로 합해주는 기능을 합니다. 위에 표에서는 가로 두개의 셀을 하나로 합해준거죠.흠....간단하져?^^ 그럼 좀 더 어려운 걸루 해볼까요? 아래표를 한번 봐보세요.
  


<표1>
A B
C
D E
<표2>
A B C
D E F
G H I


<table border="1" width="250">
 <tr>
  <td>A</td>
  <td>B</td>
 </tr>
 <tr>
  <td colspan="2">C</td>
 </tr>
 <tr>
  <td>D</td>
  <td>E</td>
 </tr>
</table>
 

　

 <table border="1" width="250">
 <tr>
  <td colspan="2" bgcolor="#C1BFC0">A</td>
  <td>B</td>
  <td>C</td>
 </tr>
 <tr>
  <td>D</td>
  <td colspan="2" bgcolor="#C1BFC0">E</td>
  <td>F</td>
 </tr>
 <tr>
  <td>G</td>
  <td>H</td>
  <td colspan="2" bgcolor="#C1BFC0">I</td>
  </tr>
</table>

 이해가 되시는지.....^^ 왼쪽에 <표1>은 이해 되져?   그러나 문제는 오른쪽에 있는 <표2>가 되겠네요^^ 원래 한 행마다 4개의 셀(칸)들이 있는걸 각 행에서 두개의 셀들을 합한거죠. 첫번째행에선 좌측두개의 셀을, 두번째행에선 중간두개의 셀을, 세번째행에선 우측두개의 셀을 합했죠. 어때요...쉽죠? ^^;;; 헉...모르겠다구요..--;;; 흠....더 이상은 설명하기가...........두뇌회전속도가 빠르신 분들은 금방 이해했을 텐데........그래도 모르시겠다면..............더 이상은 .....위에 소스를 보고 열심히 생각해보시면......트일 날(?)이 있을 겁니다.....머리로 안되면 노력이죠...뭐.....^^
 
 하핫^^ colspan 속성 하나 설명하는데도 엄청난 지면을 차지하네요^^ 다음 페이지에서는 rowspan에 대해서 배워보도록 하죠.....^^

 

                                                                                                                                                    출처 : 태그매니아

이 게시물을