col태그와 td colspan의 차이 col태그와 td rowspan의 차이

2015. 1. 23. 07:40 html과css공부

TD태그의 COLSPAN과 COL태그의 SPAN의 차이

지난 시간에 공부한 내용으로 TD태그 내의 COLSPAN은 하나의 TR 태그가 제어 하는 영역 내의 TD의 셀을 합쳐주는 효과를 가진 속성 입니다.

즉 하나의 TR은 가로 한줄의 블록을 가지며 태그내의 TD의 갯수 만큼 가로 셀을 만들어 주므로 TD 태그에 COLSPAN 하면 스판 당한 갯수만큼 TD의 영역이 커지는 효과만 있으므로 스판한 갯수 만큼 TD태그를 삭제 해주어야만 합니다.

COL태그의 SPAN은 TD태그 내의 ROWSPAN과 비슷하게 세로영역을 제어 해주는 속성을 가지지만 영역내에서 하나의 세로줄에 속 한 모든 블록 들을 합쳐 주고 스타일의 동일성을 주게 되며 스판한 갯수의 세로셀 전체를 합쳐주게 됩니다.

그러나 스판과 상관 없이 에디트에 기록 되는 태그의 갯수는 유지 된다는 것을 알수가 있습니다.

그런 반면 TD태그의 ROWSPAN의 경우는 하나의 TR태그에 속하는 TD를 실제로 합치는 것이 아니며 span한 갯수만큼 세로 로 영역을 키워만 주기 때문에 그 수 만큼 스판 당하는 영역에 속하는 각각의 TR속 내 의 TD태그를 제거 해주어야 만 합니다.

아래 처럼 간단한 예제를 들어 비교 해볼수가 있겠습니다.

아래와 같이 TD태그에 COLSPAN=2의 값으로 코딩을 해봅니다.

예제3-1)소스

</TR>
<TR>
<TD class=tdb>2-1</TD>
<TD class=tdb>2-2</TD>
<TD class=tdb>2-3</TD>
<TD class=tdb>2-4</TD>

</TR>
<TR>
<TD class=tdc colSpan=2>3-1</TD>
<TD class=tdc>3-2</TD>
<TD class=tdc>3-3</TD>

</TR>
<TR>
<TD class=tdd colSpan=2>4-1</TD>
<TD class=tdd>4-2</TD>
<TD class=tdd>4-3</TD>

</TR>

</TBODY>

</TABLE>

예제3-1) 결과

1-1		1-2	1-3
2-1	2-2	2-3	2-4
3-1		3-2	3-3
4-1		4-2	4-3

위의 1-1, 3-1, 4-1은 colspan속성 으로 면적이 커졌지만 실제로 두셀을 합친것은 아니죠 그래서 1-4, 3-4, 4-4번의 셀들을 제거 해 준 것입니다.

이번에는 COL태그를 이용해 SPAN값을 줘 보겠습니다.

예제3-2)소스

</COLGROUP>

</THEAD>

</TR>
<TR>
<TD><SPAN style="FONT-SIZE: 18pt">1번 영역</SPAN></TD>
<TD><SPAN style="FONT-SIZE: 18pt">2번 영역</SPAN></TD>
<TD><SPAN style="FONT-SIZE: 18pt">3번 영역</SPAN></TD>
<TD><SPAN style="FONT-SIZE: 18pt">4번 영역</SPAN></TD>

</TR>

</TBODY>
<TFOOT>
<TR>
<TD><SPAN style="FONT-SIZE: 18pt">1번 영역</SPAN></TD>
<TD><SPAN style="FONT-SIZE: 18pt">2번 영역</SPAN></TD>
<TD><SPAN style="FONT-SIZE: 18pt">3번 영역</SPAN></TD>
<TD><SPAN style="FONT-SIZE: 18pt">4번 영역</SPAN></TD>

</TR>

</TFOOT>

</TABLE>

예제3-2)결과

1번 영역	2번 영역	3번 영역	4번 영역
1번 영역	2번 영역	3번 영역	4번 영역
1번 영역	2번 영역	3번 영역	4번 영역
1번 영역	2번 영역	3번 영역	4번 영역
1번 영역	2번 영역	3번 영역	4번 영역
1번 영역	2번 영역	3번 영역	4번 영역
1번 영역	2번 영역	3번 영역	4번 영역

TD태그의 ROWSPAN과 COL태그의 SPAN의 차이

예제4)소스

예제4) 결과

1-1	1-2	1-3	1-4
	2-1	2-2	2-3
	3-1	3-2	3-3
	4-1	4-2	4-3
5-1	5-2	5-3	5-4
	6-1	6-2	6-3
	7-1	7-2	7-3
	8-1	8-2	8-3

위 의 예제4번에서의 결과에서 확인 하는것 처럼 TD태그 내에서 ROWSPAN을 하게 되면 다른 TR블록들을 한칸 옆으로 밀어 내게 됩니다.

그렇게 되면 테이블의 구조가 BODY의 영향을 받아 우측의 세로 한줄이 찌그러지는 세로5줄의 테이블이 만들어 지게 되므로 스판한 갯수만큼 하위의 TR 영역의 TD태그들을 제거 해 주어야만 되겠죠

COL태그에서는 TD 셀 하나하나에 대해 스타일을 줄수 없다는 단점을 가지 지만 세로줄 전체에 반복적으로 스타일을 주는 테이블 구성에는 굉장히 큰 효과를 발휘 할수 있다는 최대의 장점을 가지고 있습니다.

ROWSPAN 의 경우는 이렇게 일일이 TD태그들을 제거 해주어야 하는 번거로운 단점을 가지고 있지만 세로줄을 어느 선에서 끊어 따로이 스타일을 줄수 있는 장점을 가지고 있습니다.

그러므로 이 두가지를 적절히 사용 한다면 원하는 테이블을 만들기가 용이 하겠죠

감사 합니다.

추천은 글쓴이 에게 최고의 보약 입니다.

저작자표시 비영리 변경금지

T,back: Comment:

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

공부 하는남자

col태그와 td colspan의 차이 col태그와 td rowspan의 차이

티스토리툴바

1-1	1-2	1-3	1-4
	2-1	2-2	2-3
	3-1	3-2	3-3
	4-1	4-2	4-3
5-1	5-2	5-3	5-4
	6-1	6-2	6-3
	7-1	7-2	7-3
	8-1	8-2	8-3

1-1	1-2	1-3	1-4
	2-1	2-2	2-3
	3-1	3-2	3-3
	4-1	4-2	4-3
5-1	5-2	5-3	5-4
	6-1	6-2	6-3
	7-1	7-2	7-3
	8-1	8-2	8-3

1-1	1-2	1-3	1-4
	2-1	2-2	2-3
	3-1	3-2	3-3
	4-1	4-2	4-3
5-1	5-2	5-3	5-4
	6-1	6-2	6-3
	7-1	7-2	7-3
	8-1	8-2	8-3