[HTML] HTML 테이블

1. 테이블 태그의 필요성
2. 테이블 관련 태그의 종류와 기능 이해
3. 테이블 관련 태그와 속성 사용해서 원하는 테이블 생성 가능

테이블 기본형식

표 제목

제목1	제목2
내용	내용

<table border="1">
 <caption>표 제목</caption>
 <tr>
  <th>제목1</th>
  <th>제목2</th>
  ...
 </tr>
 <tr>
  <td>내용</td>
  <td>내용</td>
  ...
 </tr>
 ...
</table>
	

태그	태그 설명	태그 관련 속성
<table>	테이블 정의 태그	border="테두리 두께"
<tr>	테이블의 행(table row), <td>나 <th> 태그의 부모태그로 혼자서만 사용 할 수 없다.
<td>	테이블의 표준 셀(table data), <tr>태그의 자식태그로 왼쪽 정렬이 기본 값이다.
<th>	테이블의 헤더 셀(table header), <tr>태그의 자식태그로 내용은 굵게 가운데 정렬이 기본 값이다.
<caption>	테이블의 제목으로 테이블 상단에 위치한다. <table> 시작태그의 바로 다음에 사용하고, 테이블 바로 위에 진하게 가운데 정렬로 표시된다.	CSS의 속성 사용 캡션 정렬 방식 : text-align 캡션의 위치 조정 : caption-side

테이블 행과 열의 병합

• <td rowspan="n" colspan="n">...</td>
• <th rowspan="n" colspan="n">...</th>

열병합 colspan

1-1
2-1		2-3	2-4
3-1	3-2	3-3

<table border="1">
 <caption>열병합 colspan</caption>
 <tr>
  <td colspan="4">1-1</td>
 </tr>
 <tr>
  <td colspan="2">2-1</td>
  <td>2-3</td>
  <td>2-4</td>
 </tr>
 <tr>
  <td>3-1</td>
  <td>3-2</td>
  <td colspan="2">3-3</td>
 </tr>
</table>
	

행병합 rowspan

1-1	1-2	1-3	1-4
	2-2	2-3
	3-2		3-4

<table border="1">
 <caption>행병합 colspan</caption>
 <tr>
  <td rowspan="3">1-1</td>
  <td>1-2</td>
  <td>1-3</td>
  <td rowspan="2">1-4</td>
 </tr>
 <tr>
  <td>2-2</td>
  <td rowspan="2">2-3</td>
 </tr>
 <tr>
  <td>3-2</td>
  <td>3-4</td>
 </tr>
</table>
	

행병합&열병합

1-1
2-1	2-2	2-3	2-4
		3-3

<table border="1">
 <caption>행&열병합 colspan</caption>
 <tr>
  <td colspan="4">1-1</td>
 </tr>
 <tr>
  <td rowspan="2">2-1</td>
  <td rowspan="2">2-2</td>
  <td>2-3</td>
  <td>2-4</td>
 </tr>
 <tr>
  <td colspan="2">3-3</td>
 </tr>
</table>
	

테이블을 이용한 요소의 배치

테이블의 각 셀에 다양한 HTML 요소를 포함 시켜 요소들을 가지런히 나열 할 수 있다.

요소들의 배치

좋아하는 과일 바나나 자몽 사과	좋아하는 사진:
전화번호: 010-1234-5678	수강과목 HTML XML 알고리즘 자료구조

<table border="1">
 <caption>요소들의 배치</caption>
 <tr>
  <td>좋아하는 과일
   <ul>
    <li>바나나</li>
	<li>자몽</li>
	<li>사과</li>
   </ul>
  </td>
  <td>좋아하는 사진:<br><img src="resource/Penguins.jpg" width="150"></td>
 </tr>
 <tr>
  <td>전화번호:<br>010-1234-5678</td>
  <td>수강과목<br>
   <table border="1">
    <tr>
	 <td>HTML</td>
	 <td>XML</td>
	</tr>
	<tr>
	 <td>알고리즘</td>
	 <td>자료구조</td>
	</tr>
   </table>
  </td>
 </tr>
</table>
	

테이블 콘텐츠의 그룹핑

행 단위의 콘테츠를 머리말, 본문, 꼬리말로 그룹화 시킬 수 있다.

머리말	본문	꼬리말
<thead>	<tbody>	<tfoot>
헤더	몸체	푸터
그룹화 하면 스크롤 할 때 그룹핑 된 부분으로 할 수 있다.
여러 장으로 구성된 긴 테이블을 프린터로 출력시 출력 페이지마다 헤더와 푸터 출력 설정 가능하다.

열 단위의 스타일 지정

<colgroup>태그를 사용하면 하나 이상의 열들을 한꺼번에 스타일 지정 할 수 있다.
<table>과 <caption>태그 다음에 위치하며 <thead>태그보다는 먼저 사용해야 한다.
<col>태그는 자식태그로 서로 다른 포맷팅을 정의하기 위해 사용하며, 종료태그 없이 사용한다.
<col>태그는 span속성을 사용해서 해당 <col>태그의 스타일이 적용되는 열의 개수를 지정한다.

열 단위 & 그룹핑 스타일 지정

과목	중간평가	기말평가
HTML	90	80
JAVA	80	60
데베시	80	70
평균	85	70

<table border="1">
 <caption>열 단위 & 그룹핑 스타일 지정</caption>
 <colgroup>
  <col style="background-color:lightblue;">
  <col span="2" style="background-color:yellow;">
 </colgroup>
 <thead style="font-size:15pt;"><tr><th>과목</th><th>중간평가</th><th>기말평가</th></tr></thead>
 <tbody style="font-style:italic;"><tr><td>HTML</td><td>90</td><td>80</td></tr>
  <tr><td>JAVA</td><td>80</td><td>60</td></tr>
  <tr><td>데베시</td><td>80</td><td>70</td></tr></tbody>
 <tfoot style="font-weight:bold;"><tr><td>평균</td><td>85</td><td>70</td></tr></tfoot>
</table>