테이블 태그, <col>,<colgroup>태그

<col>

테이블 하나 이상의 열 TD에 대해 속성 값을 정의한다.

각 셀에 스타일을 반복하는 대신에 열에 대하여 스타일을 적용하는데 유용하다.

<table>/ <colgroup> 요소 안에서만 사용가능.

html은 <col>의 종료태그가 없다

모든 주요한 브라우저에서 지원

 

<col> 태그 사용목적.

일반적으로 TD의 속성을 다루게 될때 각각의 TD에 대해서 값들을 입력하게 된다. 

하지만 이 태그는 Cloumn별로 속성을 제어할 수 있도록 제공 

이 태그를 사용하게 되면 TD에서 반복되어 사용되는 내용을 상단에 옮김으로서 소스 

자체의 크기를 줄일 수 있고 , 또한 한 곳에서 통제가 가능

 

--------------------------------------------------------------- 

 

<colgroup>

<col>태그를 그룹으로 관리. 행이 아닌 열단위로 스타일 제어가능.

 -> 열의 구조적인 그룹화를 위해서 사용하며, <col>을 포함하는 부모요소.

기본값이 '1'이기 때문에 최소 두개 이상의 열을 그룹화할 때에는 <span>속성일 지정하면 됨.

html은 <colgroup>의 종료태그가 없다

 

 

예제 :

<table border="1"> <caption>Caption</caption> <colgroup> <col span="2" style="background:red" /> <col style="background:blue" /> </colgroup> <thead style="background:green"> <tr> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> <tfoot style="background:yellow"> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tfoot> </table>

 결과 :