Table 태그

HTML 테이블 태그는 데이터를 행과 열로 구성하여 표시할 때 사용한다. 주요 태그와 속성을 정리하면 다음과 같다.

주요 테이블 태그

<table>

테이블을 정의하는 최상위 태그이다.

<table>
  <!-- 테이블의 다른 요소들이 들어간다 -->
</table>

<thead>

테이블의 헤더 부분을 정의한다. 주로 <th> 태그를 자식 요소로 가진다.

<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</thead>

<tbody>

테이블의 본문 부분을 정의한다. 주로 여러 개의 <tr> 태그를 자식 요소로 가진다.

<tbody>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</tbody>

<tfoot>

테이블의 바닥 부분을 정의한다. 주로 요약 정보나 총계를 표시할 때 사용한다.

<tfoot>
  <tr>
    <td>Total 1</td>
    <td>Total 2</td>
  </tr>
</tfoot>

<tr>

테이블의 행(row)을 정의한다.

<tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
</tr>

<th>

테이블의 헤더 셀을 정의한다. 기본적으로 텍스트를 굵게 하고 중앙 정렬한다.

<td>Data</td>

유용한 속성들

colspan

셀의 가로로 합쳐질 열의 수를 지정한다.

<td colspan="2">Merged Cell</td>

rowspan

셀의 세로로 합쳐질 행의 수를 지정한다.

<td rowspan="2">Merged Cell</td>

scope

헤더 셀의 범위를 지정한다. 주로 <th> 요소에서 사용하며, 값으로는 col, row, colgroup, rowgroup 등이 있다.

<th scope="col">Column Header</th>

headers

셀과 연관된 헤더 셀의 ID를 지정한다.

<th id="header1">Header</th>
<td headers="header1">Data</td>

예제

아래는 위의 태그와 속성들을 종합한 예제이다.

<table>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Title</th>
      <th scope="col">Author</th>
      <th scope="col">Date</th>
      <th scope="col">Likes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Example Title</td>
      <td>Author Name</td>
      <td>2024-08-08</td>
      <td>10</td>
    </tr>
    <tr>
      <td colspan="5">
        <Skeleton height={32} className="w-full" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5">Footer Information</td>
    </tr>
  </tfoot>
</table>

참고하면 좋은 블로그

HTML 표 만들기 - table 관련 태그