[HTML] 08. 표(table) 완전 정리

[HTML] 08. 표(table) 완전 정리

표(table)는 데이터를 행(Row)과 열(Column) 구조로 표현할 때 사용합니다.
엑셀처럼 생각하면 이해가 쉽습니다.

주의할 점은 레이아웃용으로 사용하는 것이 아니라
정말 데이터가 표 형태일 때 사용하는 것이 맞습니다.

---

1. table 기본 구조

<table>
  <tr>
    <td>데이터</td>
    <td>데이터</td>
  </tr>
</table>

• table → 표 전체
• tr → 행 (table row)
• td → 셀 (table data)

---

2. 기본 예제

<table border="1">
  <tr>
    <td>이름</td>
    <td>나이</td>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>25</td>
  </tr>
</table>

Output

이름	나이
홍길동	25

---

3. 제목 셀 (th)

th는 table header입니다.
제목 셀을 만들 때 사용합니다.

<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>25</td>
  </tr>
</table>

Output

이름	나이
홍길동	25

th는 기본적으로 굵게 표시되고 가운데 정렬됩니다.

---

4. 구조를 더 명확하게 만드는 태그

HTML5에서는 표 구조를 더 명확하게 나누는 것을 권장합니다.

• thead → 표 머리
• tbody → 표 본문
• tfoot → 표 바닥

예제

<table border="1">
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

---

5. 셀 병합 (colspan, rowspan)

열 병합

<td colspan="2">병합된 셀</td>

행 병합

<td rowspan="2">병합</td>

엑셀에서 셀 합치기와 같은 개념입니다.

---

6. 실무에서 중요한 점

• 레이아웃 용도로 table 사용 ❌
• 데이터 표현에만 사용
• thead/tbody 구조 분리 권장
• 접근성을 위해 scope 속성 사용 가능

---

7. 핵심 정리

• table → 표 전체
• tr → 행
• td → 데이터 셀
• th → 제목 셀
• colspan / rowspan → 셀 병합

표는 구조가 정확해야 깨지지 않습니다.
행과 열의 개수를 항상 맞추는 것이 중요합니다.