HTML의 구성요소
HTML 문서의 작성
HTML의 기본구성
BODY 태그
주석(Comment)
줄바꾸기
P(paragraph)
BR(Line Break)
표제(Heading)
텍스트 관련 태그
FONT 태그
특수문자
링크(Link)
내부링크
이미지(image)
이미지 경로
이미지 포맷
이미지 정렬
색(color)
HTML 색상표(1)
HTML 색상표(2)
배경(background)
테이블(table)
열과 행의 확장
여백과 경계선
너비와 높이
정렬
프레임(frame)
frameset
frame
frame target
noframes
리스트(List)
type
열(TR)과 행(TD)의 확장

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

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

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

Copyright © Homejjang.com All rights reserved.