1579, 1/79 회원가입  로그인  
   rahzzang
   열(TR)과 행(TD)의 확장(펌)

http://www.hackerschool.org/HS_Boards/zboard.php?id=Free_Lectures&no=1617 [복사]


테이블은 기본적으로 각 열마다 동일한 행으로 이루어져야 합니다.

<table border="1">
<tr>
<td>1*1 셀</td>
</tr>
<tr>
<td>2*1 셀</td>
<td>2*2 셀</td>
</tr>
</table>


위와 같이 첫번째 열(row)은 1개의 행(column)을 가지고, 두번째 열(row)은 2개의 행(column)을 가지게 만들면 아래처럼 제대로 모양을 갖추어 지지 않습니다.

1*1 셀
2*1 셀 2*2 셀



첫번째 열을 오른쪽으로 확장시켜 주어야 합니다. 이때 사용하는 속성이 colspan 입니다.

<table border="1">
<tr>
<td colspan="2">1*1 셀</td>
</tr>
<tr>
<td>2*1 셀</td>
<td>2*2 셀</td>
</tr>
</table>


위와 같이 colspan="2"로 지정하면 아래와 같이 의도한 대로 모양이 나옵니다.

1*1 셀
2*1 셀 2*2 셀



즉 첫번째 row의 column수가 1개이고, 두번째 row의 column 수가 2개이므로 이를 동일하게 맞추어 주기 위해서 첫번째 row의 셀에서 colspan 속성을 사용하였습니다.

열을 확장할때는 rowspan 이라는 속성을 사용합니다.

<table border="1">
<tr>
<td rowspan="2">1*1 셀</td>
<td>1*2 셀</td>
</tr>
<tr>
<td>2*2 셀</td>
</tr>
</table>


1*1셀의 열(row)을 확장했으므로 2열(row)에서는 첫번째 셀이 필요없습니다.

1*1 셀 1*2 셀
2*2 셀



여기에서 중요한것은 확장을 하는 방향입니다.

왼쪽에서 오른쪽으로 column을 확장하는 경우 colspan,
위에서 아래로 row를 확장하는 경우는 rowspan

이렇게 기본적으로 기억하면서 colspan과 rowspan 속성을 자유자재로 다룰 수 있어야 합니다.

아주 빈번하게 사용되므로 시간표 같은것을 만들어 보면서 충분한 연습을 해주어야 합니다.

  Hit : 5138     Date : 2010/11/21 08:29
[불법/스팸글로 신고하기]



    
1579   왠만한사람들은다알지도모르겠지만[6]     백룡출해
03/17 10326
1578   원격종료....[39]     bsjzzz
01/02 9934
1577   원재아빠님의 gcc 2.96에서의 버퍼 구조 강좌.[9]     ttongfly
09/19 10607
  열(TR)과 행(TD)의 확장(펌)     rahzzang
11/21 5137
1575   연결리스트     han0161
06/21 6142
1574   여러선배님들 좀도와주십시오..[2]     appleone
06/29 5858
1573   여러분! net send 정리해 드립니다.[11]     idl0521
12/13 8452
1572   여러분[1]     phan_tom1
11/18 5768
1571   에그쉘 쓸줄 모르시는분..-_-필독[9]     은조
09/28 9072
1570   워게임을 해봅시다.hackthissite(basic 1)[2]     kjwon15
09/10 7555
1569   워게임 사이트입니다. [4]     wkdqkf2
03/18 5100
1568   워게임 문제 힌트좀 주실분 구함     rabbitlycat
04/30 3986
1567   왜 고등학교[5]     파란눈물
02/05 5517
1566   왜 해커가 되려는가[6]     dontknow
07/22 8272
1565   왜 C 이어야 하는가 ?[96]     소유
04/09 20463
1564   요즘 공부하고 있는 JAVA에 대한 질문과 답변[3]     장세만
07/14 6200
1563   왕초보자 들을 위한 C 언어 강좌[7]     kevin0960
01/25 7000
1562   왕초보 파이썬 (Python) 언어 배우기 - Site 추천[5]     푸른하늘
12/14 9262
1561   와우해커level2 문제풀이[3]     프라이드
08/20 7352
1560   와우해커 level1[3]     프라이드
08/20 7453
1 [2][3][4][5][6][7][8][9][10]..[79]

Copyright 1999-2021 Zeroboard / skin by Hackerschool.org / Secure Patch by Hackerschool.org & Wowhacker.com