열(TR)과 행(TD)의 확장 | ||||||||||||||||
테이블은 기본적으로 각 열마다 동일한 행으로 이루어져야 합니다.
위와 같이 첫번째 열(row)은 1개의 행(column)을 가지고, 두번째 열(row)은 2개의 행(column)을 가지게 만들면 아래처럼 제대로 모양을 갖추어 지지 않습니다.
첫번째 열을 오른쪽으로 확장시켜 주어야 합니다. 이때 사용하는 속성이 colspan 입니다.
위와 같이 colspan="2"로 지정하면 아래와 같이 의도한 대로 모양이 나옵니다.
즉 첫번째 row의 column수가 1개이고, 두번째 row의 column 수가 2개이므로 이를 동일하게 맞추어 주기 위해서 첫번째 row의 셀에서 colspan 속성을 사용하였습니다. 열을 확장할때는 rowspan 이라는 속성을 사용합니다.
1*1셀의 열(row)을 확장했으므로 2열(row)에서는 첫번째 셀이 필요없습니다.
여기에서 중요한것은 확장을 하는 방향입니다. 왼쪽에서 오른쪽으로 column을 확장하는 경우 colspan, 이렇게 기본적으로 기억하면서 colspan과 rowspan 속성을 자유자재로 다룰 수 있어야 합니다. 아주 빈번하게 사용되므로 시간표 같은것을 만들어 보면서 충분한 연습을 해주어야 합니다. |
vnote