테이블 태그 colgroup 알아보기

html에서 <table>(테이블) 태그는 가장 많이 쓰이는 태그 요소 중 하나죠. 특히 명단이나 리스트를 보여줄 때 가장 쉽게 구현이 가능한 방법입니다.

이런 테이블을 구성하는데 사용할 수 있는 태그는 참 많습니다. table, thead, tbody, tr, td 등등 정말 많습니다. 오늘은 그 중에서 colgroup 태그에 대하여 알아보도록 하겠습니다.

# colgroup 태그란 무엇인가

colgroup 태그는 사용되는 테이블의 컬럼(td 태그)에 적용할 스타일 width와 bakcground를 해당 태그에서 미리 적용할 수 있게 합니다. 특히 각 컬럼의 길이를 설정하는데 가장 많이 쓰입니다. 예를들어 아래와 같은 테이블에서 각각의 컬럼들이 width와 background를 각각 다음과 같이 사용하려고 한다면 어떻게 작성할까요?
1. 첫번째 컬럼 : 번호 td - 50px, red
2. 두번째 컬럼 : 제목 td - 200px, blue
3. 세번째 컬럼 : 이름 td - 100px, green이때 colgroup을 사용하여 테이블 코드는 아래의 예제와 같이 설정할 수 있습니다.

! colgroup 예제코드 보기

아래는 테이블을 하나 만들고 width를 css가 아닌 colgroup 태그의 width 속성으로 적용한 예제입니다.


위 예제코드는 thead 부분의 코드만 있지만 tbody의 column까지 모두 colgroup의 설정이 적용되어 나타나게 됩니다. 즉 각각 컬럼의 width 값이 50px, 200px, 100px을 가지게 되죠.

@ 실제로 구현한 경우의 코드


직접 브라우저에 실행한 결과입니다. 보시는 것처럼 width가 각각 다르게 설정되어 나타나는 것을 확인할 수 있습니다.

! 마지막 정리하기

colgroup의 경우 html5에서 공식적으로 지원되지 않습니다. 생각해보면 스타일과 태그 요소의 분리를 위해 즉 의존성을 의해서는 가급적 css를 사용하는게 좋을 것입니다. 하지만 그럼에도 불구하고 많이 사용되는 이유는 그 만큼 사용이 편리하기 때문입니다. 간단한 코드의 경우에는 오히려 이 방법이 빠르고 쉽죠.

여기까지 colgroup의 사용과 방법에 대하여 간략히 알아봤습니다.