©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Lists</title>
	<style>
		table, th, td { border: 1px solid black; }
		table {
			border-collapse: collapse;
			width: 100%;
		}
		th {
			vertical-align: top;
			height: 50px;
		}
		td {
			vertical-align: bottom;
			height: 50px;
		}
	</style>
</head>

<body>

	<h1>vertical-align 속성을 이용한 테이블의 수직 정렬</h1>

	<table>
		<tr>
			<th>참치</th>
			<th>고래</th>		
			<th>날치</th>
		</tr>
		<tr>
			<td>상어</td>
			<td>문어</td>		
			<td>꽁치</td>
		</tr>
		<tr>
			<td>오징어</td>
			<td>고등어</td>		
			<td>돌고래</td>
		</tr>
	</table>
	<p>th 태그와 td 태그 모두 가운데 정렬이 기본 설정입니다.</p>

</body>

</html>