27.태그-프레임 나누기- end

'정보창고 > 블로그 정보' 카테고리의 다른 글

전 페이에서 colspan 속성에 대해서 배워봤구요....여기서 부턴 rowspan 속성에 대해서 배워보겠습니다. rowspan 속성 역시 colspan 속성과 같습니다. 단지 colspan 속성은 가로셀을 병합하는데 비해 rowspan 속성은 세로셀을 병합하는 거죠. 　 A B C 　 <table border="1" width="250">  <tr>   <td rowspan="2">A</td>   <td>B</td>  </tr>  <tr>   <td>C</td>  </tr> </table> 간단하죠? rowspan="세로셀수" 속성은 세로의 셀들을 병합해주기 때문에...첫 행에서는 A , B 두개의 셀을 잡아주고 두번째 행에서는 C 셀 하나만 잡아주죠. <표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 rowspan="2">B</td>   <td>C</td>  </tr>  <tr>   <td>D</td>   <td>E</td>  </tr> </table>　 <table border="1" width="250">  <tr>   <td rowspan="2" bgcolor="#C1BFC0">A</td>   <td>B</td>   <td>C</td>  </tr>  <tr>   <td rowspan="2" bgcolor="#C1BFC0">D</td>   <td>E</td>  </tr>  <tr>   <td>F</td>   <td rowspan="2" bgcolor="#C1BFC0">G</td>  </tr>  <tr>   <td>H</td>   <td>I</td>  </tr> </table> 이번 역시 <표1>은 이해가 될 것 같은데....<표2>는 어렵죠? colspan 속성보다는 조금 더 어려울 겁니다......rowspan 속성의 경우 병합하는 셀들이 위 아래로 병합되기 때문에....원래 병합될 셀이 몇 번째 행에 있었던 셀이라는 걸 잘 이해해야 합니다...위에 <표2>를 예를 들자면....A셀의 경우 원래 1행1열의 셀과 2행1열의 셀이 합해진것입니다.....그러므로 두번째 행의 소스부분에서는 2행1열의 셀의 태그부분이 생략이 되버리죠. D셀이나 G셀 역시 마찬가지입니다.   colspan 과 rowspan 속성을 설명했으니 이젠 width="수치" 를 설명드리죠. width="수치" 는 뭔지 아시죠? 그렇죠..바로 너비를 조정해주는 속성입니다. 이미 <table></table>부분에서 배웠을 겁니다. 그러나 width 속성은 <td>명령어에서도 사용됩니다.   colspan 과 rowspan 속성을 배우느라....고생 많이 하셨습니다.......머리에서도 열이 많이 나구있겠군요..후후^^ 여기서부터는 아주 아주 쉬운 속성을 배울 것입니다. 아마 넘 쉬워서 눈물이 나올 겁니다...이번에 배울 건 내용 정렬속성입니다. 바로 align="left , center , right" 인 수평정렬속성과 valign="top , middle , botton , baseline" 인 수직정렬속성입니다.  물론 <td> 태그와 같이 사용하는 겁니다....이건 예제만 보면 다 알겁니다...   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  위에 보시는 바와 같이 한 셀안에서 그 정렬을 어떻게 해주냐에 따라 셀안의 이미지의 위치가 달라집니다. 혹시 모르시는 분이 있으실지도 모르니깐 설명드리죠^^. 수평정렬은 align="left(왼쪽) , center(가운데) , right(오른쪽)" 이구요.....valign="top(위쪽) , middle(중간쪽) , bottom(아래쪽) , baseline(기준선)" 입니다. 제가 baseline에 대해선 예제를 안보여주었는데...baseline의 경우 middle하고 거의 비슷하기 때문에....그냥 그런게 있다고만 알고 계시면 됩니다. 간단하죠?^^

25.table-tag의 보충설명-  (0)	2012.02.08
26.table-tag의 보충설명-  (0)	2012.02.08
HTML-메뉴 설명  (0)	2012.02.07
HTML-요일마다 바뀌는 배경색  (0)	2012.02.07
HTML-실시간으로 변하는 시계출력  (0)	2012.02.07