[HTML] 표 만들기_thead, tbody, tfoot 태그

<th> 태그를 사용하면 해당 셀이 표의 제목 셀임을 나타낼 수 있습니다.

<thead>와 <tbody> 태그를 사용하여 표의 헤더와 바디를 나눌 수도 있습니다.

또한, <caption> 태그를 사용하여 표의 캡션(제목)을 추가할 수 있습니다.

---

 

<thead>, <tbody>예시:

<table>
  <caption>표 캡션</caption>
  <thead>
    <tr>
      <th>번호</th>
      <th>이름</th>
      <th>나이</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>홍길동</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>김철수</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>이영희</td>
      <td>27</td>
    </tr>
  </tbody>
</table>

위의 코드는 제목이 있는 3행 3열의 표를 나타내며, 다음과 같이 나타납니다.

번호	이름	나이
1	홍길동	25
2	김철수	30
3	이영희	27

---

<tfoot> 예시

<tfoot> 태그를 사용하여 표의 맨 아래 부분에 총합, 평균 등의 정보를 추가할 수 있습니다.

<tfoot> 태그는 <table> 태그의 자식 중 맨 마지막에 위치합니다.

<table>
  <caption>나의 일정</caption>
  <thead>
    <tr>
      <th>날짜</th>
      <th>운동</th>
      <th>공부</th>
      <th>회의</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>3월 1일</td>
      <td>O</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>3월 2일</td>
      <td>X</td>
      <td>O</td>
      <td>X</td>
    </tr>
    <tr>
      <td>3월 3일</td>
      <td>X</td>
      <td>X</td>
      <td>O</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>총합</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </tfoot>
</table>

코드는 3행 4열의 표를 나타내며, 다음과 같이 나타납니다.

날짜 운동 공부 회의

3월 1일	O	X	X
3월 2일	X	O	X
3월 3일	X	X	O
총합	1	1	1

위 코드에서 <tfoot> 태그는 <thead> 바로 다음에 위치하고 있으며, 총합을 나타내는 행이 추가되었습니다.

---

각 태그 옆에 style을 추가하여 열의 모양을 변형할 수 있습니다.