테이블 열(column)에 속성을 일괄 지정하려면 <col> 태그를 사용합니다. HTML의 <col> 태그는 여러 테이블 열에 공통으로 적용할 속성 정의를 한곳에 모아 선언할 수 있게 해주는 요소입니다.
다만 주의할 점이 있습니다. <col> 태그는 열을 구조적으로 그룹화하는 역할은 하지 않습니다. 열을 실제로 하나의 그룹으로 묶는 것은 <colgroup> 요소의 역할이며, <col>은 그 안에서 각 열의 스타일·속성을 정의하는 용도로 사용됩니다.
<col> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| align | right left center justify char | 열 내용의 가로 정렬 방식을 정의합니다. HTML5에서는 지원되지 않습니다. |
| char | 문자(character) | 텍스트를 특정 문자를 기준으로 정렬할 때 사용합니다. (align="char"와 함께 사용) HTML5에서는 지원되지 않습니다. |
| charoff | 픽셀(pixel) | char 속성으로 지정한 첫 번째 문자를 기준으로 정렬 오프셋(픽셀 또는 백분율 값)을 지정합니다. HTML5에서는 지원되지 않습니다. |
| span | 숫자(number) | <col> 요소가 몇 개의 열에 걸쳐 적용될지(스팬 개수)를 정의합니다. |
| valign | bottom middle top baseline | 열 내용의 세로 정렬 방식을 정의합니다. HTML5에서는 지원되지 않습니다. |
| width | 픽셀 또는 %(백분율) | 현재 col 요소가 포괄하는 각 열의 기본 너비를 지정합니다. HTML5에서는 지원되지 않습니다. |
참고: 위 표의 대부분 속성(align, char, charoff, valign, width)은 HTML5에서 폐기(deprecated)되었습니다. 최신 웹 표준 환경에서는 CSS의 text-align, vertical-align, width 등의 속성을 사용해 동일한 효과를 구현하는 것이 권장됩니다. 다만 레거시 코드 분석이나 유지보수 시에는 여전히 알아두면 유용합니다.
예제
아래 코드를 실행하면 <col> 태그를 활용해 서로 다른 너비의 세 열을 가진 테이블을 만드는 방법을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML col Tag</title> </head> <body> <p>서로 다른 너비를 가진 세 개의 열로 구성된 colgroup 예제:</p> <table border = "1"> <colgroup span = "4"> <col width = "40"></col> <col width = "70"></col> <col width = "100"></col> <col width = "130"></col> <col width = "160"></col> </colgroup> <tr> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td>Five</td> </tr> </table> </body> </html>