[table] HTML - <tfoot> 태그 - 테이블꼬릿말그룹 (= 테이블풋 = tfoot 태그 = 티풋태그) (HTML5수정)

목차

1. <tfoot> 예제 - 테이블 꼬릿말(footer)
2. <tfoot> 정의
3. <tfoot> 구문
4. <tfoot> 속성 (HTML5에서 제외된 속성은 CSS 이용.)

<tfoot> 예제 - 테이블 꼬릿말(footer)

 
<table style="text-align:center; border:1px solid; border-collapse:collapse;">
  <thead style="text-align:center; border:1px solid; border-collapse:collapse;">
   <tr>
      <th>HTML 강의 - 홈짱닷컴 (homzzang.com)</th>
      <th>CSS 강의 - 홈짱닷컴 (homzzang.com)</th>
   </tr>
  </thead>
  <tfoot style="text-align:center; border:1px solid red; border-collapse:collapse;">
   <tr>
      <td>무료</td>
      <td>무료</td>
   </tr>
  </tfoot>
  <tbody style="text-align:center; border:1px solid; border-collapse:collapse;">
   <tr>
      <td>html 입문</td>
      <td>css 입문</td>
   </tr>
   <tr>
      <td>html 고급</td>
      <td>css 고급</td>
   </tr>
  </tbody>
</table>

 

결과보기

<tfoot> 정의

 
테이블의 꼬리말(footer)을 그룹화.

 

---

 

1.

레이아웃에는 영향 안 미치나, CSS 적용 시 유용.

 

2. 

각 부분을 그룹화시킬 때 사용하는 그룹 태그

<thead>

: 테이블 머리글 (header) 그룹화. (※ 그룹 태그 사용시, 필수 사항)

 

<tbody>
: 테이블 주요 내용 (body) 그룹화. (※ 그룹 태그 사용시, 필수 사항)

 

<tfoot>

: 표의 꼬리말 (footer) 그룹화 (※ 그룹 태그 사용시, 선택 사항)

 

※ 주의
그룹화 위해 <thead> <tbody> <tfoot> 태그 사용 시,
<thead> <tbody> 태그는 필수이나,
<tfoot> 태그는 선택 사항임.

 

3. 

이렇게 각 성격별로 그룹화 시킬 경우 장점
① 브라우저는 표의 주요 내용을 머리글과 꼬리말과 독립시켜 주요 내용만 스크롤 가능하게 할 수 있음.
② 여러 페이지에 걸친 큰 표일 경우, 각 페이지 마다 상단과 하단에 머리글과 꼬리말을 추가할 수 있음.

 

4.

<tfoot> 태그는 <table> 태그 안에 위치해야 되며,

<caption> <colgroup> <thead> 태그 다음에 위치해야 하며.

<tbody> <tr>앞에 위치해야 함.

 

5.

내부에 하나 또는 그 이상의 <tr> 태그 갖고 있어야 함.

6.

시작태그와 종료태그로 구성

 

<tfoot> 구문

 

<table>
 <thead>
  <tr>
     <th>머리글</th>
     <th>머리글</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
     <td>꼬리말</td>
     <td>꼬리말</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
     <td>내용</td>
     <td>내용</td>
  </tr>
  <tr>
     <td>내용</td>
     <td>내용</td>
  </tr>
 </tbody>
</table>

 

<tfoot> 속성 (HTML5에서 제외된 속성은 CSS 이용.)