표(<table>) 태그 마스터하기: <thead>, <tbody>, <tfoot>를 활용한 체계적인 데이터 정리

 

웹 페이지에서 데이터를 정리할 때 가장 기본이 되는 요소는 바로 **표(Table)**입니다. 하지만 단순히 <tr>과 <td>만 반복해서 사용하는 것보다, 표의 구조를 명확히 나누어 작성하는 것이 브라우저와 스크린 리더, 그리고 유지보수 측면에서 훨씬 유리합니다.

오늘은 HTML 표 작성의 핵심인 시맨틱 구조 태그들을 살펴보고, 실무에서 바로 활용할 수 있는 풍부한 예제를 소개합니다.

1. 왜 시맨틱 구조 태그를 써야 할까?

표를 만들 때 <thead>, <tbody>, <tfoot>를 사용하는 이유는 다음과 같습니다.

• 가독성 및 유지보수: 코드의 구조가 명확해져 어떤 부분이 제목이고 본문인지 한눈에 파악할 수 있습니다.
• 웹 접근성: 스크린 리더가 표의 구조를 더 정확하게 해석하여 시각 장애인에게 정보를 효율적으로 전달합니다.
• 인쇄 최적화: 표가 여러 페이지에 걸쳐 인쇄될 때, 브라우저 설정에 따라 페이지마다 상단에 제목(<thead>)을 반복해서 출력할 수 있습니다.

2. 핵심 태그 정리

태그설명

<table>

표를 생성하는 전체 컨테이너

<thead>

표의 제목(헤더) 그룹을 정의

<tbody>

표의 실제 본문 데이터 그룹을 정의

<tfoot>

표의 요약이나 합계 등이 들어가는 푸터 그룹을 정의

<tr>

표의 한 행(Row)

<th>

행이나 열의 제목 칸 (기본적으로 굵게, 중앙 정렬)

<td>

일반적인 데이터 칸

3. 실전 예제: 월간 가계부 데이터

가장 흔히 볼 수 있는 '가계부' 데이터를 활용해 시맨틱 구조를 적용해 보겠습니다.

예제 코드

<table border="1" style="width: 100%; border-collapse: collapse; text-align: center;">
  <!-- 표의 제목 영역 -->
  <thead style="background-color: #f2f2f2;">
    <tr>
      <th>날짜</th>
      <th>항목</th>
      <th>카테고리</th>
      <th>금액(원)</th>
    </tr>
  </thead>

  <!-- 표의 본문 영역 -->
  <tbody>
    <tr>
      <td>2023-10-01</td>
      <td>점심 식사</td>
      <td>식비</td>
      <td>12,000</td>
    </tr>
    <tr>
      <td>2023-10-02</td>
      <td>버스 카드 충전</td>
      <td>교통비</td>
      <td>20,000</td>
    </tr>
    <tr>
      <td>2023-10-05</td>
      <td>영화 관람</td>
      <td>문화생활</td>
      <td>15,000</td>
    </tr>
  </tbody>

  <!-- 표의 하단 요약 영역 -->
  <tfoot style="background-color: #e9ecef; font-weight: bold;">
    <tr>
      <td colspan="3">총 지출 합계</td>
      <td>47,000</td>
    </tr>
  </tfoot>
</table>

4. 복합 예제: 학급 성적표 (Colspan & Rowspan 활용)

데이터가 복잡해질수록 칸을 합치는 colspan(열 합치기)과 rowspan(행 합치기)의 활용이 중요합니다.

예제 코드

<table border="1" style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #d1ecf1;">
      <th rowspan="2">학생 이름</th>
      <th colspan="3">과목별 점수</th>
      <th rowspan="2">평균</th>
    </tr>
    <tr style="background-color: #d1ecf1;">
      <th>국어</th>
      <th>영어</th>
      <th>수학</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>김철수</td>
      <td>90</td>
      <td>85</td>
      <td>95</td>
      <td>90</td>
    </tr>
    <tr>
      <td>이영희</td>
      <td>95</td>
      <td>100</td>
      <td>80</td>
      <td>91.6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr style="text-align: center; background-color: #fff3cd;">
      <td colspan="4">학급 전체 평균</td>
      <td>90.8</td>
    </tr>
  </tfoot>
</table>

5. 표 작성 시 유의할 점

1. 순서 준수: HTML5에서는 <thead>, <tbody>, <tfoot> 순서대로 작성하는 것을 권장합니다. (과거에는 <tfoot>을 <tbody> 앞에 쓰기도 했으나 현재는 직관적인 순서를 따릅니다.)
2. Scope 속성: <th> 태그에 scope="col" 또는 scope="row" 속성을 추가하면 스크린 리더가 행의 제목인지 열의 제목인지 더 명확하게 인식할 수 있습니다.
   • 예: <th scope="col">날짜</th>
3. 캡션 사용: 표의 주제를 나타내는 <caption> 태그를 <table> 바로 아래에 추가하면 더욱 완벽한 표가 됩니다.

이제 단순히 정보를 나열하는 것을 넘어, 구조적으로 탄탄한 HTML 표를 만들어 보세요. 데이터의 성격에 맞춰 적절한 태그를 배치하는 것만으로도 웹 사이트의 품질이 한 단계 올라갑니다.