<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표관련태그</title>
</head>
<body>
<!--
표 : 웹 문서에서 자료를 정리할 때 자주 사용.
정렬된 모습으로 한눈에 보이게 할 때 행과 열로 이루어져 있다.
표를 만드는 태그 : <table>, <tr>, <th>, <td>
<table></table> : 기본적으로 표를 생성해주는 태그
<tr></tr> : 표의 한 행을 나태내는 태그
<th></th> : 표의 제목 셀을 나타내는 태그 => 글자 굵게, 가운데 정렬
<td></td> : 표의 일반 셀을 나타내는 태그
기본 사용법
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table> 2행 2열짜리 표 만들기 완성
-->
<h1>기본적인 표 만들기</h1>
<table border="1"> <!-- border 속성 : 표의 테두리 두께 -->
<caption> [표 1] 웹브라우저의 종류 </caption> <!-- 제목이나 내용을 추가하는 태그 -->
<tr>
<th width="100" height="30">브라우저명</th>
<th width="70">제조사</th>
<th width="200">홈페이지</th>
</tr>
<tr>
<td>Edge</td>
<td>MS</td>
<td>http://www.microsoft.com</td>
</tr>
<tr>
<td>Chrome</td>
<td>Google</td>
<td>http://google.com</td>
</tr>
<tr>
<td>Safari</td>
<td>apple</td>
<td>http://apple.com</td>
</tr>
</table>
<hr>
<h1>표의 행과 열을 합치는 속성</h1>
<!--
셀(th, td) 태그의 속성을 이용하여 행 또는 열을 합칠 수 있다.
colspan="2" : 2개의 열 합치기
rawspan="2" : 2개의 행 합치기
-->
<h3><b>이  력  서</b></h3>
<table border="1">
<caption> 이   력   서</caption>
<tr>
<td colspan="2" rowspan=2" width="130" height="130"><img src="resources/img/Miał.jpg" width="130" height="130"></td>
<td width="80">이름</td>
<td width="200"></td>
</tr>
<tr>
<td>연락처</td>
<td></td>
</tr>
<tr>
<td width="70" height="50">주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td height="150">자기소개</td>
<td colspan="3"></td>
</tr>
</table>
<hr>
<h1>테이블 내에 구조 나누기</h1>
<!--
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
행과 열을 넣을 수도 있음(집계)
이 표의 참고문헌
</tfoot>
</table>
-->
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>21</td>
<td><button>서울</button></td>
</tr>
<tr>
<td>이말동</td>
<td>25</td>
<td><button>경기도</button></td>
</tr>
<tr>
<td>김개똥</td>
<td>21</td>
<td><button>부산</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총인원</td>
<td>3명</td>
</tr>
</tfoot>
</table>
<hr>
<!--연습문제-->
<table border="1">
<caption>내 블로그 식단표</caption>
<thead>
<tr>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
<th>일</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">쌀밥</td>
<td colspan="3">잡곡밥</td>
<td>스파게티</td>
<td>짜장밥</td>
</tr>
<tr>
<td>불고기</td>
<td>떡갈비</td>
<td>미니돈까스</td>
<td>오징어볶음</td>
<td>제육볶음</td>
<td rowspan="2">피클</td>
<td>단무지</td>
</tr>
<tr>
<td>배추김치</td>
<td>깍두기</td>
<td>미소된장국</td>
<td>동치미</td>
<td>고추절임</td>
<td>짬뽕국물</td>
</tr>
</tbody>
</table>
</body>
</html>