|
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 : 6771 Date : 2010/11/21 08:29
|
1581, 
20/80 
