- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
- <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> - <tr> - <th>, <td> 사용법<br />
- <th> 사용 용도는 HTML 테이블의 헤더셀을 정의하며,<br />
- 기본적으로 중앙에 문자 정렬에 굵은 글씨체입니다.<br />
- <br />
- <td> 사용 용도는 HTML 테이블의 기본셀을 정의하며,<br />
- 기본적으로 왼쪽에 문자 정렬에 일반 글씨체입니다.<br />
- <br />
- <th>와 <td> 속성이 같으므로 같이 합니다.<br />
- <br />
- ( 속성-colspan, rowspan, width, height, align, valign, bgcolor, <br />
-
- nowrap, scope, headers, abbr, axis, sorted, char, charoff )<br />
- <hr />
- <b><th><td> : 1.속성-colspan : 테이블 셀을 행으로 통합합니다.</b><br /><br />
- 행에서 통합 할 셀 위치에 있는 태그에 colspan적고 숫자는 통합 할 셀 수를 적습니다.<br />
- 그리고 colspan 적은 셀 이후의 같은 행에 있는 셀 태그를 <br />
- 통합 할 셀 수 - 1 만큼 삭제합니다.(예 3개 통합 - 1 = 2개 삭제) <br />
- <div id="ex_view2">
- <table border=1>
- <tr>
- <th> </th><th colspan=3>국어, 영어, 수학</th>
- <!-- <th colspan=3 으로 인해 오른쪽 행 방향으로 <th></th> 2개 삭제 -->
- </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><th><td> : 2.속성-rowspan : 테이블 셀을 열으로 통합합니다.</b><br /><br />
- 행에서 통합 할 셀 위치에 있는 태그에 rowspan적고 숫자는 통합 할 셀 수를 적습니다.<br />
- 그리고 rowspan 적은 셀 이후의 같은 열에 있는 셀 태그를 <br />
- 통합 할 셀 수 - 1 만큼 삭제합니다.(예 3개 통합 - 1 = 2개 삭제) <br />
- <div id="ex_view2">
- <table border=1>
- <tr>
- <th> </th><th>국어</th><th>영어</th><th>수학</th>
- </tr>
- <tr>
- <th rowspan=3>김선희<br />김민정<br />김현준</th><td> 80 </td><td> 73 </td><td> 68 </td>
- <!-- <th rowspan=3 으로 인해 아래 열 방향으로 <th></th> 2개 삭제 -->
- </tr>
- <tr>
- <td> 72 </td><td> 45 </td><td> 94 </td>
- </tr>
- <tr>
- <td> 65 </td><td> 98 </td><td> 55 </td>
- </tr>
- </table>
- </div>
- <hr />
- <b><th><td> : 3.속성-width : 테이블 셀의 넓이를 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- HTML 4.01에서 더 이상 사용되지 않습니다. <br />
- 같은 열은 자동으로 같은 넓이로 됩니다. <br />
- 대신 CSS를 사용합니다.<br />
- css 문법 : <th style="width:150px;"><br />
- css 문법 : <td style="width:90px;"><br />
- <div id="ex_view2">
- <table border=1>
- <tr>
- <th> </th><th style="width:150px;">국어</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 style="width:90px;"> 45 </td><td> 94 </td>
- </tr>
- <tr>
- <th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
- </tr>
- </table>
- </div>
- <hr />
- <b><th><td> : 4.속성-height : 테이블 셀의 높이를 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- HTML 4.01에서 더 이상 사용되지 않습니다. <br />
- 같은 행은 자동으로 같은 높이로 됩니다. <br />
- 대신 CSS를 사용합니다.<br />
- css 문법 : <th style="height:150px;"><br />
- css 문법 : <td style="height:90px;"><br />
- <div id="ex_view2">
- <table border=1>
- <tr>
- <th> </th><th style="height:150px;">국어</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 style="height:90px;"> 94 </td>
- </tr>
- <tr>
- <th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
- </tr>
- </table>
- </div>
- <hr />
- <b><th><td> : 5.속성-align : 테이블 셀의 문자 행 정렬을 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- 대신 CSS를 사용합니다.<br />
- css 문법 : <th style="text-align:right;"><br />
- css 문법 : <td style="text-align:right;"><br />
- left - 왼쪽으로 테이블 정렬합니다. <br />
- right - 오른쪽으로 테이블 정렬합니다. <br />
- center - 중앙으로 테이블 정렬합니다. <br />
- justify - 각 라인은 같은 폭을 갖도록 라인을 지정합니다.(Explorer만 지원) <br />
- char - 특정 문자로 내용을 정렬한다고 하는데 모르겠음.<br />
- <div id="ex_view2">
- <table border=1 style="width:300px;">
- <tr>
- <th> </th><th style="text-align:right;">국어</th><th>영어</th><th>수학</th>
- </tr>
- <tr>
- <th>김선희</th><td style="text-align:center;"> 80 </td><td> 73 </td><td> 68 </td>
- </tr>
- <tr>
- <th style="text-align:left;">김민정</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><th><td> : 6.속성-valign : 테이블 셀의 문자 열 정렬을 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- 대신 CSS를 사용합니다.<br />
- css 문법 : <th style="vertical-align:top;"><br />
- css 문법 : <td style="vertical-align:top;"><br />
- top - 위로 테이블 정렬합니다. <br />
- middle - 중앙로 테이블 정렬합니다. <br />
- bottom - 아래으로 테이블 정렬합니다. <br />
- baseline - 베이스라인이 가상선이로써 텍스트 라인을 시트에 대부분 맞춥니다.<br />
- <th><td> 태그에선 셀 개념이 낱개라서 baseline은 제대로 안되는것 같음
- <div id="ex_view2">
- <table border=1 style="width:300px; height:300px;">
- <tr><th> </th><th>국어</th><th>영어</th><th>수학</th>
- </tr>
- <tr>
- <th style="vertical-align:bottom;">김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
- </tr>
- <tr>
- <th style="vertical-align:top;">김민정</th><td style="font-size:40px;">72</td><td> 45 </td><td> 94 </td>
- </tr>
- <tr>
- <th style="vertical-align:bottom;">김현준</th><td style="font-size:40px;"> 65 </td><td> 98 </td><td> 55 </td>
- </tr>
- </table>
- </div>
- <hr />
- <b><th><td> : 7.속성-bgcolor : 테이블 셀의 배경색을 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- HTML 4.01에서 더 이상 사용되지 않습니다. <br />
- 대신 CSS를 사용합니다.<br />
- css 문법 : <th style="background-color:blue;"><br />
- css 문법 : <td style="background-color:green;"><br />
- <div id="ex_view2">
- <table border=1>
- <tr>
- <th> </th><th style="background-color:blue;">국어</th><th>영어</th><th>수학</th>
- </tr>
- <tr>
- <th>김선희</th><td style="background-color:green;"> 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><th><td> : 8.속성-그밖에 속성인 <br />
- nowrap, scope, headers, abbr, axis, sorted, char, charoff 8가지의 속성기능 <br />
- 설명은 봤지만 필요할 것 같지 않아서 생략합니다. </b><br />
- </body>
- </html>
--------------------------------------------------------------------------------------------
위 소스 예제 보기
<tr> 테이블의 헤더셀을 정의하며,
기본적으로 중앙에 문자 정렬에 굵은 글씨체입니다.
<td> 테이블의 기본셀을 정의하며,
기본적으로 왼쪽에 문자 정렬에 일반 글씨체입니다.
colspan, rowspan, width, height, align, valign, bgcolor 속성과 설명은 소스에 있습니다.
nowrap, scope, headers, abbr, axis, sorted, char, charoff 속성과 설명은 부실합니다.
Global Attributes 지원합니다.
Global Event Attributes 지원합니다.
'HTML > xhtml문법' 카테고리의 다른 글
<form></form> 폼 양식 속성 설명 (0) | 2014.01.22 |
---|---|
<table> - 부가기능 태그들 사용법(<caption><colgroup><col><span><thead><tbody><tfoot>) (0) | 2014.01.22 |
<table>-<tr></tr> 테이블 행 (0) | 2014.01.21 |
<table></table> 테이블 만들기 (0) | 2014.01.21 |
<img></img>-<map></map>-<area><area> 이미지-이미지맵-클릭영역지정 (0) | 2014.01.21 |