[HTML 테이블(Table)] #01 <table>, <thead>, <tbody>, <tfoot> 구조로 웹 표를 표현하자

 

 

안녕하세요 토스트데브입니다.
오늘은 HTML에서 데이터를 구조화해서 표현할 수 있는 아주 강력한 태그인 <table> 요소와 그 하위 구조인 <thead>, <tbody>, <tfoot> 태그에 대해 자세히 알아보겠습니다.

 

 

📌 1. <table> 태그란?

HTML에서 표를 만들기 위한 기본 태그입니다.
행과 열로 구성된 정보를 시각적으로 깔끔하게 정리할 때 사용되며, 통계, 가격표, 일정표 등 다양한 데이터 표현에 활용됩니다.

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
</table>

 

 

🧱 2. 테이블의 기본 구성 요소

태그	설명
<table>	표 전체를 감싸는 태그
<tr> (table row)	테이블의 한 행(row)을 나타냄
<th> (table header)	제목 셀, 기본적으로 굵은 글씨 & 가운데 정렬
<td> (table data)	일반 데이터 셀

 

 

🧩 3. 구조화된 테이블: <thead>, <tbody>, <tfoot>

보다 의미 있는 구조적 테이블 작성을 위해 HTML5에서는 다음과 같은 시맨틱 블록 태그를 사용합니다.

✅ <thead> : 테이블의 머리말(헤더)

<thead>
  <tr>
    <th>과목</th>
    <th>점수</th>
  </tr>
</thead>

• 열 제목을 그룹화하며, 반복되는 헤더를 명확히 정의

 

✅ <tbody> : 본문 데이터 영역

<tbody>
  <tr>
    <td>수학</td>
    <td>95</td>
  </tr>
  <tr>
    <td>영어</td>
    <td>88</td>
  </tr>
</tbody>

• 테이블의 핵심 데이터 영역

 

✅ <tfoot> : 테이블의 바닥글(요약 정보)

<tfoot>
  <tr>
    <td>총합</td>
    <td>183</td>
  </tr>
</tfoot>

 

• 요약, 합계 등 마지막 부분에 필요한 정보를 나타낼 때 사용
• 위치는 <tbody> 뒤에 작성되지만 브라우저는 자동으로 마지막에 렌더링함

 

🎯 완성된 예시 코드

<table border="1">
  <thead>
    <tr>
      <th>제품명</th>
      <th>가격</th>
      <th>재고</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>키보드</td>
      <td>30,000원</td>
      <td>25개</td>
    </tr>
    <tr>
      <td>마우스</td>
      <td>15,000원</td>
      <td>50개</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">총 재고</td>
      <td>75개</td>
    </tr>
  </tfoot>
</table>

 

 

💡 실무 활용 팁

• <thead>, <tbody>, <tfoot> 태그는 시각적 스타일뿐만 아니라, 스크린 리더나 스크립트 처리에서 훨씬 유리합니다.
• CSS 또는 JavaScript에서 특정 영역만 스타일 지정/처리할 수 있어 유연성이 높아집니다.
• 데이터가 많은 경우 <thead>는 스크롤 고정 헤더 구현에 유용합니다.

 

 

📝 마무리

테이블은 단순히 데이터를 나열하는 것을 넘어서 정보를 정리하고 강조하는 가장 직관적인 방법입니다.
시맨틱 태그를 활용한 구조화된 테이블을 통해, 더 나은 사용자 경험과 웹 접근성을 동시에 잡을 수 있습니다.

#HTML #테이블태그 #table태그 #thead #tbody #tfoot #웹표작성 #HTML기초 #프론트엔드기초 #웹퍼블리싱 #코딩입문  
#toastdev #시맨틱태그 #웹접근성 #table구조