|
COLGROUP | Table Column Group
페이지 목차
Colgroup 다시 Table 을 다루는 페이지로군요. 앞에서 Table을 만들면서 이런 불편을 느꼈을 지도 모르겠습니다. TR(Table Row) Element 의 경우는 <TR> Tag에 bgcolor, height, align, valign 등을 설정하면 그 row의 전체 Cell 들에 같은 설정이 되었지만 Column 의 경우는 컬럼 전체를 한 번에 다룰 수 있는 방법이 없어서 같은 bgcolor를 column 전체에 지정하기 위해서 아래의 예와 같이 3행 3열의 Table 의 Column 1 에 해당하는 Cell 마다 bgcolor를 지정하게 됩니다. 입력
<HTML>
<HEAD>
<TITLE> 현재 알고 있는 방법으로 Column 에 같은 bgcolor 를 지정할 경우</TITLE>
</HEAD>
<BODY>
<table width="100%" border="1">
<tr>
<td bgcolor="gold">R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
</tr>
<tr>
<td bgcolor="gold">R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
</tr>
<tr>
<td bgcolor="gold">R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
</tr>
</table>
</BODY>
</HTML>
출력결과
즉, 이런 식으로 일일이 지정 할 수 밖에 없었습니다. 이 Colgroup, Col 등의 Element 는 이러한 불편을 없애고 Column 전체를 한 번에 Control 할 수 있는 방법을 제공해 줍니다. 이 번 페이지에서는 Column 을 다루는 Element 들에 대해서 알아 봅니다.
Col Element 예제 다음의 3행 4열 테이블로 col Element 의 예제를 해 봅시다. 입력
<HTML>
<HEAD>
<TITLE>Col Element 를 사용한 Column 다루기</TITLE>
</HEAD>
<BODY>
<table width="100%" border="1">
<COL bgcolor="gold" align="center">
<COL span="2" bgcolor="tomato"><!-- 2개의 column 을 사용 -->
<COL bgcolor="palegreen">
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
<td>R1 C4</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
<td>R2 C4</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
<td>R3 C4</td>
</tr>
</table>
</BODY>
</HTML>
출력결과
Source code 를 보면 굵은 글씨로 된 Col Element 부분 중 첫 번째 col 은 span 속성을 사용하지 않았으므로 1번 Column 1개를 사용하고, 두 번째 col 에 span="2" 가 지정되어 있으므로 2, 3번 Column 2개를 3 번째 col도 span 속성을 사용하지 않았기 때문에 4 번 Column 1개, 이렇게 총 4 개의 Column 1개, 2개, 1개로 분할하여 column 을 지정하였습니다. Colgroup, Col element 의 위치는 어디인가? Colgroup과 Col element 의 위치는 결론부터 말하자면 자기 맘대로 입니다. 물론 아무대나 라는게 아니고, Table tag 속에서 가장 먼저 나와야 될 필요는 없다는 뜻입니다. 다만 Table tag 바로 밑에 오지 않을 경우에는 </TR>과 <TR> 사이 이기만 하면 어느 곳이건 상관 없습니다. 아래와 같이 1행과 2행 사이에 위치하면 입력
<HTML>
<HEAD>
<TITLE>Col Element 를 사용한 Column 다루기</TITLE>
</HEAD>
<BODY>
<table width="100%" border="1">
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
<td>R1 C4</td>
</tr>
<COL bgcolor="gold" align="center">
<COL span="2" bgcolor="tomato"><!-- 2개의 column 을 사용 -->
<COL bgcolor="palegreen">
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
<td>R2 C4</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
<td>R3 C4</td>
</tr>
</table>
</BODY>
</HTML>
출력결과
이렇게 Colgroup 또는 Col element 가 나오는 이후 부터 적용됩니다. Colgroup Element 예제 1 앞의 col Element 가 column 하나 하나에 대한 설정을 하는 element 였다면 Colgroup element 는 column 이 하나건 둘이건 column 전체를 group 으로 지정하는 element 입니다. Colgroup element 는 특히 Table 전체에 공통적으로 적용시켜야 될 속성이 있고, column 마다 따로 지정해야 될 속성이 있을 때 사용된 COL element 들을 COLGROUP element 로 묶어서 사용합니다. 아래는 Source code... 입력
<HTML>
<HEAD>
<TITLE>Colgroup Element 를 사용한 Column 다루기</TITLE>
</HEAD>
<BODY>
<table width="100%" border="1">
<COLGROUP align="center" style="color: blue;">
<COL bgcolor="gold" align="left">
<COL span="2" bgcolor="tomato">
<COL bgcolor="palegreen">
</COLGROUP>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
<td>R1 C4</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
<td>R2 C4</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
<td>R3 C4</td>
</tr>
</table>
</BODY>
</HTML>
출력결과
이 경우처럼 전체적으로 글씨색이 blue, 글자정렬이 center 이고, Column 1 의 경우만 글자 정렬을 왼쪽 맞춤할 경우 Colgroup element 에 글씨색과 글자정렬을 지정하고 예외적인 Column 은 Col element 를 사용하여 해당 Column 에 따로 지정합니다. Colgroup Element 예제 2 이번에는 Col element 대신 전부 Colgroup element 로 대체 시켰을 경우를 생각해 보져. Code를 실행 시켜보면 알겠지만 아무런 차이도 없습니다만, 뒤에 나올 Table 속성 중 rules 속성에서 차이를 보입니다. 입력
<HTML>
<HEAD>
<TITLE>Colgroup Element 를 사용한 Column 다루기</TITLE>
</HEAD>
<BODY>
<table width="100%" border="1">
<COLGROUP bgcolor="gold" align="left">
<COLGROUP span="2" bgcolor="tomato">
<COLGROUP bgcolor="palegreen">
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
<td>R1 C4</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
<td>R2 C4</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
<td>R3 C4</td>
</tr>
</table>
</BODY>
</HTML>
출력결과
다음 페이지의 Row group 에서 계속... 이 문서의 저작권은 www.cadvance.org 에 있습니다.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||