COL태그와 COLGROUP태그로 TABLE 테이블 스타일 입히기
지난시간에 공부한 내용으로 STYLE을 주는 방식에는 여러 가지 방식이 있다는 걸 알았습니다.
크게 두가지로 나누면 태그에 직접 주입하는 INLINE방식과 태그의 외부에서 스타일을 선언 해주는 OUTLINE 방식이 있습니다.
OUTLINE방식에는 외부 서버의 스타일 시트를 링크 하는 EXTERNAL링크 방식과 자체 사이트의 스타일 시트 인 내부의 스타일 시트를 링크 하는 INTERNAL링크 방식으로 나눌수가 있습니다.
오늘은 STYLE SHEET의 INTERNAL(내부 스타일시트 링크) 방식 선언으로 테이블 태그의 코딩을 간단하게 만들고 테이블의 열을 제어 해주는 COL태그와 COL GROUP태그에 대해 공부 해 보도록 합니다.
먼저 내부 스타일시트를 링크하는 INTERNAL링크방식으로 스타일을 정의 하여 코딩한 TABLE태그를 꾸며 보도록 합니다.
보통 내부 링크방식의 스타일 시트는 사이트 내부의 서브시트로 관리 하는데요 티스토리에는 스킨HTML에디터 바로아래 만들어져 있죠 글쓰기를 하는 HTML에디터에서도 HTML 모드 에 체크 하고 head부나 BODY부에 시트를 만들어 주어도 스타일을 관리 할수가 있습니다.
티스토리 에서는 HTML글쓰기 페이지의 어디든 시트를 만들어 주어도 제어가 가능 하도록 설계가 되어져 있으므로 필요한 곳에 시트를 만들어 주도록 합니다. 저의 경우는 빠른 접근을 위해 HEAD부에 시트를 만들어 주었습니다.
먼저 스타일 시트를 만들어 줍니다.
예제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: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,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);}
.tablt .tdf{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(230,180,0);}
.tablt .tdg{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,20);}
.tablt .tdh{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(230,230,0);}
</style>
위 예제 1-1 의 스타일 시트는 HTML문서의 HEAD부에 코딩한 소스를 복사해 만든 가상 시트 입니다.
이번에는 제어할 할 대상인 테이블을 만들어 주어야 하겠죠
아래의 예제1-2) 소스에서 클래스를 이용해 위의 스타일시트에서 제어 해주도록 하였습니다.
여러개의 테이블을 만들어도 시트를 이용하면 아주 쉽고 간단하게 한곳에서 제어 해 주는것이 스타일 시트 이죠
예제1-2) 코딩소스
<table class="tablt">
<tbody>
<tr>
<td class="tda">1-1</td>
<td class="tda">1-2</td>
<td class="tda">1-3</td>
<td class="tda">1-4</td></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">3-1</td>
<td class="tdc">3-2</td>
<td class="tdc">3-3</td>
<td class="tdc">3-4</td></tr>
<tr>
<td class="tdd">4-1</td>
<td class="tdd">4-2</td>
<td class="tdd">4-3</td>
<td class="tdd">4-4</td></tr>
<tr>
<td class="tde">5-1</td>
<td class="tde">5-2</td>
<td class="tde">5-3</td>
<td class="tde">5-4</td></tr>
<tr>
<td class="tdf">6-1</td>
<td class="tdf">6-2</td>
<td class="tdf">6-3</td>
<td class="tdf">6-4</td></tr>
<tr>
<td class="tdg">7-1</td>
<td class="tdg">7-2</td>
<td class="tdg">7-3</td>
<td class="tdg">7-4</td></tr>
<tr>
<td class="tdh">8-1</td>
<td class="tdh">8-2</td>
<td class="tdh">8-3</td>
<td class="tdh">8-4</td>
</tr>
</tbody>
</table>
예제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 |
이번에는 COLSPAN으로 조금 변형된 모습의 테이블을 만들어 보도록 합니다.
예제2-1) 소스
<table class="tablt">
<tbody>
<tr>
<td class="tda" colspan="2">1-1</td>
<td class="tda">1-2</td>
<td class="tda">1-3</td></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>
<tr>
<td class="tde">5-1</td>
<td class="tde">5-2</td>
<td class="tde">5-3</td>
<td class="tde">5-4</td></tr>
<tr>
<td class="tdf">6-1</td>
<td class="tdf">6-2</td>
<td class="tdf">6-3</td>
<td class="tdf">6-4</td></tr>
<tr>
<td class="tdg" colspan="2">7-1</td>
<td class="tdg">7-2</td>
<td class="tdg">7-3</td></tr>
<tr>
<td class="tdh">8-1</td>
<td class="tdh">8-2</td>
<td class="tdh">8-3</td>
<td class="tdh">8-4</td>
</tr>
</tbody>
</table>
예제2-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 | |
| 5-1 | 5-2 | 5-3 | 5-4 |
| 6-1 | 6-2 | 6-3 | 6-4 |
| 7-1 | 7-2 | 7-3 | |
| 8-1 | 8-2 | 8-3 | 8-4 |
<COL> 태그와 <COL GROUP> 태그는 마치 위의 1-1의 예제와 같은 CSS와 같이 TABLE을 만들때 일일이 TD에 적용 하는 속성값을 간단하게 정리 해주는 태그로 세로 열(COLUMN)을 제어 해주는 태그 입니다.
COL 태그는 최소 하나 이상의 열을 제어 해주는 기능을 가지고 있습니다.
하나 이상의 열에 같은 스타일을 주고 싶을땐 span속성에 값을 주면 됩니다.
우선 TABLE 전체의 구조에 대해 코딩을 한후에 위의 예제 1-2의 테이블을 COL 태그 와 COLGROUP 태그로 코딩을 해보도록 합니다.
TABLE의 기본 구조를 보면 아래와 같습니다.
<TABLE>
<THEAD></THEAD>
<TBODY></TBODY>
<TFOOT></TFOOT>
</TABLE>
그러나 이런 구조만으로는 테이블을 구현 할수가 없기 때문에 각각의 속성에 값을 주어서
테이블을 구현 해야만 하는 것이죠
자 그럼 구체적으로 예제를 만들어 코딩을 해 보도록 합니다.
예제1-3)코딩소스
<TABLE border="1" STYLE="text-align:center>
<COLGROUP>
<COL style="BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BACKGROUND: lime; BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid" span=3>
<COL style="BACKGROUND: red"></COLGROUP>
<THEAD>
<TR>
<TH>1</TH><TH>2</TH><TH>3</TH><TH>4</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD>
</TR>
</TFOOT>
</TABLE>
결과 입니다.
예제1-3)
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
위의 결과 처럼 넓이와 높이의 속성값을 주지 않았을땐 AUTO값이 적용 되어 지며
텍스트에 맞추어 영역이 구성 되어 집니다.
예제1-4)코딩소스
<TABLE border="1" STYLE="text-align:center>
<COLGROUP>
<COL style="BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BACKGROUND: lime; BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid" span=2>
<COL style="BACKGROUND: red">
<COL style="BACKGROUND: blue">
</COLGROUP>
<THEAD>
<TR>
<TH>1번 영역</TH><TH>2번 영역</TH><TH>3번 영역</TH><TH>4번 영역</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
</TFOOT>
</TABLE>
결과 입니다.
예제1-4)
| 1번 영역 | 2번 영역 | 3번 영역 | 4번 영역 |
|---|---|---|---|
| 1번 영역 | 2번 영역 | 3번 영역 | 4번 영역 |
| 1번 영역 | 2번 영역 | 3번 영역 | 4번 영역 |
예제1-5)코딩소스
<TABLE border="1" STYLE="text-align:center">
<COLGROUP>
<COL style="BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BACKGROUND: lime; BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid" span=3>
<COL style="BACKGROUND: red"></COLGROUP>
<THEAD STYLE="background:blue">
<TR>
<TH>1번 영역</TH><TH>2번 영역</TH><TH>3번 영역</TH><TH>4번 영역</TH>
</TR>
</THEAD>
<TBODY STYLE="background:red">
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
</TBODY>
<TFOOT STYLE="background:yellow">
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
</TFOOT>
</TABLE>
예제1-5)
| 1번 영역 | 2번 영역 | 3번 영역 | 4번 영역 |
|---|---|---|---|
| 1번 영역 | 2번 영역 | 3번 영역 | 4번 영역 |
| 1번 영역 | 2번 영역 | 3번 영역 | 4번 영역 |
위의 결과에서 알수 있듯이 각요소에 선언한 스타일이 우선 적용되어 집니다.
예제1-6)코딩소스
<TABLE border="1" STYLE="text-align:center">
<colgroup>
<col span="3" style="background:lime"/>
<col style="background:rgb(0,100,230);"/>
</colgroup>
<THEAD>
<TR>
<TH>1번 영역</TH><TH>2번 영역</TH><TH>3번 영역</TH><TH>4번 영역</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>1번 영역</TD><TD>2번 영역</TD><TD>3번 영역</TD><TD>4번 영역</TD>
</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번 영역 |
위의 예제들에서 COL태그 에 span당한 갯수 만큼 열의 수가 제어 된다는 것을 알수가 있습니다.
이렇게 COL태그 와 COLGROUP 태그를 선언 해 주어 모든 td태그의 열을 쉽게 제어 할수가 있습니다.
그럼 이번에는 위의 예제1-2의 테이블에 THEAD부를 삽입 하고 COL태그와 COLGROUP태그를 적용 해 보도록 합니다.
1-2번 예제의 경우 스타일 시트에 의해 제어를 받고 있는 상태 인데요 이렇게 스타일시트에 의해 제어 당한 테이블의 경우에는 어떤 결과가 나타나는지 보도록 합니다.
예제2-2) 소스
<TABLE class=tablt>
<COLGROUP>
<COL style="BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BACKGROUND: lime; BORDER-BOTTOM: red 1px solid; BORDER-LEFT: blue 1px solid" span=3>
<COL style="HEIGHT: 30px; WIDTH: auto; BACKGROUND: red"></COLGROUP>
<THEAD>
<TR>
<TH>1번 영역</TH>
<TH>2번 영역</TH>
<TH>3번 영역</TH>
<TH>4번 영역</TH></TR></THEAD>
<TBODY>
<tbody>
<tr>
<td class="tda">1-1</td>
<td class="tda">1-2</td>
<td class="tda">1-3</td>
<td class="tda">1-4</td></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">3-1</td>
<td class="tdc">3-2</td>
<td class="tdc">3-3</td>
<td class="tdc">3-4</td></tr>
<tr>
<td class="tdd">4-1</td>
<td class="tdd">4-2</td>
<td class="tdd">4-3</td>
<td class="tdd">4-4</td></tr>
<tr>
<td class="tde">5-1</td>
<td class="tde">5-2</td>
<td class="tde">5-3</td>
<td class="tde">5-4</td></tr>
<tr>
<td class="tdf">6-1</td>
<td class="tdf">6-2</td>
<td class="tdf">6-3</td>
<td class="tdf">6-4</td></tr>
<tr>
<td class="tdg">7-1</td>
<td class="tdg">7-2</td>
<td class="tdg">7-3</td>
<td class="tdg">7-4</td></tr>
<tr>
<td class="tdh">8-1</td>
<td class="tdh">8-2</td>
<td class="tdh">8-3</td>
<td class="tdh">8-4</td>
</tr>
</tbody>
</TABLE>
예제2-2) 결과
| 1번 영역 | 2번 영역 | 3번 영역 | 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 |
위의 예제 2-2의 결과에서 알수 있듯이 스타일 시트에 선언한 스타일이 우선 적용되어 지는 것 을 알수 있습니다.
이것은 스타일 시트에 선언한 !important 속성 때문 인것 같은데요
!important 속성을 주지 않을 경우의 결과 에 대해서는 좀더 공부해 봐야 할것 같습니다.
감사 합니다.
추천은 글쓰는 사람에게 최고의 보약 입니다.