목차
- <col> 예제 - 테이블 열 그룹
- <col> 정의
- <col> 구문
- <col> 속성 (HTML5 제외 속성은 CSS 이용)
<col> 예제 - 테이블 열 그룹
<style>
table {width:600px;}
td {text-align:center;}
table,th,td {border:1px solid black;}
</style>
<table>
<caption>홈페이지 제작 무료 강의 - 홈짱닷컴 (homzzang.com)</caption>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:green">
</colgroup>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>무료</td>
<td>무료</td>
<td>무료</td>
</tr>
</table>
<col> 정의
테이블 내 여러 열의 속성을 한번에 지정할 때 사용.
0.
col : column (열 = 세로줄) 의미.
1.
<colgroup> 태그 내에서 사용해야 하며,
각 열마다 속성 지정 대신 한번에 여러 열을 묶어 사용할 수 있어 편리함.
2.
HTML4.01에서 지원되는 모든 속성이
HTML5에서는 span 태그 제외하고 모두 지원 안 됨.
3.
HTML4.01과 HTML5에서는 닫는 태그 없이 사용하나,
XHTML에서는 반드시 끝부분에 /를 붙여 닫아줘야 함. (예) <col />
<col> 구문
<table>
<colgroup>
<col span="한번에 속성 지정할 열 개수" style="background-color:red">
<col style="background-color:green">
</colgroup>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>무료</td>
<td>무료</td>
<td>무료</td>
</tr>
</table>
<col> 속성 (HTML5 제외 속성은 CSS 이용)
속성 |
속성값
|
쓰임새 |
비고 |
span |
숫자
|
한번에 속성 지정할 열 개수
별도 지정 안 할 경우 기본값은 1임.
|
|
width |
px 단위
% 단위
|
특정 문자에 대해 정렬 |
HTML5 X |
align
|
left (왼쪽 정렬)
right (오른쪽 정렬) center (중앙 정렬) justify (동일 길이 펼침 정렬) char (특정 문자 기준 정렬)
|
수평 정렬 |
HTML5 X |
valign |
top (상단 정렬)
middle (중단 정렬) bottom (하단 정렬) baseline (밑단 정렬) - 글씨 크기 다를 경우 효과적
|
수직 정렬 |
HTML5 X |
char |
특정 문자
|
특정 문자에 대해 정렬 |
HTML5 X |
charoff |
숫자 |
char 속성에 의해 내용 정렬 시
정렬될 특정 문자 개수 지정.
|
HTML5 X |
<col> 태그는 전역속성・이벤트속성 지원.