Part 4 : 테이블 태그 사용법

웹페이지에서 데이터를 표(table) 형태로 정리할 때 <table> 태그를 사용합니다.

이번 글에서는 <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot> 태그를 활용하는 방법을 배워보겠습니다.

 

---

 

1️⃣ 기본 테이블 구조

<table> 태그는 행(row)과 열(column)로 구성됩니다.

<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>이영희</td>
    <td>25</td>
    <td>디자이너</td>
  </tr>
</table>

 

🔹 <th>는 헤더(굵은 글씨), <td>는 일반 데이터 셀을 의미합니다.

 

---

 

2️⃣ <thead>, <tbody>, <tfoot> 태그 (표 구조화)

테이블을 더 명확하게 구분할 때 사용됩니다.

<table border="1">
  <thead>
    <tr>
      <th>상품명</th>
      <th>가격</th>
      <th>재고</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>노트북</td>
      <td>1,500,000원</td>
      <td>20개</td>
    </tr>
    <tr>
      <td>스마트폰</td>
      <td>1,000,000원</td>
      <td>50개</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">총 2개 제품</td>
    </tr>
  </tfoot>
</table>

 

🔹 <thead>: 테이블의 헤더 영역

🔹 <tbody>: 본문 데이터

🔹 <tfoot>: 테이블 하단 (합계, 요약 등)

 

---

 

🎯 마무리

이제 HTML의 테이블 태그를 활용하여 데이터를 깔끔하게 정리할 수 있습니다!

🚀 다음 포스팅에서는 폼 태그에 대해 다뤄보겠습니다. 😊

 

 

 

- Dblisher -