HTML의 <col> 태그에 대해서
<col> 태그는 테이블에서 column(열)의 속성을 지정하는 역할을 하는 태그이다.
<col> 태그는 테이블의 column 전체에 특정한 속성(예를들어 특정 색상으로 표시되게)을 적용하는데 유용하다.
다음과 같은 코드가 있다고 할때
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color:red">
<col style="background-color:yellow">
<col style="background-color:#ababab">
</colgroup>
<tr>
<th>이름</th>
<th>나이</th>
<th>전화번호</th>
</tr>
<tr>
<td>홍길동</td>
<td>25</td>
<td>010-1234-4567</td>
</tr>
<tr>
<td>고길동</td>
<td>45</td>
<td>010-7777-8888</td>
</tr>
</table>
</body>
</html>
이 경우 테이블은 2행 3열의 테이블을 이룰것인데 colgroup 안에서 첫 번째 column 전체를 red로, 두 번째 column 전체를 yellow로 그리고 세 번째 column 전체의 색상을 짙은 회색(#ababab의 색상이 짙은 회색임)으로 column의 속성을 지정하는 경우가 되겠다.
만일 col 태그의 내용을 다음과 같이하면
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:#ababab">
</colgroup>
이 경우는 다음과 같이 첫 번째, 두 번째 column 전체가 red로 설정이 된다. 왜냐하면 span 속성에 의해 첫번째와 두번째 column을 합쳐서 적용하도록 했기 때문이다.
만일 col 태그의 내용을 다음과 같이하면
<colgroup>
<col style="background-color:red">
<col span="2" style="background-color:yellow">
</colgroup>
이 경우는 다음과 같이 첫 번째 column은 red, 두 번째, 세 번째 column은 yellow로 적용이 될 것이다.
댓글 없음:
댓글 쓰기