<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09-01_CSS-table</title>
<!--
	# border-collapse
	- 테두리 사이의 간격을 없애고, 한줄로 만듬
	
	# text-align
	- 테이블 셀의 내용을 가로 정렬.
	- left, center, right
	
	# vertical-align
	- 테이블 셀의 내용을 세로 정렬.
	- top, bottom
	
	# 테두리와 내용 사이의 간격은 padding 속성 사용해서 조절.
-->
<style type="text/css">
.single, .single th, .single td {
	border: 1px solid black;
	border-collapse: collapse;
}

.single {
	width: 300px;
	height: 120px;
}

.single {
	text-align: center;
}

/*------------------가로선------------------*/

.h_line {
	width: 300px;
	height: 120px;
	border-collapse: collapse;
}
.h_line th {
	border-top: 3px solid black;
	border-bottom: 3px solid black;
}

.h_line td {
	border-bottom: 1px solid black;
	text-align: center;
}

/*------------------안쪽선------------------*/

.in_line {
	width: 300px;
	height: 120px;
	border-top: 3px solid black;
	border-collapse: collapse;
}

.in_line th, .in_line td {
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	text-align: center;	
}

.in_line th:first-child, .in_line td:first-child {
	border-left: none; 
} 
/*------------------ cell 간격------------------*/
.cell {
	width: 500px;
	height: 120px;
	border: 1px solid black;
	border-collapse: collapse;
	background-color: #CCCCCC;
}
.cell th, .cell td {
	border: 1px solid black;
}
.cell th:first-child {
	width: 100px;
	height: 200px;
}
.cell th:last-child {
	width: 150px;
}

</style>
</head>
<body>
	<h1>한줄선 테이블</h1>
	<table class="single">
		<tr>
			<th>제목1</th><th>제목2</th><th>제목3</th>
		</tr>
		<tr>
			<td>내용 1-1</td><td>내용 2-1</td><td>내용 3-1</td>
		</tr>
		<tr>
			<td>내용 1-2</td><td>내용 2-2</td><td>내용 3-2</td>
		</tr>
	</table>
	<hr>
	<h1>가로선 테이블</h1>
	<table class="h_line">
		<tr>
			<th>제목1</th><th>제목2</th><th>제목3</th>
		</tr>
		<tr>
			<td>내용 1-1</td><td>내용 2-1</td><td>내용 3-1</td>
		</tr>
		<tr>
			<td>내용 1-2</td><td>내용 2-2</td><td>내용 3-2</td>
		</tr>
	</table>
	<hr>
	<h1>안쪽선 테이블</h1>
	<table class="in_line">
		<tr>
			<th>제목1</th><th>제목2</th><th>제목3</th>
		</tr>
		<tr>
			<td>내용 1-1</td><td>내용 2-1</td><td>내용 3-1</td>
		</tr>
		<tr>
			<td>내용 1-2</td><td>내용 2-2</td><td>내용 3-2</td>
		</tr>
	</table>
	<hr>
	<h1>cell 간격</h1>
	<table class="cell">
		<tr>
			<th>제목1</th><th>제목2</th><th>제목3</th>
		</tr>
		<tr>
			<td>내용 1-1</td><td>내용 2-1</td><td>내용 3-1</td>
		</tr>
		<tr>
			<td>내용 1-2</td><td>내용 2-2</td><td>내용 3-2</td>
		</tr>
	</table>
	<hr>
	
</body>
</html>