thead element - by. UXKM

요약 설명

<thead> 요소는 <table> 요소 내에서 표의 머리글 영역(헤더 행들)을 나타내는 시맨틱 태그로, 일반적으로 열 제목이나 각 열의 의미를 설명하는 데이터를 포함합니다.
내부에는 하나 이상의 <tr>(행)을 포함하고, 각 행 안에는 보통 <th>(헤더 셀)을 사용하여 내용을 정의합니다. <tbody>, <tfoot>과 함께 표의 구조를 명확하게 구분하며, 접근성 향상은 물론 스크린 리더와 고급 테이블 기능(예: 고정 헤더) 구현 시에도 중요한 역할을 합니다.

주요 역할 및 특징

  1. 테이블의 머리글(헤더) 정의

    <thead>는 테이블의 머리글(열의 제목) 을 지정하고, <tbody>와 <tfoot>으로 이어지는 데이터와의 구분을 명확히 합니다.

  2. 테이블 헤더 그룹화
    • <thead> 요소는 테이블의 제목 행(<tr>)을 그룹화하는 역할을 합니다.
    • 일반적으로 각 열의 제목을 포함하는 <th> 요소를 포함합니다.
  3. 접근성 향상
    • 스크린 리더가 머리글과 데이터를 구분해 읽을 수 있어, 시각 장애인을 위한 접근성이 높아집니다.
    • <th>의 scope 속성과 함께 사용하면 열 또는 행의 제목임을 명시할 수 있습니다.
  4. CSS를 통한 고정 헤더 및 스타일링 가능
    • position: sticky;를 사용해 스크롤 시 고정되는 헤더를 만들 수 있습니다.
    • background-color, font-weight 등을 사용해 머리글을 강조할 수 있습니다.
  5. 반복되는 테이블 헤더

    일부 브라우저 및 PDF 출력 시, <thead> 요소는 페이지가 넘어갈 때 자동으로 반복 표시될 수 있습니다.

  6. 정렬 및 필터링 시 유용

    자바스크립트를 사용해 정렬 및 필터링 기능을 추가할 때 유용합니다.

  7. 반드시 <table> 내에서만 사용 가능
      <thead> 요소는 반드시 <table> 내부에서 사용해야 하며,
      <tbody>, <tfoot>과 함께 사용하면 테이블의 논리적 구조를 더욱 명확하게 만들 수 있습니다.

CSS 기본 값

<thead> 요소는 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<thead> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

<thead>와 <tbody>를 사용하여 테이블 구조화

<thead>를 고정하여 스크롤 시 항상 보이게 설정

주의사항

  • <thead> 요소는 반드시 <table> 내부에서 사용해야 하며, 단독으로 사용할 수 없습니다.
  • <thead> 요소는 반드시 <tbody> 요소보다 먼저 선언되어야 합니다.
  • <thead> 내의 모든 셀은 <th>를 사용해 제목으로 지정해야 합니다.
    <td>는 사용하지 않는 것이 원칙입니다.