HTML <colgroup>: 표 열 그룹 요소

<table>
  <caption>
    스타크래프트의 유닛들
  </caption>
  <colgroup>
    <col />
    <col span="2" class="terran" />
    <col span="2" class="protoss" />
    <col span="2" class="zerg" />
  </colgroup>
  <thead>
    <tr>
      <td></td>
      <th scope="col">건설로봇</th>
      <th scope="col">해병</th>
      <th scope="col">일벌레</th>
      <th scope="col">저글링</th>
      <th scope="col">탐사정</th>
      <th scope="col">광전사</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">체력</th>
      <td>60</td>
      <td>40</td>
      <td>40</td>
      <td>35</td>
      <td>20</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  border: 1px solid #777;
  color: #000;
  padding: 8px;
}

col {
  background: #fff;
}

.terran {
  background: #96dcff;
}
.protoss {
  background: #fff2ab;
}
.zerg {
  background: #ffc4ab;
}