DEV/html

sample2

purple 2020. 1. 8. 19:04

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
td{
	text-align: center;
}
</style>

</head>
<body>

<!-- table : row, column -->

<div align="center">

<table border="1">
	<col width="60"><col width="100"><col width="200"><col width="50">
	<!-- <col width="20%"><col width="30%"><col width="40%"><col width="10%"> -->
	<tr>
		<th>번호</th>
		<th>성</th>
		<th>이름</th>
		<th>나이</th>
	</tr>
	<tr>
		<th>1</th>
		<td>홍</td>
		<td>길동</td>
		<td align="center">24</td>
	</tr>
	<tr>
		<th>2</th>
		<td>일</td>
		<td>지매</td>
		<td>21</td>
	</tr>
	<tr>
		<th>3</th>
		<td>성</td>
		<td>춘향</td>
		<td>17</td>
	</tr>	
</table>
</div>

<br><br>

<table border="2" style="width: 80%">
	<caption>주소록</caption>
<colgroup>
	<col width="60"><col width="100"><col width="200"><col width="50">
</colgroup>	

<thead>
	<tr>
		<th>번호</th>
		<th>성</th>
		<th>이름</th>
		<th>주소</th>
	</tr>
</thead>

<tbody>
	<tr>
		<th>1</th>
		<td>홍</td>
		<td>길동</td>
		<td>서울시</td>
	</tr>
	<tr>
		<th>2</th>
		<td>일</td>
		<td>지매</td>
		<td>부산시</td>
	</tr>
	<tr>
		<th>3</th>
		<td>성</td>
		<td>춘향</td>
		<td>남원시</td>
	</tr>
</tbody>
</table>

<br><br>

<table border="1" style="width: 70%">
	<caption>주소록</caption>
	<tr>
		<th>성</th>
		<th>이름</th>
		<th>나이</th>
		<th colspan="2">전화번호</th>
		<!-- <th>전화번호</th> -->
	</tr>
	<tr>
		<td>홍</td>
		<td>길동</td>
		<td>24</td>
		<td>123-4567</td>
		<td>234-5678</td>
	</tr>
</table>

<br><br>

<table border="1" style="width: 70%">
	<tr>
		<th>이름</th>
		<td>길동</td>
	</tr>
	<tr>
		<th rowspan="2">전화번호</th>
		<td>123-4567</td>
	</tr>
	<tr>
		<!-- <th>전화번호</th> -->
		<td>234-5678</td>
	</tr>
</table>




</body>
</html>

index1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
table, th, td {
	border: 1px solid #0000ff;
	border-collapse: collapse;	/* 단선으로 */
}
th{
	background-color: #aabbcc;
	text-align: left;
}
td{
	text-align: center;
}


</style>


</head>
<body>

<div align="center">

<table>
	<caption>Address</caption>
	<col width="60"><col width="100"><col width="200"><col width="50">
	<tr>
		<th>번호</th>
		<th>성</th>
		<th>이름</th>
		<th>나이</th>
	</tr>
	<tr>
		<th>1</th>
		<td>홍</td>
		<td>길동</td>
		<td>24</td>
	</tr>
	<tr>
		<th>2</th>
		<td>일</td>
		<td>지매</td>
		<td>21</td>
	</tr>
	<tr>
		<th>3</th>
		<td>성</td>
		<td>춘향</td>
		<td>17</td>
	</tr>	
</table>
</div>


</body>
</html>

index2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<table border="1" style="width: 100%; height: 100%">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
</table>


</body>
</html>