HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML: <col> valign 속성

valign 속성은 <col> 요소와 관련된 내용의 수직 정렬 방식을 지정하며, HTML col valign 속성, 브라우저 호환성, 문법 정의 및 속성 값 상세 정보 등을 온라인 예제로 보여줍니다.

온라인 예제

다른 수직 정렬 열을 가진 HTML 테이블:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML <col> valign 속성 사용-기본 튜토리얼(oldtoolbag.com)</title>
<style>table, th, td { border:　1px solid black;}</style>
</head>
<body>
<table　style="height:200px">
　　<col>
　　<col　valign="bottom">
　　<tr>
　　　　<th>월</th>
　　　　<th>Savings</th>
　　</tr>
　　<tr>
　　　　<td>January</td>
　　　　<td>$100</td>
　　</tr>
</table>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IE파이어폭스오페라크롬사파리

인터넷 익스플로러와 오페라에서만 valign 속성이 지원됩니다. 하지만, IE와 Opera는 "baseline" 값을 지원하지 않습니다.

정의와 사용법

HTML5 <col> valign 속성은 더 이상 지원되지 않습니다.

align 속성은 <col> 요소와 관련된 내용의 수직 정렬 방식을 정의합니다.

문법

<col valign="top|middle|bottom|baseline">

속성 값

값	설명
top	내용을 위로 정렬합니다.
middle	내용을 가운데 정렬합니다(기본 값).
bottom	내용을 아래로 정렬합니다.
baseline	기본선에 맞추어 정렬됩니다.

기본선은 가상의 선입니다. 한 줄의 텍스트에서 대부분의 글자는 기본선을 기준으로 합니다. 기본선 값은 행 내의 모든 테이블 데이터가 공통된 기본선을 공유하게 합니다. 이 값의 효과는 종종 bottom 값과 같습니다. 하지만 텍스트의 크기가 다를 때, 기본선의 효과가 더 좋습니다. 아래 그림을 참조하세요:

valign="bottom"

valign="baseline"

　HTML <col> 태그

HTML: <template> 태그