colspan 과 rowspan 으로 table 꾸미기

2015. 1. 22. 00:14 html과css공부

INLINE 방식 코딩 하기

오늘은 TABLE 태그로 TABLE 표를 만들때 셀의 크기를 키워서 텍스트나 콘텐츠를 풍부하게 구성하게 해주는 속성 엘리먼트인 COLSPAN과 ROWSPAN에 대해 알아보는 시간을 갖도록 합니다.

colspan은 테이블의 가로 셀을 합쳐 주는 속성 엘리먼트 입니다.

colspan 을 하기 위해서 우선 합쳐야 할 대상인 td태그로 만든 그릇들이 있어야 겠지요

그래서 먼저 테이블과 그릇들을 만들어 줍니다.

아래는 태그에 직접 정의 하는 inline 방식인 직접 주입방식으로 코딩한 소스 입니다.

예제1)

</td>

</td>

</tr>

</td>

</tr>

</td>

</td>

</tr>

</td>

</td>

</tr>

</tbody>

</table>

아래는 결과 입니다.

예제1)

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

이렇게 라인 컬러가 줄마다 다른 가로줄 4칸과 세로줄 4칸 총 16셀의 테이블 표를 만들 었네요

TABLE td colspan 하기

이제 가로셀1-1과1-2를 colspan 해 보도록 합니다.

실질적으로 병합 하는것이 아니고 하나의 셀만큼의 면적이 커지는 효과만 있는 것이죠

그래서 스판 하게 되면 스판 당한 만큼 셀 면적만 늘어 나고 셀 개수는 그대로가 됩니다.

면적이 커진 만큼 우측의 셀이 옆으로 밀려 나게 되는 것이죠 그렇기 때문에 스판후에는<td> 태그 하나를 제거 해 줘야 합니다.

자그럼 가로 합침 속성을 가진 colspan 을 사용 해 스판 해 봅니다.

아래는 코딩 소스 입니다.

예제2)

</td>

</tr>

</td>

</tr>

</td>

</tr>

</td>

</tr>

</tbody>

</table>

이런 모습이 되겠죠

예제2)

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

잠깐 여기서 현재 티스토리의 에디터에서 만든 테이블은 브라우져에서 외곽 라인은 보이지 않습니다.

그것을 염두해두고 테이블을 만들어야 겠지요

이런 모습을 원 한게 아니죠 그래서 늘어난 셀에 해당 하는 <td> 태그 하나를 제거 해 줘야 겠죠

아래는 정상적인 코딩과 테이블의 모습입니다.

예제3) 코딩소스

</TR>
<TR style="BOX-SIZING: border-box">
<TD style="BOX-SIZING: border-box; BORDER-TOP: blue 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: blue 1px solid; BORDER-BOTTOM: blue 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: blue 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">2-1</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: blue 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: blue 1px solid; BORDER-BOTTOM: blue 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: blue 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">2-2</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: blue 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: blue 1px solid; BORDER-BOTTOM: blue 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: blue 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">2-3</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: blue 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: blue 1px solid; BORDER-BOTTOM: blue 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: blue 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">2-4</SPAN></TD>

</TR>
<TR style="BOX-SIZING: border-box">
<TD style="BOX-SIZING: border-box; BORDER-TOP: gray 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: gray 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">3-1</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: gray 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: gray 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">3-2</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: gray 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: gray 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">3-3</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: gray 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: gray 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">3-4</SPAN></TD>

</TR>
<TR style="BOX-SIZING: border-box">
<TD style="BOX-SIZING: border-box; BORDER-TOP: orange 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: orange 1px solid; BORDER-BOTTOM: orange 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: orange 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">4-1</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: orange 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: orange 1px solid; BORDER-BOTTOM: orange 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: orange 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">4-2</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: orange 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: orange 1px solid; BORDER-BOTTOM: orange 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: orange 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">4-3</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: orange 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: orange 1px solid; BORDER-BOTTOM: orange 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: orange 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">4-4</SPAN></TD>

</TR>

</TBODY>

</TABLE>

예제3)

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

TABLE td rowspan 하기

rowspan은 테이블의 셀을 세로로 합쳐주는 엘리먼트 입니다.

그럼 이번에는 rowspan으로 세로줄 2-1부터4-1까지 병합 해봅니다.

예제4) 코딩소스

</TR>
<TR style="BOX-SIZING: border-box">
<TD rowspan="3" style="BOX-SIZING: border-box; BORDER-TOP: blue 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: blue 1px solid; BORDER-BOTTOM: blue 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: blue 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">2-1</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: blue 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: blue 1px solid; BORDER-BOTTOM: blue 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: blue 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">2-2</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: blue 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: blue 1px solid; BORDER-BOTTOM: blue 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: blue 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">2-3</SPAN></TD>
<TD style="BOX-SIZING: border-box; BORDER-TOP: blue 1px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; BORDER-RIGHT: blue 1px solid; BORDER-BOTTOM: blue 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: blue 1px solid; LINE-HEIGHT: 2; PADDING-RIGHT: 0px" align=center><SPAN style="FONT-SIZE: 14pt">2-4</SPAN></TD>

</TR>

</TBODY>

</TABLE>

예제4)

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

