HTML <colgroup> 태그란?
<colgroup> 태그는 HTML 테이블에서 하나 이상의 열(column)을 하나의 그룹으로 묶어주는 요소입니다. 이 태그를 활용하면 각 셀에 일일이 스타일을 지정하지 않고도 특정 열 전체에 배경색, 너비 등의 스타일을 한 번에 적용할 수 있어 코드가 훨씬 간결해집니다.
<colgroup> 태그는 반드시 <table> 태그 바로 뒤에 위치해야 하며, <tr>, <thead> 등 행(row) 관련 요소보다 먼저 선언되어야 합니다.
<colgroup> 태그의 주요 속성
- span − 열 그룹이 차지할 열의 개수를 지정합니다. 예를 들어 span="3"으로 설정하면 해당 <col> 요소가 연속된 3개 열에 동일한 스타일을 적용합니다.
예제
이제 <colgroup> 태그를 실제로 구현한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<h2>Result</h2>
<table>
<colgroup>
<col span="3" style="background-color:gray;">
<col style="background-color:orange;">
</colgroup>
<tr>
<th>Id</th>
<th>Name</th>
<th>Percentage</th>
<th>Rank</th>
</tr>
<tr>
<td>009</td>
<td>Tom</td>
<td>98</td>
<td>1</td>
</tr>
<tr>
<td>011</td>
<td>Kieron</td>
<td>97</td>
<td>2</td>
</tr>
<tr>
<td>039</td>
<td>Gayle</td>
<td>95</td>
<td>3</td>
</tr>
<tr>
<td>017</td>
<td>Shaun</td>
<td>92</td>
<td>4</td>
</tr>
<tr>
<td>009</td>
<td>Kane</td>
<td>91</td>
<td>5</td>
</tr>
<tr>
<td>025</td>
<td>Steve</td>
<td>87</td>
<td>6</td>
</tr>
<tr>
<td>013</td>
<td>Jack</td>
<td>85</td>
<td>7</td>
</tr>
<tr>
<td>023</td>
<td>Tim</td>
<td>84</td>
<td>8</td>
</tr>
</table>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
코드 분석
위 예제에서는 여러 열에 스타일을 한꺼번에 설정했습니다.
<colgroup> <col span="3" style="background-color:gray;"> <col style="background-color:orange;"> </colgroup>
<colgroup> 요소 내부의 첫 번째 <col> 태그에 span="3"을 지정하여 앞의 3개 열(Id, Name, Percentage)에 회색 배경색을 적용했습니다.
<col span="3" style="background-color:gray;">
나머지 열(Rank)에는 별도의 span 값 없이 주황색 배경색 스타일이 적용됩니다.
<col style="background-color:orange;">
마무리 팁
<colgroup>과 <col> 태그는 테이블의 열 단위 스타일링에 특화된 요소입니다. CSS 선택자만으로도 비슷한 효과를 낼 수 있지만, 열 전체에 배경색이나 너비를 일괄 적용할 때는 <colgroup>을 사용하는 편이 더 직관적이고 유지보수에도 유리합니다.