<colgroup>과 <col>태그를 이용한 특정 열 스타일링

HTML 테이블에서 특정 열에만 색상을 지정하는 등 스타일링이 필요할 때가 있습니다.

HTML id나 class를 지정해서 할 수도 있지만, <colgroup>태그를 이용해서 스타일을 적용할 수 있습니다.

 

<colgroup>와 <col>태그를 이용한 표 스타일링

<colgroup> : 테이블의 전체 column의 형식을 정의할 때 사용
<col> : 전체 column의 스타일을 관리할 때 사용. colgroup 요소에 포함된 각 column의 속성을 명시함.

아래의 코드 결과 예제. 첫 2개의 열과 세번째 열의 스타일을 달리 적용한 예시.

<table>
  <colgroup>
    <col span="2" style="background-color:lightblue">
    <col style="background-color:darksalmon">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>