[HTML]<col> 태그와 css 적용

<col>을 table의 열을 관리하기 위한 태그이다. 

기본적으로 <table>은 <tr>안에 <td> 또는 <th>를 이용해서 작성하므로 행 단위로 관리된다.

따라서 세로 열들을 묶을 방법이 부족하다. 이때 <col>을 사용한다면 세로로 테이블을 묶어서 편리하게 관리할 수 있다.

 

예를 들어 아래와 같이 구성된 테이블을 생각해보자.

 

만약 첫번째 열들에는 silver를 배경으로 화면의 15%, 두번째와 세번재 열에는 lime을 배경으로 각각 화면의 30%, 마지막 열은 화면의 25%를 차지하게 하려고 할 때 각 행의 각 cell에 접근해서 처리하려면 매우 코드가 길어진다.

 

이때 col을 아래와 같이 적용해볼 수 있다.

<table border="1">
	<colgroup>
		<col />		<col span="2" />	<col />
	</colgroup>
	<tr>
		<th>first</th><th>second</th><th>third</th><th>fourth</th>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td>
	</tr>
</table>

 

<col>은 <tr>태그 작성 전에 작성하며 일반적으로 <colgroup>으로 묶어줄 수 있다.

이제 <col>을 중심으로 css를 적용해보자.

 

<style>
	table {
		border-collapse: collapse;
		width: 100%;
	}
	col:nth-child(1) {
		background: silver;
		width: 15%;
	}
	col:nth-child(2) {
		background: lime;
		width: 30%;
	}
	col:nth-child(3) {
		background:aqua;
		border: 2px dotted red;
		width: 25%;
	}
</style>

이처럼 <col>을 사용하면 개별 <td>, <th>를 건드려야 할 때보다 훨씬 간단히 작업할 수 있다.

 

하지만 아쉽게도 css는 여기까지다.

<col>에 적용할 수 있는 css는 border, background, width로 한정되므로 개별 폰트 설정, 컬러 등은 적용할 수 없다.