HTML <colgroup> 태그란?
테이블의 열 그룹을 정의하려면 <colgroup> 태그를 사용합니다. HTML의 <colgroup> 태그는 테이블 내에서 하나 이상의 열에 공통 속성을 일괄 지정할 때 활용됩니다. 만약 그룹 내 특정 열에만 서로 다른 속성을 적용하고 싶다면, <colgroup> 태그 안에 <col> 태그를 추가하여 개별 열의 스타일을 세부적으로 제어할 수 있습니다.
<colgroup> 및 <col> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| Align | right left center justify char | 열의 수평 정렬 방식을 정의합니다. HTML5에서는 지원되지 않습니다. |
| Char | character | 텍스트를 정렬할 기준 문자를 지정합니다(align="char"와 함께 사용). HTML5에서는 지원되지 않습니다. |
| Charoff | pixel | 기준 문자(char)로부터 정렬이 시작되는 오프셋 위치를 정의합니다. HTML5에서는 지원되지 않습니다. |
| Span | number | <colgroup> 또는 <col> 요소가 차지할 열의 개수를 정의합니다. HTML5에서도 지원되는 유일한 속성입니다. |
| Valign | bottom middle top baseline | 열의 수직 정렬 방식을 정의합니다. HTML5에서는 지원되지 않습니다. |
| Width | pixels 또는 % | 현재 col 요소가 포함하는 각 열의 기본 너비를 지정합니다. HTML5에서는 지원되지 않으며, CSS로 대체해야 합니다. |
참고: Align, Char, Charoff, Valign, Width 속성은 HTML4에서만 유효했던 속성들로, 현재는 CSS(text-align, vertical-align, width 등)를 사용하는 것이 표준적인 방법입니다.
사용 예제
아래 코드를 직접 실행해 보면 <colgroup> 태그를 활용해 서로 다른 너비의 열 그룹을 정의하는 방법을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML colgroup 태그 예제</title> </head> <body> <p>서로 다른 너비를 가진 세 개의 열로 구성된 colgroup 예제입니다:</p> <table border = "1"> <colgroup span = "4"> <col width = "40"></col> <col width = "70"></col> <col width = "100"></col> <col width = "130"></col> <col width = "160"></col> </colgroup> <tr> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td>Five</td> </tr> </table> </body> </html>
위 예제에서 <colgroup> 태그의 span="4" 속성은 그룹이 4개의 열에 영향을 미친다는 것을 의미하고, 각 <col> 태그는 해당 열의 너비를 픽셀 단위로 지정합니다. 이처럼 <colgroup>을 사용하면 테이블 전체 구조를 수정하지 않고도 열 단위로 스타일을 효율적으로 관리할 수 있습니다.