기업형 솔루션 등, <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>