Table

여러 종류의 데이터를 보기좋게 정리하는 표
<table> 태그를 사용해 테이블을 정의할 수 있다.

태그	설명
<table>	테이블임을 정의함
<tr>	Table Row 열을 구분
<th>	Table Head 열 제목(자동 볼드, 가운데 정렬)
<td>	Table Data 열을 각 셀로 구분해줌

---

태그	설명	위치
<thead>	테이블 내 머리글 영역표시 태그 하나 이상의 <tr> 태그를 포함	table 요소의 자식 caption colgroup 뒤 tbody, tfoot, tr 요소 앞
<tbody>	테이블 내 본문 영역표시 태그 하나 이상의 <tr> 태그를 포함	table 요소의 자식 caption, colgroup, thead 뒤
<tfoot>	테이블 내 바닥글 영역표시 태그 하나 이상의 <tr> 태그를 포함	table 요소의 자식 caption, colgroup, thead, tbody 뒤

사용 이유
- css 스타일 영역을 일괄 적용이 가능.
- 테이블 구조 파악에 용이함

<t_> / <t____>

<t_>	<t____>
셀의 영역을 정의	테이블 그룹의 영역을 정의
브라우저 내 표시O	브라우저 내 표시X
열 머리글	테이블 헤더
테이블 레이아웃에 영향	전체 너비의 수평 헤더를 지정

셀 합치기

열 합치기 - <colspan>

행 합치기 - <rowspan>

사이즈 조절

셀 너비 조절

<t_ style="width: "> 에서 width값 조절
<th>, <td> 모두 사용 가능

셀 높이 조절

<t_ style="height: "> 에서 height값 조절
<th>, <td> 모두 사용 가능

설명 붙이기 - <caption>

테이블 상단에 테이블 제목 혹은 부제 형식의 설명을 붙일 수 있다. 자동으로 가운데 정렬이 적용됨

예시