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로 적용이 될 것이다.
'HTML' 카테고리의 다른 글
| 웹 페이지에서 프로그레스 써클 띄우기 (0) | 2020.12.01 |
|---|---|
| dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기 (0) | 2020.10.29 |
| 크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기) (0) | 2018.08.22 |
| textarea 내용을 초기화 하는 법 (0) | 2018.06.11 |
| HTML 링크를 새 창에서 열기 (0) | 2015.10.26 |