<!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>