HTML - colgroup 요소

표의 모든 행과 열에 똑같은 스타일을 지정하려면 일일이 <th>, <td>태그에 속성을 지정해야 합니다. 하지만 <colgroup>태그를 이용하면 원하는 열에 같은 스타일을 한번에 지정할 수 있습니다.

아래와 같이 열의 개수가 5개이면 <col>태그 개수가 5개가 되어야 하므로 <col>태그의 "span" 속성에 "2"개라고 지정해 주었습니다.

<table border="1">
  <caption>표의 제목</caption>
  <colgroup>
    <!-- 첫 번째 열에는 스타일 없음 -->
    <col>
    <!-- 두 번째 열에는 #CCCCCC 색상 지정 -->
    <col style="background:#CCCCCC;">
    <!-- 3, 4번째 열에는 파란색으로 지정 -- >
    <col span="2" style="background:blue">
    <!-- 5번째 열에는 스타일 없음 -->
    <col>
  </colgroup>
  <tr>
    <td>셀 내용</td>
    <td>셀 내용</td>
    <td>셀 내용</td>
    <td>셀 내용</td>
    <td>셀 내용</td>
  </tr>
  <tr>
    <td>셀 내용</td>
    <td>셀 내용</td>
    <td>셀 내용</td>
    <td>셀 내용</td>
    <td>셀 내용</td>
  </tr>
</table>

주의할 부분은 <colgroup>태그는 첫 번째 <tr>태그 앞에 사용되어야 합니다.