table 태그

명단, 리스트 등 보여줄 때 가장 쉽게 구현이 가능한 방법
.
.
.
이런 테이블을 구성하는데 사용할 수 있는 태그 중!
오늘 알아볼 것은

colgroup 태그이다.

colgroup 태그

테이블 컬럼(td태그)에 적용할 스타일 width와 background를 해당 태그에서 미리 적용할 수 있게 한다.

예시
1. 첫번째 컬럼: 번호 td - 50px, red
2. 두번째 컬럼: 제목 td - 200px, blue
3. 세번째 컬럼: 이름 td - 100px, green

이때 colgroup을 사용하여 테이블 코드는 아래의 예제 같이 설정할 수 있다.

예제코드

<table border="1">
	<colgroup>
		<col width="50px" style="background:red"/>
		<col width="200px" style="background:blue"/>
		<col width="100px" style="background:green"/>
    </colgroup>
    
    <thead>
    	<tr>
        	<td>번호</td>
        	<td>제목</td>
        	<td>이름</td>
        </tr>
    </thead>
<table>

이렇게 되면 각각 위드값이 다른 컬럼을 만들 수 있게 된다.

최종

colgroup은 html5에 공식적으로 지원되지 않는다고 한다.
스타일과 태그 요소의 분리를 위해 가급적 css를 사용하는게 좋을 것이지만, 많이 사용되는 이유는 편리하기 때문이다.(간단한 코드 적용할 경우만!)