Reference/HTML

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

by @webs 2022. 12. 6.

<colgroup>

<colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다. 테이블의 속성을 일괄적으로 줄 때 편하게 사용 할 수 있습니다.

테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다.

테이블은 제목을 표시하기 위해 <caption>을 사용하고, 셀 요소를 그룹화하기 위해 <colgroup>과 <col>을 사용합니다. 테이블 전체 구조를 분리하기 위해 <thead>, <tbody>, <tfoot>를 사용하며, 행과 열을 나타내는 <tr>, <td>, <th> 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다.

특징	설명
요소	인라인 요소(Inline Element)
닫는 태그	닫는 태그 사용(<colgroup> ~ </colgroup>)
버전	HTML4
시각적 표현	-
사용성	★★★☆☆

정의(Definition)

<colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
<col> 태그는 <colgroup> 요소에 속하는 각 열의 속성을 설정합니다.

표와 관련된 태그

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

예제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
푸터1	푸터1	푸터1	푸터1	푸터1

HTML

CSS

SCRIPT

<div class="table-box">
    <table>
        <caption>표 제목 설정</caption>
        <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>
        <tfoot>
            <tr>
                <td>푸터1</td>
                <td>푸터1</td>
                <td>푸터1</td>
                <td>푸터1</td>
                <td>푸터1</td>
            </tr>
        </tfoot>
    </table>
</div>

.table-box table {
    width: 100%;
    text-align: center;
}
.table-box table th {
    background: #deeeff;
    font-weight: normal;
}
.table-box table th, 
.table-box table td {
    border: 1px solid #ccc;
    padding: 10px;
    color: #666;
}
.table-box table tfoot td {
    background: #ffeded;
}

//Javascript none

예제2(Sample)

colgroup을 적용한 예제입니다.

표 제목 설정
제목1	제목2	제목3
내용1	내용1	내용1
내용2	내용2	내용2
내용3	내용3	내용3
내용4	내용4	내용4

HTML

CSS

SCRIPT

<div class="table-box">
    <table>
        <caption>표 제목 설정</caption>
        <colgroup>
            <col style="width: 50%;">
            <col style="width: 25%;">
            <col style="width: 25%;">
        </colgroup>
        <thead>
            <tr>
                <th>표 제목1</th>
                <th>표 제목2</th>
                <th>표 제목3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>표 내용1</td>
                <td>표 내용1</td>
                <td>표 내용1</td>
            </tr>
            <tr>
                <td>표 내용2</td>
                <td>표 내용2</td>
                <td>표 내용2</td>
            </tr>
            <tr>
                <td>표 내용3</td>
                <td>표 내용3</td>
                <td>표 내용3</td>
            </tr>
            <tr>
                <td>표 내용4</td>
                <td>표 내용4</td>
                <td>표 내용4</td>
            </tr>
        </tbody>
    </table>
</div>

.table-box table {
    width: 100%;
}
.table-box table th {
    background: #deeeff;
    font-weight: normal;
}
.table-box table th, 
.table-box table td {
    border: 1px solid #ccc;
    padding: 10px;
    color: #666;
}