Table tag and property

표는 단순히 선을 긋는 것이 아니라, 행(Row)과 열(Column)의 관계를 명확히 정의하여 복잡한 데이터를 한눈에 보여주는 도구입니다.

---

1. 테이블의 기본 구조 태그

표를 만들 때는 바깥에서 안쪽으로 들어가는 계층 구조를 이해하는 것이 중요합니다.

• <table>: 표의 전체 범위를 지정하는 최상위 태그입니다.
• <tr> (Table Row): 표의 한 행을 만듭니다.
• <th> (Table Header): 행이나 열의 제목 칸을 만듭니다. 기본적으로 글자가 굵게 표시되고 가운데 정렬됩니다.
• <td> (Table Data): 표의 일반적인 데이터(내용) 칸을 만듭니다.

---

2. 테이블의 구조화 태그 (더 의미 있게 만들기)

표가 길어지면 머리글, 본문, 바닥글로 나누어 관리하는 것이 좋습니다.

• <thead>: 표의 제목 부분(헤더)을 그룹화합니다.
• <tbody>: 표의 실제 데이터 본문을 그룹화합니다.
• <tfoot>: 표의 하단 요약이나 합계 부분을 그룹화합니다.
• <caption>: 표의 제목이나 설명을 표 상단에 붙입니다.

---

3. 핵심 속성: 칸 합치기 (Spanning)

가장 많이 쓰이는 속성으로, 여러 칸을 하나로 합칠 때 사용합니다. <th>나 <td> 태그에 직접 작성합니다.

• colspan="숫자": 가로로 여러 열을 합칩니다. (옆으로 합치기)
• rowspan="숫자": 세로로 여러 행을 합칩니다. (아래로 합치기)

HTML

 

<td colspan="2">합쳐진 칸</td>

---

4. 실전 예제 코드: "주간 식단표"

배운 내용을 종합하여 구조화된 표를 만들어 보겠습니다.

HTML

 

<table border="1"> <caption>주간 식단표</caption>
  <thead>
    <tr>
      <th>구분</th>
      <th>월요일</th>
      <th>화요일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>점심</th>
      <td>비빔밥</td>
      <td rowspan="2">특식 (갈비탕)</td> </tr>
    <tr>
      <th>저녁</th>
      <td>김치찌개</td>
      </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">※ 식단은 재료 수급에 따라 변경될 수 있습니다.</td> </tr>
  </tfoot>
</table>

---

📋 테이블 관련 CSS 주요 속성

HTML 속성만으로는 디자인에 한계가 있어, 주로 CSS와 함께 사용합니다.

• border-collapse: collapse;: 표의 이중 테두리를 하나로 합쳐 깔끔하게 만듭니다. (매우 중요!)
• border-spacing: 인접한 셀 사이의 간격을 조절합니다.
• text-align: 셀 안의 텍스트 정렬을 조절합니다.

---

학습 정리

• 표는 <table> → <tr> → <th>/<td> 순서의 계층 구조를 가진다.
• 의미 있는 문서를 위해 <thead>, <tbody> 등을 사용하는 습관이 좋다.
• **colspan**은 가로로, **rowspan**은 세로로 칸을 확장한다.

---

복잡한 데이터도 척척 정리하는 표 태그를 정복하셨습니다!

---