HTML Academy · 강의

thead, tbody, tfoot 구조

표의 행을 의미에 맞는 헤더·본문·바닥글 영역으로 구성합니다.

thead, tbody, tfoot 구조은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

표의 영역

완전한 HTML 표에는 선택 사항이지만 사용을 권장하는 세 가지 영역이 있습니다:

<thead> — 머리글 행
<tbody> — 본문 행(주요 데이터)
<tfoot> — 바닥글 행(합계, 요약)

표 머리글

<thead> 요소는 머리글 행을 감쌉니다:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

표 본문

<tbody> 요소는 주요 데이터 행을 감쌉니다:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

표 바닥글

<tfoot> 요소는 일반적으로 합계나 요약을 포함하는 바닥글 행을 감쌉니다:

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

구조를 완성한 표

세 영역을 모두 포함한 전체 표:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

thead, tbody, tfoot을 사용하는 이유

표 구조의 장점:

의미론 — 화면 낭독기가 머리글, 데이터, 요약을 구분합니다
CSS 대상 지정 — 각 영역에 독립적으로 스타일을 적용할 수 있습니다
인쇄 — 인쇄되는 모든 페이지에 thead가 반복됩니다
스크롤 — CSS 오버플로를 사용해 tbody만 독립적으로 스크롤할 수 있습니다

스크롤할 수 있는 표 본문

머리글은 고정하고 본문만 스크롤되도록 만듭니다:

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

자동으로 삽입되는 표 본문

<tbody>를 생략하면 브라우저가 자동으로 하나를 추가합니다:

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

여러 표 본문 요소

하나의 표에 여러 <tbody> 그룹을 포함할 수 있습니다:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

표 영역 스타일 지정

CSS로 영역을 대상으로 지정합니다:

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

화면 낭독기의 동작

thead와 tbody를 올바르게 구성하면 화면 낭독기는 다음을 수행할 수 있습니다:

각 데이터 셀의 맥락으로 열 머리글을 읽어 줍니다
영역 사이를 탐색합니다(머리글 영역과 데이터 영역)
행과 열이 각각 몇 개인지 사용자에게 알려 줍니다

여러 행으로 구성된 표 머리글

복잡한 머리글에는 thead에 여러 행을 포함할 수 있습니다:

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

빠른 확인

표 바닥글 영역은 HTML 소스와 렌더링된 표에서 일반적으로 어디에 나타납니까?

복습: 표 머리글, 본문, 바닥글

표 구조의 핵심:

<thead> — 머리글 행(인쇄할 때 반복됨)
<tbody> — 데이터 행(여러 개를 포함할 수 있음)
<tfoot> — 요약 또는 합계 행
CSS로 영역을 대상으로 지정하고 접근 가능한 방식으로 표를 읽을 수 있습니다
브라우저가 tbody를 추가하더라도 항상 명시적으로 작성합니다

자주 묻는 질문

“thead, tbody, tfoot 구조” 강의는 무료인가요?

네 — “thead, tbody, tfoot 구조” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“thead, tbody, tfoot 구조”에서 뭘 배우나요?

표의 행을 의미에 맞는 헤더·본문·바닥글 영역으로 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“thead, tbody, tfoot 구조” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기