목차
- <tbody> 예제 - 테이블셀 그룹
- <tbody> 정의
- <tbody> 구문
- <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> 태그는 전역속성과 이벤트속성 지원.