table, th, td, tr, thead, tbody, tfoot

설명
행,렬
Primary
Primary
content category
flow
Table포함될 수 있는 요소들과 그 순서접근성 고려하기기본thead, tbody, caption 추가scope 추가tfoot 예시col, colgroup (주로 스타일링)행,렬 병합

Table

💡
thead, tbody, tfoot 태그는 안써도 차이는 없으나, 검색엔진 입장에서 어떤 데이터인지 판단하는 데에 활용됨
 

포함될 수 있는 요소들과 그 순서

테이블(<table>) 안에는 다음 요소들이 이 순서대로 들어갈 수 있음:
  1. <caption> (선택적) → 표의 제목 (필수 아님).
  1. <colgroup> (0개 이상) → 표의 열(col)을 그룹화하는 요소.
  1. <thead> (선택적) → 표의 헤더 섹션.
  1. 다음 중 하나를 선택해야 함:
      • <tbody> (0개 이상) → 표의 본문 데이터를 그룹화하는 요소.
      • <tr> (1개 이상) → tbody 없이도 바로 표의 행을 추가할 수 있음.
  1. <tfoot> (선택적) → 표의 푸터(하단 요약) 섹션.
 

접근성 고려하기

기본

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Maria Sanchez</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Michael Johnson</td>
    <td>34</td>
  </tr>
</table>
notion image
문제 없는 코드이지만 접근성 측면에서는 다소 부족함.
  • caption이 없어서 어떤 데이터를 보여주는 건지 한번에 이해하기 어려움.
  • thead와 tbody가 없어서 표의 헤더와 본문의 구조가 명확하게 보이지 않음.

thead, tbody, caption 추가

<table>
  <caption>사용자의 이름과 나이를 나타낸 표</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Maria Sanchez</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Michael Johnson</td>
      <td>34</td>
    </tr>
  </tbody>
</table>
요소
개선된 이유
<caption>
표의 목적을 설명 → 스크린 리더 사용자가 쉽게 이해
<thead>
헤더와 본문을 명확히 구분 → AT가 올바르게 해석
<tbody>
표의 본문을 명확하게 표시 → 논리적인 HTML 구조 유지

scope 추가

세로 헤더 뿐만 아니라 가로 헤더도 있을 수 있다.
이 경우 <th>를 명시하면 헤더라는 것을 AT가 인지할 순 있지만, 방향을 알 수 없다.
스크린리더에 따라 읽는 순서가 잘못될 수 있다. 이 경우 scope로 방향을 명시할 수 있다.
<table>
  <caption>요일별 식단표</caption>
  <thead>
    <tr>
      <th></th>
      <th scope="col">월</th>
      <th scope="col">화</th>
      <th scope="col">수</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">아침</th>
      <td>토스트</td>
      <td>시리얼</td>
      <td>오트밀</td>
    </tr>
    <tr>
      <th scope="row">점심</th>
      <td>샐러드</td>
      <td>김밥</td>
      <td>파스타</td>
    </tr>
  </tbody>
</table>
notion image
세로(행) 헤더에 scope="row" 추가 → 스크린 리더가 올바르게 읽을 수 있음
  • <th scope="row">아침</th>
  • <th scope="row">점심</th>
  • "아침"이 같은 행에 있는 데이터를 설명하는 행 헤더임을 명확하게 지정!
  • 스크린 리더가 읽을 때 "아침, 토스트 / 아침, 시리얼 / 아침, 오트밀" 식으로 정확하게 안내함
가로(열) 헤더에 scope="col" 추가 → 각 열이 무엇을 의미하는지 명확하게 지정
  • <th scope="col">월</th>
  • <th scope="col">화</th>
  • <th scope="col">수</th>
  • 이렇게 하면 각 열이 특정 요일을 나타낸다는 정보를 AT(보조 기술)에게 정확하게 전달
  • 만약 scope="col"이 없으면, 일부 스크린 리더가 <th>를 일반 데이터로 인식할 수도 있음

tfoot 예시

  • 표의 하단(summary) 정보를 그룹화할 때 사용한다.
  • 보통 합계, 평균, 요약, 참고 정보 등을 넣지만, 꼭 숫자 데이터일 필요는 없다.
 
표 하단에 합계를 넣는 예시
<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>월급</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>김철수</td>
      <td>3,000,000원</td>
    </tr>
    <tr>
      <td>이영희</td>
      <td>3,500,000원</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>총합</th>
      <td>6,500,000원</td>
    </tr>
  </tfoot>
</table>
notion image
표 하단에 추가 정보 추가 예시
<table>
  <thead>
    <tr>
      <th>상품명</th>
      <th>가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>노트북</td>
      <td>1,500,000원</td>
    </tr>
    <tr>
      <td>스마트폰</td>
      <td>1,000,000원</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">모든 가격은 부가세 포함 금액입니다.</td>
    </tr>
  </tfoot>
</table>
notion image
 

col, colgroup (주로 스타일링)

주로 열 단위로 스타일링을 하는 목적으로 많이 쓴다.
따라서 스크린 리더와 같은 AT와도 큰 연관성이 없다.
<table border="1">
  <colgroup>
    <col style="width: 50%; background-color: lightblue;"> <!-- 첫 번째 열 -->
    <col style="width: 25%; background-color: lightgreen;"> <!-- 두 번째 열 -->
    <col style="width: 25%; background-color: lightyellow;"> <!-- 세 번째 열 -->
  </colgroup>
  <thead>
    <tr>
      <th>상품명</th>
      <th>가격</th>
      <th>재고</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>노트북</td>
      <td>1,500,000원</td>
      <td>10개</td>
    </tr>
    <tr>
      <td>스마트폰</td>
      <td>1,000,000원</td>
      <td>20개</td>
    </tr>
  </tbody>
</table>
notion image

행,렬 병합

colspan, rowspan으로 셀들을 병합할 수 있다.
<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>
notion image