테이블 만들기 - 4

지금부터는 단순 암기보다는 약간의 이해가 필요로 하는 것을 배우보도록 하겠습니다. 바로 <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에 대해서 배워보도록 하죠.....^^

 

                                                                                                                                                    출처 : 태그매니아