기업형 솔루션 등, <table>태그를 자주 사용하는 형태의 웹을 제작할 때에 디자인의 효율적인 코딩을 위해 <colgroup> 태그를 활용하게 됩니다. <colgroup> 은 테이블의 한 행을 기준으로 일괄적인 디자인을 적용하고자 할 때에 아주 유용합니다. 그러나 HTML5에서는 <colgroup> 태그의 사용법이 많이 바뀌었습니다.

<table> 태그나 <input> 태그가 그러하듯이 CSS에서 처리가능한 디자인 요소들에 영향을 미치는 Inline 속성들을 전면적으로 지원하지 않게 되었고, 여타 다른 것들과 마찬가지로 Style Attribute 를 사용하여 내용을 입력하거나 Class를 지정해줄 수 있습니다. HTML5에서 바뀐 특성과 함께 <colgroup>을 최적으로 작성하는 방법을 예제와 함께 기록합니다.

<table>
<colgroup>
<col />
<col />
<col width="70px"/> <!-- html5 이전에 작성하던 방식입니다. 지양하도록 합니다. -->
<col style="width: 70px;"/> <!-- Style Attribute 를 이용해 적어주거나 -->
<col class="small-width"/> <!-- Class 를 지정해서 스타일을 입혀줍니다. -->
</colgroup>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
</tbody>
</table>

<colgroup><col> 태그의 집합입니다.각 <col/>은 같은 순서의 <td>, 혹은 <th>에 관여합니다.
가장 상단의 두 <col>을 보면 세 번째에 스타일을 주기 위해서 의미없이 두<col>태그가비어있는 것을 볼 수 있습니다.

갯수가 적을 때야 문제가 되지않지만, 데이터가 많은 복잡한 <table>을 구성할 때에는 상당히 보기가 좋지 않아질 수 있습니다. 그럴 때에 아래와 같이 span attribute 를 사용하면, 중복되는 태그의 갯수를 줄일 수 있습니다.

<colgroup>
<col span="2"/>
<col style="width: 70px;"/>
</colgroup>