thinkNote

▶ <colgroup> 요소는 표의 특정 열의 스타일을 지정하는 데 사용된다.

■ HTML 표 Colgroup

▶ 표의 첫 번재 두 열의 스타일을 지정하려면 <colgroup> 와 <col> 요소를 사용한다.

▶ <colgroup> 요소는 열 사양에 대한 컨테이너로 사용해야 한다.

▶ 각 그룹은 <col> 요소로 지정된다.

▶ "span" 항목은 스타일을 가져오는 열 수를 지정한다.

▶ "stlye" 항목은 열에 스타일을 주기위해 지정한다.

※ colsgroup에 대한 유효한 CSS 속성은 매우 제한적으로 선택된다.

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colgroup1 

※ <colgroup> 태그는 <table> 요소의 하위에 있어야 한다.

※ 위치는 <caption> 요소 뒤, <thead>, <tr>, <td> 등과 같은 <tabe> 요소 앞에 위치되야 한다.

■ 유효 CSS 속성

▶ colgroup에 사용될 수 있는 CSS 속성 선택은 매우 제한적이다

▷ "width" 속성

▷ "visibility" 속성

▷ "background" 속성

▷ "border" 속성

▶ 외에 다른 CSS 속성은 표에 영향을 주지 않는다.

■ 다수 col 요소

▶ 다른 스타일로 많은 열에 스타일을 적용하고 싶다면, <colgroup> 안에 많은 <col> 요소를 사용한다.

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colgroup2 

■ 공백 Colgroups

▶ 표 중간의 열에 스타일을 주고 싶다면, 열 앞에 빈 <col> 요소를 삽입한다.

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colgroup3 

■ 열 숨기기

▶ "visibility: collapse" 속성으로 열을 숨길 수 있다.

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colgroup4 

출처 : https://www.w3schools.com/html/html_table_colgroup.asp