HTML 테이블 Colgroup
<colgroup>요소는 테이블의 특정 열에 스타일을 지정하는 데 사용됩니다 .
HTML 테이블 Colgroup
테이블의 첫 번째 두 열에 스타일을 지정하려면 <colgroup>
및 <col>
요소를 사용합니다.
| 월 | 화 | 수 | 모으다 | 금 | 수능 | 태양 |
|---|---|---|---|---|---|---|
| 1 | 2 | 삼 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
요소 는 <colgroup>열 사양의 컨테이너로 사용해야 합니다.
각 그룹은 <col>요소로 지정됩니다.
속성 은 span스타일을 가져오는 열의 수를 지정합니다.
style속성은 열에 제공할 스타일을 지정합니다 .
참고: colgroups에 대한 법적 CSS 속성 은 매우 제한적으로 선택되어 있습니다 .
예시
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
참고: 태그는 요소 의 <colgroup>자식이어야 하며 ,
등과 <table>같은 다른 테이블 요소 앞에 위치해야
하지만 요소가 있는 경우 요소 뒤에 위치해야 합니다.<thead><tr><td><caption>
법적 CSS 속성
colgroup에서 사용할 수 있는 CSS 속성은 매우 제한적으로 선택되어 있습니다.
width속성
visibility속성
background속성
border속성
다른 모든 CSS 속성은 테이블에 영향을 주지 않습니다.
여러 열 요소
다른 스타일로 더 많은 열의 스타일을
지정하려면 <col>내부에 더 많은 요소를 사용하십시오
<colgroup>.
예시
<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>
...
빈 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>
...
열 숨기기
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>
...