• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 이용)

 속성
속성값
 쓰임새  비고
 
 align
 
 
 left (왼쪽 정렬)
 right (오른쪽 정렬)
 center (중앙 정렬)
 justify (동일 길이 펼침 정렬)
 char (특정 문자 기준 정렬)
 
 수평 정렬  HTML5 X
 valign
 
 top (상단 정렬)
 middle (중단 정렬)
 bottom (하단 정렬)
 baseline (밑단 정렬) - 글씨 크기 다를 경우 효과적
 
 수직 정렬  HTML5 X
 char
 
 특정 문자
 
 특정 문자에 대해 정렬  HTML5 X
 charoff  숫자
 
 char 속성에 의해 내용 정렬 시
 정렬될 특정 문자의 갯수 지정 
 
 HTML5 X
<tbody> 태그는 전역속성과 이벤트속성 지원.

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012