col element - by. UXKM

2025-05-16

요약 설명
<col> 요소는 <colgroup> 요소 내부에서 사용되며, 표의 개별 열(column)에 스타일이나 속성을 적용하기 위한 태그입니다.
span 속성을 통해 여러 열에 한꺼번에 속성을 지정할 수 있으며, CSS와 함께 사용해 열 너비, 배경색, 테두리 등을 제어할 수 있습니다.
<col>은 콘텐츠를 포함하지 않는 빈 태그이며, 시맨틱 구조보다는 표의 레이아웃과 시각적 표현을 보조하는 역할을 합니다. 표 전체의 구조를 명확히 하고, 스타일링을 간결하게 유지할 때 유용합니다.

보다 유연한 스타일링을 위해 개별 <td> 또는 <th> 요소에 CSS로 스타일을 지정하는 방법이 일반적으로 권장됩니다.
그러나 <colgroup> 및 <col> 요소를 완전히 배제해야 한다는 의미는 아니며, 특정 열 전체에 일괄적인 스타일을 적용할 때는 여전히 유용하게 사용할 수 있습니다.

주요 역할 및 특징

개별 열(Column)에 스타일 적용
<col> 요소는 테이블의 각 열에 배경색, 너비, 테두리 등의 스타일을 한 번에 적용할 수 있도록 도와줍니다.
<colgroup> 요소와 함께 사용
- <col>은 반드시 <colgroup>의 자식 요소로만 사용 가능합니다.
- <colgroup>과 함께 사용하여, 테이블에서 여러 열에 공통된 스타일을 적용할 수 있습니다.
여러 열을 한 번에 스타일링 가능
- span 속성을 사용하여 여러 열을 그룹화하고, 동일한 스타일을 한 번에 적용할 수 있습니다.
- 예를 들어, 특정 열의 배경색을 변경하거나, 너비를 설정할 수 있습니다.
CSS를 사용할 수 없는 환경에서 유용
style 속성을 통해 간단히 열의 스타일을 지정할 수 있습니다.
CSS를 통한 스타일링 가능
<col>에 class 또는 id를 지정해 CSS로 스타일링할 수 있습니다.

CSS 기본 값

<col> 요소는 아래와 같은 기본값이 적용됩니다.
기본적으로 <col> 요소는 화면에 표시되지 않지만, 스타일을 적용하면 해당 열에 적용된 스타일이 테이블에 반영됩니다.

							col {
								display: table-column;
							}

기본 문법

							<table>
								<colgroup>
									<col> <!-- style 또는 span 적용 -->
									<col> <!-- style 또는 span 적용 -->
								</colgroup>
								<tr>
									<th>제목 셀</th>
									<th>제목 셀</th>
								</tr>
								<tr>
									<td>데이터 셀</td>
									<td>데이터 셀</td>
								</tr>
							</table>

속성

[span] 선택 사항 <col span="값">

여러 개의 열을 하나로 그룹화하여 동일한 스타일을 적용할 때 사용합니다.
span="2"는 두 개의 열에 동일한 스타일을 적용하겠다는 의미입니다.

								<col span="2" style="background-color: #f0f0f0">

[width] 선택 사항 - CSS로 대체 <col style="width: 값;">

열의 너비를 지정합니다.
HTML4 환경에서는 <col> 요소의 width 속성이 공식적으로 지원되었지만,
HTML5(2014년 표준화) 부터 <col> 요소의 width 속성이 비표준(deprecated) 처리되었습니다.

HTML4 방식(비 권장) :

									<col width="200">

HTML5 방식(CSS로 대체) :

									<col style="width: 200px">

글로벌 속성 사용(class, id, style 등) 선택 사항

<col> 요소에는 배경색, 테두리, 너비 등의 스타일을 적용할 수 있습니다.
인라인 스타일 방식(style 속성 사용)으로 직접 지정할 수도 있고, class나 id를 활용하여 외부 CSS에서 스타일을 정의하는 것도 가능합니다.
그러나 text-align과 같은 텍스트 정렬 속성은 <col> 요소에 적용되지 않으며, 개별 <td> 또는 <th> 요소에서 직접 지정해야 합니다.

style 속성 사용 :

									<col style="width: 100px; background-color: #eee;">
									<col style="width: 200px; background-color: #f9f9f9;">

class 사용 :

									<style>
										.col-1 {
											width: 100px; background-color: #eee;
										}
										.col-2 {
											width: 200px; background-color: #f9f9f9;
										}
									</style>

									<col class="col-1">
									<col class="col-2">

예제

기본적인 열 스타일 적용

span 속성을 사용해 여러 열에 스타일 적용

CSS로 스타일링 제어

주의사항

<col>은 단독 사용 불가하며 반드시 <colgroup>의 자식 요소로만 사용 가능합니다.
<col>을 사용한 스타일링은 모든 셀에 적용되지 않으므로, 필요에 따라 CSS로 테이블을 제어하는 것이 더 효율적일 수 있습니다.
span 속성은 전체 열의 개수를 초과할 수 없습니다.
span="3"을 사용할 때, 최소한 3개의 열이 존재해야 합니다.
<col>은 스타일이나 속성 지정만 가능하고, 데이터를 직접 포함할 수 없습니다.
데이터를 포함하려면 <td>, <th>를 사용해야 합니다.