[table] HTML - <thead> 태그 - 테이블머리글그룹 (= thead태그 = 티헤드태그) (HTML5수정)

1. <thead> 예제 - 테이블 머리글 (header) 그룹
2. <thead> 정의
3. <thead> 구문
4. <thead> 속성

<thead> 예제 - 테이블 머리글 (header) 그룹 

 
<table style="text-align:center; border:1px solid; border-collapse:collapse;">
  <thead style="text-align:center; border:1px solid red; border-collapse:collapse;">
   <tr>
      <th>HTML 강의 - 홈짱닷컴 (homzzang.com)</th>
      <th>CSS 강의 - 홈짱닷컴 (homzzang.com)</th>
   </tr>
  </thead>
  <tfoot style="text-align:center; border:1px solid; 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>

 

결과보기

<thead> 정의

 
테이블의 머리글을 그룹화.

 

---

 

1. 

• 시작태그와 종료태그로 구성됨.
• 레이아웃에는 영향 안 미치나, CSS 적용 시 유용.
• <thead> 태그는 <table> 태그 안, <caption> <colgroup> 태그 다음, <tbody>< tfoot> <tr>태그 앞에 위치해야 함.
• <thead> 태그는 내부에 최소 하나 이상의 <tr> 태그를 갖어야 함.

 

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

<thead>

• 표의 머리글(header)을 그룹화. (※ 그룹 태그 사용시, 필수 사항)
• <thead> 태그에 배경색 지정 시 그 안의 모든 <th> 태그에 영향. 
• <th>에 별도로 배경색 지정 시 <th> 요소의 배경색 우선 적용됨.

 

<tbody>

• 표의 주요내용(body)을 그룹화. (※ 그룹 태그 사용시, 필수 사항)
• <tbody> 태그에 배경색 지정 시 그 안의 모든 <td> 태그에 영향. 
• <td>에 별도로 배경색 지정 시 <td> 요소의 배경색 우선 적용됨.

<tfoot>

• 표의 꼬리말(footer)을 그룹화. (※ 그룹 태그 사용시, 선택 사항)
• <tfoot> 태그에 배경색 지정 시 그 안의 모든 <td> 태그에 영향. 
• <td>에 별도로 배경색 지정 시 <td> 요소의 배경색 우선 적용됨.

  

3. 그룹화 장점

• 브라우저는 표의 주요 내용을 머리글과 꼬리말과 독립시켜 주요 내용만 스크롤 가능하게 할 수 있음.
• 여러 페이지에 걸친 큰 표일 경우, 각 페이지 마다 상단과 하단에 머리글과 꼬리말을 추가할 수 있음.

4.

모든 브라우저 지원.

 

5. MDN <thead> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

 

<thead> 구문

 

<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>

 

<thead> 속성