HTML 테이블 만들기 및 <TD> <TR> 의미

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

<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 속성을 자유자재로 다룰 수 있어야 합니다.

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

출처 : http://www.homejjang.com/03/colspan.php