table tag

table 태그를 사용하여 데이터를 행과 열로 정렬할수 있다.

table태그의 자식요소

table	테이블을 정의
tr	테이블 안의 행을 정의, row
th	테이블 안에서 제목셀을 정의, header cell
td	테이블 안의 열을 정의, cell
caption	테이블 캡션(설명)을 정의 테이블 위 가운데 정렬됨
colgroup	테이블 내에서 한개 이상의 열을 그룹화 함 각 셀의 전체 스타일을 컬럼에 스타일을 적용하는 대신 반복 유용함 모든 <THEAD> <TBODY> <TFOOT> 및 <TR> 요소 앞에 배치
col	열의 속성을 각각 정의 colgroup의 자식요소로 배치
thead	테이블 안에서 헤더 영역을 그룹화 함
tbody	테이블 안에서 컨텐츠 영역을 그룹화 함
tfoot	테이블 안에서 푸터영역을 그룹화 함

---

※ 기본 테이블은 table의 자식요소로 tr을 작성하고, tr의 자식요소로 th나 td를 작성한다.

<table border="1" width="600px">
	<tr>
		<td>1번째 row의 1번째 col</td>
		<td>1번째 row의 2번째 col</td>
		<td>1번째 row의 3번째 col</td>
	</tr>
	<tr>
		<td>2번째 row의 1번째 col</td>
		<td>2번째 row의 2번째 col</td>
		<td>2번째 row의 3번째 col</td>
	</tr>
  </table>

 

---

※ 테이블안에 사용하는 선택적 태그로, caption, colgroup>col이 있고, 

   영역을 만들어 주는 태그로 thead, tbody, tfoot가 있다. 

<!--3*3-->
  <table border="1" width="600">
  	<caption>표의 제목입니다. </caption>
	<colgroup>
		<col width="100">
		<col width="250">
		<col width="250">
	</colgroup>
	<thead>
		<tr>
			<th>1</th>
			<td>2</td>
			<td>3</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>4</th>
			<td>5</td>
			<td>6</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>7</th>
			<td>8</td>
			<td>9</td>
		</tr>
	</tfoot>
  </table>

 

---

td의 병합 속성
rowspan	row끼리 합친다. 합친 수만큼 td를 지운다.
colspan	col끼리 합친다. 합친 수만큼 td를 지운다.

※ 각 셀을 합치기 위해서 td안에 colspan과 rowspan을 쓰는데, 

  속성 값으로는 몇개의 셀을 합쳤는지 숫자를 적는다. 합쳐진 나머지 셀은 지운다.

예를 들어, td 2번과 td3번을 합친다면, 뒤에 있는 td 3번을 지우고, td 2번에 colspan="2"를 작성한다 .

<!--4*5-->
  <table border="1" width="600">
  <caption>td 합치기</caption>
  	<tr>
  		<td>1</td>
  		<td colspan="2">2</td>
  		<td colspan="2">4</td>
  	</tr>
  	<tr>
  		<td rowspan="3">6</td>
  		<td>7</td>
  		<td>8</td>
  		<td>9</td>
  		<td>10</td>
  	</tr>
  	<tr>
  		<td>12</td>
  		<td>13</td>
  		<td>14</td>
  		<td>15</td>
  	</tr>
  	<tr>
  		<td>17</td>
  		<td>18</td>
  		<td>19</td>
  		<td>20</td>
  	</tr>
  </table>

 

---

<table border="1" width="600">
  	<caption>td병합+이미지넣기 연습</caption>
	<colgroup>
		<col width="140">
		<col width="230">
		<col width="230">
	</colgroup>
  	<tr>
  		<th>1</th>
  		<th>2</th>
  		<th>3</th>
  	</tr>
  	<tr>
  		<td rowspan="2">4</td>
  		<td colspan="2" align="center">
			<img src="폴더명/이미지명.jpg" alt="이미지설명" style="width:200px;">
		</td>
  	</tr>
  	<tr>
  		<td>8</td>
  		<td>9</td>
  	</tr>
  </table>