표 — table

행과 열로 이루어진 데이터를 표현할 때 표를 쓴다. 시간표, 가격표, 비교표처럼 "이 항목이 저 항목과 어떻게 다른가"를 보여줄 때 특히 유용하다.

---

기본 구조

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>김자바</td>
    <td>25</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>이파이썬</td>
    <td>28</td>
    <td>데이터 분석가</td>
  </tr>
</table>

• <table> — 표 전체를 감싸는 태그
• <tr> — Table Row, 가로 한 줄
• <th> — Table Header, 제목 셀 (굵게, 가운데 정렬이 기본)
• <td> — Table Data, 일반 데이터 셀

---

thead, tbody, tfoot

표가 커지면 구조를 명확히 나누기 위해 <thead>, <tbody>, <tfoot>을 사용한다.

<table>
  <thead>
    <tr>
      <th>상품명</th>
      <th>가격</th>
      <th>수량</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>노트북</td>
      <td>1,200,000원</td>
      <td>1</td>
    </tr>
    <tr>
      <td>마우스</td>
      <td>35,000원</td>
      <td>2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>합계</td>
      <td>1,270,000원</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

시각적으로 크게 달라 보이지는 않지만, 스크린 리더나 인쇄 시 표 헤더를 반복하는 등 접근성과 기능 면에서 차이가 있다.

---

셀 병합

colspan — 가로 병합

<table>
  <tr>
    <td colspan="2">두 칸을 합친 셀</td>  <!-- 2열 병합 -->
    <td>세 번째 칸</td>
  </tr>
  <tr>
    <td>첫 번째</td>
    <td>두 번째</td>
    <td>세 번째</td>
  </tr>
</table>

rowspan — 세로 병합

<table>
  <tr>
    <td rowspan="2">두 행을 합친 셀</td>  <!-- 2행 병합 -->
    <td>오른쪽 첫 번째 행</td>
  </tr>
  <tr>
    <td>오른쪽 두 번째 행</td>
  </tr>
</table>

---

caption — 표 제목

<table>
  <caption>2024년 분기별 매출</caption>
  <thead>
    <tr>
      <th>분기</th>
      <th>매출</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1분기</td>
      <td>1억</td>
    </tr>
  </tbody>
</table>

<caption>은 <table> 바로 아래에 넣는다. 표 위에 제목처럼 표시된다.

---

표는 데이터를 정리하는 용도로만 써야 한다. 과거에는 레이아웃을 잡기 위해 표를 쓰는 경우가 있었는데, 이제는 CSS(Flexbox, Grid)로 레이아웃을 처리한다. 표가 적절한 곳은 "이 데이터가 행과 열의 관계로 설명되는가?"를 물어보면 쉽게 판단된다.