개념

• 행과 열 구조로 데이터를 표현하는 테이블을 만드는 요소이다.

특징

• table > tr > td/th 순서의 계층 구조
• thead, tbody, tfoot으로 머리글, 본문, 바닥글 구분
• colspan, rowspan 속성으로 셀 확장 가능

관련 태그

thead

• 테이블의 제목이나 설명 정보를 포함하는 행들을 그룹화하여 테이블의 헤더 영역을 명확하게 정의하는 태그
• caption, colgroup 다음에 위치해야 한다.
• 테이블당 하나만 사용 가능하다.
• td보다 th 사용을 권장한다.
• 인쇄 시 각 페이지마다 헤더 반복 출력 된다.

tbody

• HTML 테이블에서 본문 데이터 영역을 나타내는 시맨틱 태그
• thead나 tfoot 없이 단독 사용 시 생략 가능하지만, 명시적 사용을 권장한다.
• caption, colgroup, thead 다음에 위치해야 한다.
• tbody를 명시하지 않으면, 브라우저가 자동으로 생성하여 CSS 선택자가 예상과 다르게 작동할 수 있다.
• 대용량 데이터 테이블에서 헤더는 고정하고 본문만 스크롤되도록 구현할 때 유용하다.

tfoot

• HTML 테이블에서 바닥글(푸터) 영역을 나타내는 시맨틱 태그
• 테이블의 요약 정보나 계산 결과를 표시하는 데 사용된다. (예: 총합, 평균, 합계 등)

tr

• 테이블 데이터를 행 단위로 그룹화할 때 사용한다.

th

• 테이블의 제목이나 헤더 역할을 하는 셀을 만드는 HTML 요소
• 주로 thead 내부나 각 행의 첫 번째 셀에 사용한다.
• colspan, rowspan 속성으로 여러 셀에 걸쳐 표시 가능
• scope 속성을 사용하여 헤더-데이터 관계를 명확히 해야 한다.

td

• 일반적인 내용 셀을 만드는 HTML 요소이다.
• colspan, rowspan 속성으로 여러 셀에 걸쳐 표시 가능
• 텍스트, 이미지, 다른 HTML 요소 포함 가능

caption

• 테이블의 제목이나 설명을 제공하는 태그
• 테이블의 첫 번째 자식 요소로만 사용 가능
• 스크린 리더가 먼저 읽어주는 요소

scope 속성

• th가 어떤 범위의 셀들과 관련있는지 명시하는 속성이다.
• 시각적 효과는 없지만 스크린 리더에서 중요한 역할을 한다.
• 속성 값: col, row, colgroup(colspan과 함께 사용되어 여러 열을 하나로 묶을 때), rowgroup(rowspan과 함께 사용되어 여러 행을 하나로 묶을 때)

주의사항

• 레이아웃 목적으로 사용 금지
• caption, scope 등 접근성 속성 필수

예시

<!-- 기본 테이블 구조 -->
<table>
  <!-- 테이블 제목 -->
  <caption>2024년 매출 현황</caption>
  
  <!-- 헤더 그룹 -->
  <thead>
    <tr>
      <th scope="col">월</th>         <!-- 열 제목임을 명시 -->
      <th scope="col">매출액</th>
      <th scope="col">전년대비</th>
    </tr>
  </thead>
  
  <!-- 본문 그룹 -->
  <tbody>
    <tr>
      <th scope="row">1월</th>        <!-- 행 제목임을 명시 -->
      <td>1,500만원</td>
      <td>+15%</td>
    </tr>
    <tr>
      <th scope="row">2월</th>
      <td>1,800만원</td>
      <td>+20%</td>
    </tr>
  </tbody>
  
  <!-- 푸터 그룹 (합계 등) -->
  <tfoot>
    <tr>
      <th scope="row">합계</th>
      <td>3,300만원</td>
      <td>+17.5%</td>
    </tr>
  </tfoot>
</table>