[궁금증] col 태그에 width를 적용할 경우 어떻게 사용해야 할까

 

 

게시판 화면만 봐도 보통 <table> 태그를 사용하여 레이아웃을 만든다.

동시에 <table> 태그 안에 <colgroup> 태그를 활용하여 표의 열을 묶는 그룹을 정의하게 된다. 그리고 <colgroup> 태그 안의 <col> 태그는 각 행에 대해 각 셀의 스타일을 반복하지 않고, 전체 열에 스타일을 적용하는데 사용된다.

 

최근 HTML 웹 메일을 <table> 태그로 레이아웃을 작업하다가 <col> 태그에 width 값을 정의해야 하는 상황이었다.

종종 rwdb나 gdweb을 통해 대형 운영 사이트들을 들어가 마크업을 살펴보다 보면,

<col> 태그에 col width="100" 또는 style="width:100px" 이런 식으로 주는 경우가 있었다. 

 

"두 가지 방식의 차이가 무엇일까" 라는 궁금증이 생겼다.

(너무 늦었을지도 모르지만 그래도 이런 궁금증이 떠오른게 다행이지 않을까)

 

 

Fact Check

- HTML5에서는 span 속성을 제외한 <col> 태그의 대부분 속성들을 더 이상 지원하지 않는다.

 

속성명	속성값
align	left right center justify char	<col>요소와 관련된 컨텐츠의 정렬 HTML5에서는 지원하지 않음
char	문자	<col> 요소와 관련된 컨텐츠의 정렬에 사용되는 문자를 명시 HTML5에서는 지원하지 않음
charoff	숫자	char 속성에서 명시된 문자를 기준으로 정렬될 컨텐츠의 문자수 명시 HTML5에서는 지원하지 않음
span	숫자	<col> 요소로 합쳐질 열의 개수를 명시
valign	top middle bottom baseline	<col> 요소와 관련된 컨텐츠의 수직 정렬 방법을 명시 HTML5에서는 지원하지 않음
width	% px 상대 길이	<col> 요소의 너비를 명시 HTML5에서는 지원하지 않음

- HTML에서는 태그를 닫지 않지만, XHTML에서는 다음과 같이 태그를 닫아야 한다.

<col span="2" />

 

 

 

참고

https://www.w3schools.com/tags/tag_col.asp

HTML col tag

http://tcpschool.com/html-tags/col

코딩교육 티씨피스쿨

 

 

아직 탐구중인 것

HTML 웹 메일을 작업하면서 Outlook, Gmail, Naver, Daum 등 다양한 서비스 애플리케이션을 통해 메일을 수신받게 하면서 테스트 했을 때, 각 서비스의 css 지원 기준이 모두 다르기에 속성 하나 잘못 넣었다가(line-height..........) 하루종일 늪에 빠져있었던 적이 있다.

 

- Outlook, Gmail, Apple Mail 등의 css 지원 여부

https://www.campaignmonitor.com/css/

CSS Support Guide for Email Clients

 

그 예가 <col width="15"/> 이런식의 width 정의였는데, HTML 웹 메일의 경우에는 최대한 해당 태그의 속성을 이용하여 스타일을 주는 것이 정확하더라는 결론을 얻었다.