[HTML] 테이블 태그의 colgroup 태그

1. colgroup 태그란?

colgroup 태그는 사용되는 테이블의 컬럼(td 태그)에 적용할 스타일 width와 background를 해당 태그에서 미리 적용할 수 있게 합니다. 특히 각 컬럼의 길이를 설정하는데 가장 많이 쓰입니다. 예를들어 아래와 같은 테이블에서 각각의 컬럼들이 width와 background를 각각 다음과 같이 사용하려고 한다면 어떻게 작성해야할까요?

1. 첫 번째 컬럼: 번호 td - 50px, red
2. 두 번째 컬럼: 제목 td - 200px, blue
3. 세 번째 컬럼: 이름 td - 100px, green

예제코드 보기

<table border="1">
  <colgroup>
    <col width="50px" style="background: red" />
    <col width="200px" style="background: blue" />
    <col width="100px" style="background: green" />
  </colgroup>
  <thead>
    <tr>
      <td>번호</td>
      <td>제목</td>
     <td>이름</td>
    </tr>
  </thead>
</table>