이런 모습이 됩니다 역시 원하는 모습이 아니죠

이번에도 역시 스판한 개수 만큼 의 셀을 제거 해 줍니다.
이제 정상적인 모습이 되었 네요

예제5)코딩소스

예제5)

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

이렇게 <td> 태그에 직접 스타일을 주는 INLINE 방식으로 셀 테두리 컬러와 셀을 가로 와 세로 로 합쳐 보았 습니다.

INTERNAL 방식 코딩 하기

이번에는 STYLE SHEET의 INTERNAL 방식 선언으로 위의 코딩을 간단하게 만들고 COL GROUP에 대해 공부 해 보도록 합니다.

예제1-1) STYLE SHEET 소스

<style>

.tablt{width:100%; height:auto; border:1px solid blue; text-align:center; line-height: 2; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; font-size: 14pt;}
.tablt .tda{width:50%; height:30px; border:1px solid blue; text-align:center; line-height: 2; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; font-size: 14pt; background:rgb(200,200,0);}
.tablt .tdb{width:25%; height:30px; border:1px solid blue; text-align:center; line-height: 2; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; font-size: 14pt; background:rgb(200,0,200);}
.tablt .tdc{width:25%; height:30px; border:1px solid blue; text-align:center; line-height: 2; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; font-size: 14pt; background:rgb(0,200,230);}
.tablt .tdd{width:25%; height:30px; border:1px solid blue; text-align:center; line-height: 2; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; font-size: 14pt; background:rgb(20,230,0);}
.tablt .tde{width:25%; height:30px; border:1px solid blue; text-align:center; line-height: 2; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif !important; font-size: 14pt; background:rgb(0,200,50);}

</style>

위 예제 1-1 의 스타일 시트는 HTML문서의 HEAD부에 코딩한 소스를 복사해 만든 가상 시트 입니다.

이번 에도 역시 우선 합쳐야 할 대상인 그릇들이 있어야 겠지요 그래서 먼저 테이블과 그릇들을 만들어 줍니다.

예제1-2) 코딩소스

예제1-2) 결과

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

이렇게 가로4개의셀을 가진 8 줄의 테이블을 내부 스타일 시트 선언 방식인 INTERNAL 방식 선언으로 위의 코딩을 해 주었습니다.

TABLE TD의 COLGROUP 선언 하기

<COL> 태그와 <COL GROUP> 태그는 마치 위의 1-1의 예제와 같은 CSS와 같이 TABLE을 만들때 일일이 TD에 적용 하는 속성값을 간단하게 정리 해주는 태그로 세로셀(COLUMN)을 제어 해주는 태그 입니다.

COL 태그는 최소 하나 이상의 열을 제어 해주는 기능을 가지고 있습니다.

하나 이상의 열에 같은 스타일을 주고 싶을땐 colspan속성에 값을 주면 됩니다.

우선 TABLE 전체의 구조에 대해 코딩을 한후에 위의 예제 1-2의 테이블을 COL 태그 와 COLGROUP 태그로 코딩을 해보도록 합니다.

TABLE의 기본 구조를 보면 아래와 같습니다.

그러나 이런 구조만으로는 테이블을 구현 할수가 없기 때문에 각각의 속성에 값을 주어서

테이블을 구현 해야만 하는 것이죠

자 그럼 구체적으로 예제를 만들어 코딩을 해 보도록 합니다.

예제1-3)코딩소스

<THEAD>

<TR>

</TR>

</THEAD>
<TBODY>

<TR>

</TR>

</TBODY>
<TFOOT>

<TR>

</TR>

</TFOOT>
</TABLE>

결과 입니다.

예제1-3)

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

위의 결과 처럼 넓이와 높이의 속성값을 주지 않았을땐 AUTO값이 적용 되어 지며

텍스트에 맞추어 영역이 구성 되어 집니다.

예제1-4)코딩소스

</COLGROUP>

<THEAD>

<TR>

</TR>

</THEAD>
<TBODY>

<TR>

</TR>

</TBODY>
<TFOOT>

<TR>

</TR>

</TFOOT>
</TABLE>

결과 입니다.

예제1-4)

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

예제1-5)코딩소스

<TR>

</TR>

</THEAD>
<TBODY STYLE="background:red">

<TR>

</TR>

</TBODY>
<TFOOT STYLE="background:yellow">

<TR>

</TR>

</TFOOT>
</TABLE>

예제1-5)

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

위의 결과에서 알수 있듯이 각요소에 선언한 스타일이 우선 적용되어 집니다.

예제1-6)코딩소스

</colgroup>
<THEAD>

<TR>

</TR>

</THEAD>
<TBODY>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TBODY>
<TFOOT>

<TR>

</TR>

</TFOOT>
</TABLE>

예제1-6)

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번 영역
1번 영역	2번 영역	3번 영역	4번 영역

위의 예제1-5 결과에서 알수 있듯이 각요소에 선언한 스타일이 우선 적용되어 지는 것 과 COL태그 에 span당한 갯수 만큼 열의 수가 제어 된다는 것을 알수가 있습니다.

이렇게 COL태그 와 COLGROUP 태그를 선언 해 주어 모든 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	31

공부 하는남자

colspan 과 rowspan 으로 table 꾸미기

티스토리툴바

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

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

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