[table] HTML - <tbody> 태그 - 테이블셀그룹 (= 테이블바디 = tbody태그 = 티바디태그) (HTML5수정)

목차

1. <tbody> 예제 - 테이블셀 그룹
2. <tbody> 정의
3. <tbody> 구문
4. <tbody> 속성 (HTML5 제외 속성은 CSS 이용)

<tbody> 예제 - 테이블셀 그룹

 
<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; border-collapse:collapse;">
   <tr>
      <td>무료</td>
      <td>무료</td>
   </tr>
  </tfoot>
  <tbody style="text-align:center; border:1px solid red; border-collapse:collapse;">
   <tr>
      <td>html 입문</td>
      <td>css 입문</td>
   </tr>
   <tr>
      <td>html 고급</td>
      <td>css 고급</td>
   </tr>
  </tbody>
</table>

 

결과보기

<tbody> 정의

 
테이블의 주 내용을 그룹화.

 

---

 

1. 

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

 

2. 

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

<thead> 

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

 

<tbody> 

: 표의 주요 내용 (body) 그룹화.  (※ 그룹 태그 사용시, 필수 사항)

 

<tfoot> 

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

 

※ 주의

그룹화 위해 <thead> <tbody> <tfoot> 태그 사용 시, 

<thead> <tbody> 태그는 필수이나, 

<tfoot> 태그는 선택사항 임.

 

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

 

4.

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

<caption> <colgroup> <thead> <tfoot> 태그 다음에 위치해야 함.

 

5.

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

6.

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

 

<tbody> 구문

 

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

 

<tbody> 속성 (HTML5 제외 속성은 CSS 이용)