로이데스트 :: <table> - 부가기능 태그들 사용법(<caption><colgroup><col><span><thead><tbody><tfoot>)

<table> - 부가기능 태그들 사용법(<caption><colgroup><col><span><thead><tbody><tfoot>)

| HTML/xhtml문법

2014. 1. 22. 03:29

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<table> - 부가기능 태그들 사용법<br />
<caption>, <colgroup>, <col>, <br />
<thead>, <tbody>, <tfoot> 설명이며,<br />
속성은 <table>, <tr>, <th>, <td>에 포함되어 있습니다.<br />
<hr />
<b><caption> :테이블 제목 입니다.</b><br /><br />
<div id="ex_view2">
<table border=1>
<caption> 성적표 </caption>
<tr>
<th> </th><th>국어</th><th>영어</th><th>수학</th>
</tr>
<tr>
<th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
</tr>
<tr>
<th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
</tr>
<tr>
<th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
</tr>
</table>
</div>
<hr />
<b><colgroup><col> :테이블 열그룹과 열속성 입니다.</b><br /><br />
<div id="ex_view2">
<table border=1>
<colgroup>
<col style="background-color:brown" />
<col span="3" style="background-color:green" />
</colgroup>
<tr>
<th> </th><th>국어</th><th>영어</th><th>수학</th>
</tr>
<tr>
<th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
</tr>
<tr>
<th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
</tr>
<tr>
<th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
</tr>
</table>
</div>
<hr />
<b><thead>, <tbody>, <tfoot> :테이블의 각 부분 (머리글, 본문, 바닥 글) 입니다.</b><br /><br />
<div id="ex_view2">
<table border=1>
<tbody>
<tr>
<th>1김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
</tr>
</tbody>
<tfoot>
<tr>
<th>2김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
</tr>
</tfoot>
<thead>
<tr>
<th> </th><th>국어</th><th>영어</th><th>수학</th>
</tr>
</thead>
<tbody>
<tr>
<th>3김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기

성적표
	국어	영어	수학
김선희	80	73	68
김민정	72	45	94
김현준	65	98	55

	국어	영어	수학
김선희	80	73	68
김민정	72	45	94
김현준	65	98	55

	국어	영어	수학
1김선희	80	73	68
2김현준	65	98	55
3김민정	72	45	94

<caption></caption>

<colgroup></colgroup>

<col><col />

<span></span>
<thead></thead>

<tbody></tbody>

<tfoot></tfoot>

<caption> 테이블 제목 입니다.

<colgroup><col> 테이블 열그룹과 열속성 입니다.

<span>는 문서의 그룹 인라인 요소로 사용하고

자체로 시각적인 변화를 제공하지 않으며,

텍스트나 문서 부분에 후크 추가하는 방법을 제공합니다.(많이 사용됩니다.)

<thead><tbody><tfoot> 테이블의 각 부분 (머리글, 본문, 바닥 글) 입니다.

기능은 위 소스 예제를 보시면 바로 아실수 있습니다.

<caption><colgroup><col><thead><tbody><tfoot>의 속성은

<table>, <tr>, <th>, <td>태그 속성에 포함되어 있어서 참조하시면 될것 같습니다.

Global Attributes 지원합니다.

Global Event Attributes 지원합니다.

출처&인용 : http://www.w3schools.com/tags/tag_caption.asp

출처&인용 : http://www.w3schools.com/tags/tag_colgroup.asp

출처&인용 : http://www.w3schools.com/tags/tag_col.asp
출처&인용 : http://www.w3schools.com/tags/tag_span.asp

출처&인용 : http://www.w3schools.com/tags/tag_thead.asp

출처&인용 : http://www.w3schools.com/tags/tag_tbody.asp

출처&인용 : http://www.w3schools.com/tags/tag_tfoot.asp

저작자표시 비영리 변경금지

'HTML > xhtml문법' 카테고리의 다른 글

<form>-<input>, <input /> <label></label> 입력 필드 지정 (0)	2014.01.22
<form></form> 폼 양식 속성 설명 (0)	2014.01.22
<table>-<tr>-<th></th><td></td> 테이블 헤더셀과 기본셀 (0)	2014.01.22
<table>-<tr></tr> 테이블 행 (0)	2014.01.21
<table></table> 테이블 만들기 (0)	2014.01.21