[HTML] 테이블 태그, <table>, <tr>, <td>

테이블, TABLE 태그

- 표 만들기

- 레이아웃 만들기

1. <table>

- 큰상자

- 전체 컨테이너

2. <tr> , table row

- 중간상자

- 행역할

3. <td> table date

- 작은 상자

- 셀역할

- 데이터를 담는 역할

ex)

<h1>2행 2열 테이블</h1>

<table border="1" width="200" height=200 bgcolor="yellow"> border는 테이블 경계선 두께

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td background="images/catty01.png">3</td>

<td>4</td>

</tr>

</table>

테이블의 원래 형태

<table border="1" width="500">

<caption>표 1.1</caption>

<thead>

<tr>

<th>이름</th>

<th>키</th>

<th>몸무게</th>

</tr>

<thead>

<tbody>

<tr>

<td>홍길동</td>

<td>200</td>

<td>60</td>

</tr>

<tr>

<td>박첨지</td>

<td>200</td>

<td>60</td>

</tr>

<tr>

<td>해커박</td>

<td>200</td>

<td>60</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>**2018년 기준</td>

<td>평균키</td>

<td>평균몸무게</td>

</tr>

</tfoot>

</table>

테이블 셀병합

<h1>테이블 셀 병합</h1>

<table border="1" width="200" height="200">

<tr>

<td width="100" height="100" colspan="2">1</td>

</tr>

<tr>

  <td width="100" height="100">3</td>

<td width="100" height="100">4</td>

</tr>

</table> colspan : 가로병합

<table border="1" width="200" height="200">

<tr>

<td width="100" height="100" rowspan="2">1</td>

<td width="100" height="100">2</td>

</tr>

<tr>

          <td width="100" height="100">4</td>

</tr>

</table> rowspan : 세로병합