[HTML] 테이블 태그(1) - <table>, <tr>, <td>, <th>, <tbody>, <thead>, <tfoot>

테이블 태그 (table)

- 데이터를 포함하는 셀들의 행과 열로 구성된 2차원 테이블 생성할 때 사용

 

 

 

<table> 태그

- 테이블 생성

<table>

</table>

 

 

 

<tr> 태그

- 테이블에 행 추가

<table>
  <tr>
  <!-- 행 생성 -->
  </tr>
  <tr>
  <!-- 행 생성 -->
  </tr>
</table>

 

 

 

<td> 태그

- 테이블에 데이터 추가

- 테이블 행, 열 내에 위치해야 함

<table>
  <tr>
    <td>Americano</td>
    <td>Herb tea</td>
    <td>Strawberry latte</td>
  </tr>
</table>

 

 

 

<th> 태그

- 테이블의 행과 열에 제목 추가

 

• scope : 제목이 어느 곳에 위치할지 결정하는 속성

<th scope="col">제목</th> : 행의 제목
<th scope="row">제목</th> : 열의 제목

<table>
  <tr>
    <th scope="col">coffee</th>
    <th scope="col">tea</th>
    <th scope="col">latte</th>
  </tr>
  <tr>
    <td>Americano</td>
    <td>Herb tea</td>
    <td>Strawberry latte</td>
  </tr>
</table>

 

 

 

<tbody> 태그

- 테이블 데이터를 섹션화

- 테이블이 커져 많은 데이터를 포함할 때 사용

- <td> 데이터를 한 개 이상 포함해야 함

<table>
  <tbody>
    <td></td>
  </tbody>
</table>

<table>
  <tr>
    <th scope="col">coffee</th>
    <th scope="col">tea</th>
    <th scope="col">latte</th>
  </tr>
  <tbody>
    <tr>
      <td>Americano</td>
      <td>Herb tea</td>
      <td>Strawberry latte</td>
    </tr>
  </tbody>
</table>

 

 

 

<thead> 태그

- 테이블 제목 데이터를 섹션화

- <th>를 한 개 이상 포함해야 함

 

<table>
  <thead>
    <th></th>
  <thead>
</table>

<table>
  <tr>
    <thead>
      <th scope="col">coffee</th>
      <th scope="col">tea</th>
      <th scope="col">latte</th>
    </thead>
  </tr>
  <tbody>
    <tr>
      <td>Americano</td>
      <td>Herb tea</td>
      <td>Strawberry latte</td>
    </tr>
  </tbody>
</table>

 

 

 

<tfoot> 태그

- 테이블 하단에 바닥글 추가

- 합계, 차이 및 기타 데이터 결과를 포함하는 데 자주 사용

 

<tfoot>
  <td> 데이터
</tfoot>

<table>
  <tr>
    <thead>
      <th scope="col">coffee</th>
      <th scope="col">tea</th>
      <th scope="col">latte</th>
    </thead>
  </tr>
  <tbody>
    <tr>
      <td>Americano</td>
      <td>Herb tea</td>
      <td>Strawberry latte</td>
    </tr>
  </tbody>
  <tfoot>
    <td>Total</td>
    <td>10000</td>
  </tfoot>
</table>