Chapter 1-13. 표만들기 (HTML)

📌 HTML에서 표 만들기

표는 데이터를 행과 열로 나누어 표시하는 중요한 레이아웃 요소입니다. HTML에서 표를 만들 때 사용되는 주요 태그들에 대해 알아보겠습니다.

🔹 표 만들기 태그

1. <table>: 표를 생성하는 기본 태그입니다.
2. <tr>: 표의 **행(row)**을 나타내는 태그입니다.
3. <th>: 표에서 헤더 셀(제목)을 나타내는 태그입니다.
4. <td>: 표에서 일반 셀(내용)을 나타내는 태그입니다.

✅ 기본 구조 예시

<table>
  <caption>학생 정보</caption>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>학년</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>20</td>
    <td>3학년</td>
  </tr>
  <tr>
    <td>이영희</td>
    <td>22</td>
    <td>4학년</td>
  </tr>
</table>

• <caption>: 표의 제목을 나타내는 태그로, 기본적으로 가운데 정렬됩니다.

---

📊 표 구조 명확하게 표현하기

HTML에서 표의 구조를 보다 명확히 표현하기 위해 <thead>, <tbody>, <tfoot> 태그를 사용할 수 있습니다.

🔹 <thead>: 표의 헤더를 나타내는 태그입니다.

• 표의 제목이나 주제를 나타내는 영역을 구분할 때 사용됩니다.

🔹 <tbody>: 표의 본문을 나타내는 태그입니다.

• 실제 데이터를 포함하는 영역을 구분합니다.

🔹 <tfoot>: 표의 요약 또는 맺음말을 나타내는 태그입니다.

• 표의 하단에 요약 정보를 제공할 때 유용합니다.

✅ 전체 구조 예시

<table>
  <caption>학생 정보</caption>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>학년</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>김철수</td>
      <td>20</td>
      <td>3학년</td>
    </tr>
    <tr>
      <td>이영희</td>
      <td>22</td>
      <td>4학년</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">전체 데이터 2개</td>
    </tr>
  </tfoot>
</table>

• **<tfoot>**는 표의 하단에 요약을 제공할 때 유용합니다.

---

🌟 표의 스타일링과 접근성

• 스타일링: CSS를 사용하여 표의 모양이나 스타일을 변경할 수 있습니다. 예를 들어, 표에 경계선을 추가하거나, 배경색을 변경하는 것이 가능합니다.
• 웹 접근성: thead, tbody, tfoot 등을 사용하여 표의 구조적 의미를 명확하게 정의할 수 있습니다. 이는 스크린 리더와 같은 도구가 표를 보다 쉽게 이해하고 음성으로 읽을 수 있게 도와줍니다.

---

🚩 결론

• 표는 데이터를 행과 열로 나누어 체계적으로 표현하는 데 유용한 HTML 요소입니다.
• <table>, <tr>, <th>, **<td>**는 기본적으로 표를 구성하는 태그들이며, <thead>, <tbody>, **<tfoot>**을 사용하여 표의 구조를 더 명확하게 표현할 수 있습니다.
• 스타일링과 접근성을 고려하여 표를 디자인하고, 데이터를 잘 관리할 수 있습니다.