colgroup, col

colgroup & col

<colgroup>과 <col>은 HTML 테이블(table) 요소에서 사용되는 요소로, 테이블의 열(column)들을 정의하고 스타일을 적용하는 데 사용된다.

1) colgroup

<colgroup> 요소는 테이블의 여러 열을 그룹화하여 공통적인 스타일을 적용하는 데 사용된다. 보통 <colgroup>은 <table> 요소 바로 다음에 온다. <colgroup> 요소 내부에는 하나 이상의 <col> 요소가 들어간다.

 

2) col

<col> 요소는 <colgroup> 요소 내에서 사용되며, 각 열(column)에 대한 스타일을 정의하는 데 사용된다. <col> 요소는 열의 속성을 지정하는데 유용하며, 주로 스타일을 적용하는데 활용된다.

<table>
  <colgroup>
    <col style="background-color: lightblue; width: 30%" />
    <col style="background-color: lightgreen; width: 70%" />
  </colgroup>
  <tr>
    <td>열 1</td>
    <td>열 2</td>
  </tr>
  <tr>
    <td>열 1</td>
    <td>열 2</td>
  </tr>
  <tr>
    <td>열 1</td>
    <td>열 2</td>
  </tr>
</table>

위의 예제에서 <col> 요소는 첫 번째 열과 두 번째 열의 스타일을 지정한다. 이로 인해 첫 번째 열과 두 번째 열의 배경색이 각각 lightblue와 lightgreen으로 설정된다. <colgroup>과 <col> 요소는 테이블의 열을 그룹화하고 스타일을 적용하는데 유용한 방법으로, 특히 많은 열을 가진 테이블에서 일괄적으로 스타일을 적용하고자 할 때 사용된다. 각 컬럼의 width를 따로 %로 줄 때 많이 사용한다.