HTML 테이블 요소

HTML에서 테이블 요소들은 표 데이터를 구조화하고 시각적으로 표현하는 데 사용됩니다. <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot> 같은 태그들이 표를 구성하는 기본적인 구성 요소입니다. 

---

1. <table>: 테이블을 정의

• 역할: HTML 문서 내에서 표를 정의하는 가장 상위 태그입니다.
• 속성:
  • border: 테이블의 테두리 굵기를 지정합니다.
  • width, height: 테이블의 전체 너비와 높이를 지정합니다.
  • align: 테이블의 위치를 지정합니다. (left, center, right)

예시:

<table border="1" width="100%" align="center">
    <!-- 테이블의 내용이 들어감 -->
</table>

---

2. <tr>: 테이블 행을 정의

• 역할: 하나의 행을 정의합니다. 이 안에 여러 개의 데이터 셀(td)이나 헤더 셀(th)이 포함됩니다.

예시:

<table border="1">
    <tr>
        <td>첫 번째 셀</td>
        <td>두 번째 셀</td>
    </tr>
</table>

---

3. <td>: 데이터 셀을 정의

• 역할: 표의 일반 데이터 셀을 정의합니다. <tr> 안에서 사용되며, 표의 데이터가 위치하는 셀입니다.
• 속성:
  • colspan: 셀이 여러 열에 걸쳐 있을 때 사용합니다.
  • rowspan: 셀이 여러 행에 걸쳐 있을 때 사용합니다.

예시:

<tr>
    <td rowspan="2">병합된 셀</td>  <!-- 두 행에 걸친 셀 -->
    <td>첫 번째 행, 두 번째 셀</td>
</tr>
<tr>
    <td>두 번째 행, 두 번째 셀</td>
</tr>

---

4. <th>: 테이블 헤더 셀을 정의

• 역할: 헤더 셀을 정의하며, 기본적으로 굵은 글씨로 표시됩니다. 보통 열의 제목 또는 행의 제목으로 사용됩니다.
• 속성:
  • scope: 이 속성은 헤더 셀이 어느 부분에 해당하는지 지정합니다. (예: col, row)

예시:

<tr>
    <th scope="col">이름</th>
    <th scope="col">나이</th>
</tr>

---

5. <thead>: 테이블의 머리 부분을 그룹화

• 역할: 테이블의 머리 부분(보통 헤더 행)을 그룹화합니다. 주로 <th> 태그를 포함하며, 테이블의 상단에 위치합니다.
• 주요 기능: 테이블을 더 구조적으로 만들고, 반복되는 헤더를 처리할 때 유용합니다.

예시:

<thead>
    <tr>
        <th>이름</th>
        <th>나이</th>
    </tr>
</thead>

---

6. <tbody>: 테이블 본문을 그룹화

• 역할: 테이블의 본문 데이터를 그룹화합니다. <thead>와 <tfoot> 사이에 위치하며, 실제 데이터 셀들이 포함됩니다.
• 주요 기능: 테이블의 본문을 명확하게 구분할 수 있도록 합니다.

예시:

<tbody>
    <tr>
        <td>홍길동</td>
        <td>30</td>
    </tr>
    <tr>
        <td>김영희</td>
        <td>25</td>
    </tr>
</tbody>

---

7. <tfoot>: 테이블 하단(푸터)을 그룹화

• 역할: 테이블의 하단 부분(푸터)을 그룹화합니다. 보통 총합이나 요약 정보가 포함됩니다. <thead> 위에 위치할 수 있지만, 페이지가 넘어갈 때 푸터가 계속 유지되도록 처리하기 위해 사용됩니다.

예시:

<tfoot>
    <tr>
        <td>합계</td>
        <td>55</td>
    </tr>
</tfoot>

---

추가 정보: 테이블 구조의 의미와 활용

• 테이블 구조의 명확성: <thead>, <tbody>, <tfoot>을 사용하면 테이블의 구조가 명확해집니다. 특히, 데이터 양이 많아 스크롤이 발생할 때도, 테이블 헤더와 푸터가 계속 표시되도록 설계할 수 있습니다.
• 반응형 디자인: CSS를 통해 테이블을 반응형으로 만들 수 있습니다. 작은 화면에서는 테이블을 스크롤 가능하게 만들거나, display: block 속성을 사용해 테이블 구조를 변형할 수 있습니다.