<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 만들기</title>
<style type="text/css">
table, th, td {/* border 테이블 테두리 선 속성 */
border: 1px solid black;/* 1픽셀의 선으로 채워주는 검은색 테두리선 */
border-collapse: collapse;/* 보더간의 간견 없에줌 */
}
td {
text-align: right; /* 오른쪽 정렬 */
}
table {
background-color: #beefff;
caption-side: bottom;
}
th {
background-color: #6495ed;
}
</style>
</head>
<body>
<!-- html 문서상에 표를 작성하는 태그
<table> : 표 전체 영역을 표현하는 태그
<tr> : 표의 한 행을 작성하는 태그
<th> : 한 행에서 한 컬럼을 작성하는 태그. 컬럼 명 표현
<td> : 한 행에서 한 컬럼을 작성하는 태그
-->
<table width="600">
<tr>
<th width="100">성</th>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>김</td>
<td>철수</td>
<td>25</td>
</tr>
<tr>
<td>홍</td>
<td>마리아</td>
<td>50</td>
</tr>
<tr>
<td>김</td>
<td style="background-color: #3c5a91;">수한무 거북이와 두루미 삼천갑자 동방삭</td>
<td>500</td>
</tr>
</table>
<hr>
<h2>셀 병합</h2>
<h3>가로 셀 병합</h3>
<table>
<tr>
<th>1열</th>
<th colspan="2">2열</th><!-- colspan : 셀 병합 -->
<th colspan="2">3열</th>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
<td>2행3열</td>
<td>2행4열</td>
<td>2행5열</td>
</tr>
</table>
<h3>세로 셀 병합</h3>
<table>
<tr>
<th>1행</th>
<td>1행2열</td>
<td>1행3열</td>
</tr>
<tr>
<th rowspan="3">2행</th>
<td>2행2열</td>
<td>2행3열</td>
</tr>
<tr>
<td>3행2열</td>
<td rowspan="2">3행3열</td>
</tr>
<tr>
<td>4행2열</td>
</tr>
</table>
<hr>
<!-- 테이블 제목 -->
<p/>
<p/>
<table width="300">
<caption>테이블 제목</caption>
<tr>
<th>1행1열</th>
<th>1행2열</th>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table>
</body>
</html>
