목차
<thead> 예제 - 테이블 머리글 (header) 그룹 <thead> 정의 <thead> 구문 <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>
PS. 주의: <tfoot> 태그가 <tbody> 앞에 위치하나, 출력하면 뒤에 배치됨.
<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> 예제보기
<thead> 구문
<table> <thead> <tr> <th>머리글</th> <th>머리글</th> </tr> </thead>
<thead> 속성
속성
속성값
쓰임새
비고
align
left (왼쪽 정렬)
수평 정렬
HTML5 : X
valign
top (상단 정렬)
수직 정렬
HTML5 : X
char
특정 문자
특정 문자에 대해 정렬
HTML5 : X
charoff
숫자
char 속성에 의해 내용 정렬 시
정렬될 특정 문자의 갯수 지정
HTML5 : X
※ HTML5에서 지원 중단된 속성은 CSS 이용.
※ <thead> 태그는 전역속성과 이벤트속성 지원.
