[HTML] Table

🌼 테이블 관련 요소

• <table>: table과 관련된 데이터를 입력할 때 사용한다.

• <tr>: tr은 table raw를 의미하며 table에 행 요소를 입력할 때 사용한다.

• <td>: td는 table data를 의미하며 table에 값을 입력할 때 사용한다.

• <th>: th는table heading를 의미하며 table에 행/열의 이름을 정의할 때 사용한다. th는 반드시 tr 태크 안에 위치해야 한다.

  • <scope>: th에 입력된 text가 행('col') 속성인지 열('row') 속성인지를 정의할 때 사용하는 attribute이다.

<table>
  <tr>
    <th></th>
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>
  <tr>
    <th scope="row">Temperature</th>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

• <colspan>: colspan은 column span을 의미하며 한 개의 셀이 두 개 이상의 열(column) 정보를 가질 때, 셀 병합 기능처럼 사용한다.

• <rowspan>: rowspan은 row span을 의미하며 한 개의 셀 두 개 이상의 행(row) 정보를 가질 때, 셀 병합 기능처럼 사용한다.

• <thead>: th, tbody로 정의되지 않은 열(column) 이름 정보를 정의할 때 사용한다.

• <tbody>: tbody는 table body를 의미하며 thead 정보를 제외한 모든 테이블 데이터를
  포함하며 테이블의 구역을 나눌 때 사용한다.

• <tfoot>: tfoot은 table footer를 의미하며 테이블의 맨 끝에 전체 행 데이터에 대한 통계적 데이터(총합:sums, 차이:differences)를 꼬릿말 형태로 표현할 때 사용한다.

  • <thead>, <tbody>, <tfoot>를 사용하지 않아도 구조는 차이가 없으나 영역별로 태그를 사용할 경우, 각각의 요소의 스타일링이 조금씩 다르다는 차이가 있다. 각 각의 태그에는 스타일링할 수 있는 attribute가 많이 있지만 현재는 html과 css의 기능적인 구분이 명확해지면서 앞으로는 사용되지 않고 사라질 것(deprecated)이라고 본다.

<table>
  <thead>
    <tr>
      <th>Company Name</th>
      <th>Number of Items to Ship</th>
      <th>Next Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adam's Greenworks</td>
      <td>14</td>
      <td>Package Items</td>
    </tr>
    <tr>
      <td>Davie's Burgers</td>
      <td>2</td>
      <td>Send Invoice</td>
    </tr>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>16</td>
    </tr>
  </tfoot>
  </tbody>
</table>