[HTML] <colgroup>

<colgroup>

<colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.

---

<colgroup>

<colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.

특징	설명
요소	인라인 요소(Inline Element)
닫는 태그	닫는 태그 사용(<colgroup> ~ </colgroup>)
버전	HTML4
사용성

정의(Definition)

• <colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
• <col> 태그는 <colgroup> 요소에 속하는 각 열의 속성을 설정합니다.
• <colgroup> 태그의 align 속성은 HTML5에서 지원하지 않습니다.

테이블과 관련된 태그 및 속성(Table Related Tags and Property)

• <table> 태그는 표를 설정합니다.
• <caption> 태그는 표의 제목을 설정합니다.
• <thead> 태그는 표의 헤더 영역을 그룹화합니다.
• <tbody> 태그는 표의 본문 영역을 그룹화합니다.
• <tfoot> 태그는 표의 푸터 영역을 그룹화합니다.
• <tr> 태그는 표의 행을 설정합니다.
• <td> 태그는 표의 열(셀)을 설정합니다.
• <th> 태그는 행이나 열에 타이틀을 설정합니다.
• <colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
• <col> 태그는 <colgroup> 요소에 속하는 각 열의 속성을 설정합니다.
• border-collapse 속성은 테이블의 테두리 분리 여부를 설정합니다.
• border-spacing 속성은 테이블의 테두리 간격을 설정합니다.

속성(Property)

속성	값(예)	설명	버전
align	left right center justify char	요소를 왼쪽으로 정렬합니다. 요소를 오른쪽으로 정렬합니다. 요소를 가운데로 정렬합니다. 요소를 양쪽 정렬로 정렬합니다. 특정 문자에 대한 내용을 정렬합니다.
bgcolor	bgcolor = "#000000"	셀의 백그라운 색을 정의합니다.
char	char="character"	특정 문자에 대한 정렬을 정의하며, align="char" 속성과 같이 사용됩니다.
charoff	charoff="2"	요소의 문자 수를 설정합니다.
span	span="2"	요소의 컬럼 수 만큼 속성을 설정합니다.	-
valign	top middle bottom baseline	요소를 위쪽으로 정렬합니다. 요소를 중간으로 정렬합니다. 요소를 아래로 정렬합니다. 요소를 기본라인으로 정렬합니다.
width	width="130"	요소 컬럼의 가로 값을 설정합니다.

예제1(Sample)

표를 설정한 예제입니다.

표 제목 설정

표 제목1	표 제목2	표 제목3	표 제목4	표 제목5
표 내용1	표 내용1	표 내용1	표 내용1	표 내용1
표 내용2	표 내용2	표 내용2	표 내용2	표 내용2
표 내용3	표 내용3	표 내용3	표 내용3	표 내용3
표 내용4	표 내용4	표 내용4	표 내용4	표 내용4
표 내용5	표 내용5	표 내용5	표 내용5	표 내용5

HTML

CSS

SCRIPT

<table class="sample-table">
    <caption>표 제목 설정</caption>
    <colgroup>
        <col>
        <col class="blue">
        <col class="red" span="2">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>표 제목1</th>
            <th>표 제목2</th>
            <th>표 제목3</th>
            <th>표 제목4</th>
            <th>표 제목5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>표 내용1</td>
            <td>표 내용1</td>
            <td>표 내용1</td>
            <td>표 내용1</td>
            <td>표 내용1</td>
        </tr>
        <tr>
            <td>표 내용2</td>
            <td>표 내용2</td>
            <td>표 내용2</td>
            <td>표 내용2</td>
            <td>표 내용2</td>
        </tr>
        <tr>
            <td>표 내용3</td>
            <td>표 내용3</td>
            <td>표 내용3</td>
            <td>표 내용3</td>
            <td>표 내용3</td>
        </tr>
        <tr>
            <td>표 내용4</td>
            <td>표 내용4</td>
            <td>표 내용4</td>
            <td>표 내용4</td>
            <td>표 내용4</td>
        </tr>
        <tr>
            <td>표 내용5</td>
            <td>표 내용5</td>
            <td>표 내용5</td>
            <td>표 내용5</td>
            <td>표 내용5</td>
        </tr>
    </tbody>
</table>

table th, 
table td {
    border: 1px solid #ccc;
    padding: 10px;
}
table .blue {background: #deeeff;}
table .red {background: #ffdddd;}

//javascript none

호환성(Compatibility)

						6	7	8	9	10	11
<colgroup>	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
align	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨
bgcolor	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨
char	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨
charoff	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨
span	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
valign	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨
width	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능

참고 사이트(Reference)

• MDN
• w3

---