1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   </head>
  7.   <body>
  8.     &lt;table&gt; - &lt;tr&gt; - &lt;th&gt;, &lt;td&gt; 사용법<br />
  9.     &lt;th&gt; 사용 용도는 HTML 테이블의 헤더셀을 정의하며,<br />
  10.     기본적으로 중앙에 문자 정렬에 굵은 글씨체입니다.<br />
  11.     <br />
  12.     &lt;td&gt; 사용 용도는 HTML 테이블의 기본셀을 정의하며,<br />
  13.     기본적으로 왼쪽에 문자 정렬에 일반 글씨체입니다.<br />
  14.     <br />
  15.     &lt;th&gt;와 &lt;td&gt; 속성이 같으므로 같이 합니다.<br />
  16.     <br />
  17.     ( 속성-colspan, rowspan, width, height, align, valign, bgcolor, <br />
  18.     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  19.     nowrap, scope, headers, abbr, axis, sorted, char, charoff )<br />
  20.     <hr />
  21.     <b>&lt;th&gt;&lt;td&gt; : 1.속성-colspan : 테이블 셀을 행으로 통합합니다.</b><br /><br />
  22.     행에서 통합 할 셀 위치에 있는 태그에 colspan적고 숫자는 통합 할 셀 수를 적습니다.<br />
  23.     그리고 colspan 적은 셀 이후의 같은 행에 있는 셀 태그를 <br />
  24.     통합 할 셀 수 - 1 만큼 삭제합니다.(예 3개 통합 - 1 = 2개 삭제) <br />
  25.     <div id="ex_view2">
  26.       <table border=1>
  27.      <tr>
  28.       <th>      </th><th colspan=3>국어, 영어, 수학</th>
  29.       <!-- <th colspan=3 으로 인해 오른쪽 행 방향으로 <th></th> 2개 삭제 -->
  30.      </tr>
  31.      <tr>
  32.       <th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  33.      </tr>
  34.      <tr>
  35.       <th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  36.      </tr>
  37.      <tr>
  38.       <th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  39.      </tr>
  40.       </table>
  41.     </div>
  42.     
  43.     <hr />
  44.     <b>&lt;th&gt;&lt;td&gt; : 2.속성-rowspan : 테이블 셀을 열으로 통합합니다.</b><br /><br />
  45.     행에서 통합 할 셀 위치에 있는 태그에 rowspan적고 숫자는 통합 할 셀 수를 적습니다.<br />
  46.     그리고 rowspan 적은 셀 이후의 같은 열에 있는 셀 태그를 <br />
  47.     통합 할 셀 수 - 1 만큼 삭제합니다.(예 3개 통합 - 1 = 2개 삭제) <br />
  48.     <div id="ex_view2">
  49.       <table border=1>
  50.      <tr>
  51.       <th>      </th><th>국어</th><th>영어</th><th>수학</th>
  52.      </tr>
  53.      <tr>
  54.       <th rowspan=3>김선희<br />김민정<br />김현준</th><td> 80 </td><td> 73 </td><td> 68 </td>
  55.       <!-- <th rowspan=3 으로 인해 아래 열 방향으로 <th></th> 2개 삭제 -->
  56.      </tr>
  57.      <tr>
  58.       <td> 72 </td><td> 45 </td><td> 94 </td>
  59.      </tr>
  60.      <tr>
  61.       <td> 65 </td><td> 98 </td><td> 55 </td>
  62.      </tr>
  63.       </table>
  64.     </div>
  65.     
  66.     <hr />
  67.     <b>&lt;th&gt;&lt;td&gt; : 3.속성-width : 테이블 셀의 넓이를 지정합니다.</b><br /><br />
  68.     HTML5에서 지원되지 않습니다.<br />
  69.     HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  70.     같은 열은 자동으로 같은 넓이로 됩니다. <br />
  71.     대신 CSS를 사용합니다.<br />
  72.     css 문법 : &lt;th style="width:150px;"&gt;<br />
  73.     css 문법 : &lt;td style="width:90px;"&gt;<br />
  74.     <div id="ex_view2">
  75.       <table border=1>
  76.      <tr>
  77.       <th>      </th><th style="width:150px;">국어</th><th>영어</th><th>수학</th>
  78.      </tr>
  79.      <tr>
  80.       <th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  81.      </tr>
  82.      <tr>
  83.       <th>김민정</th><td> 72 </td><td style="width:90px;"> 45 </td><td> 94 </td>
  84.      </tr>
  85.      <tr>
  86.       <th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  87.      </tr>
  88.       </table>
  89.     </div>
  90.     
  91.     <hr />
  92.     <b>&lt;th&gt;&lt;td&gt; : 4.속성-height : 테이블 셀의 높이를 지정합니다.</b><br /><br />
  93.     HTML5에서 지원되지 않습니다.<br />
  94.     HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  95.     같은 행은 자동으로 같은 높이로 됩니다. <br />
  96.     대신 CSS를 사용합니다.<br />
  97.     css 문법 : &lt;th style="height:150px;"&gt;<br />
  98.     css 문법 : &lt;td style="height:90px;"&gt;<br />
  99.     <div id="ex_view2">
  100.       <table border=1>
  101.      <tr>
  102.       <th>      </th><th style="height:150px;">국어</th><th>영어</th><th>수학</th>
  103.      </tr>
  104.      <tr>
  105.       <th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  106.      </tr>
  107.      <tr>
  108.       <th>김민정</th><td> 72 </td><td> 45 </td><td style="height:90px;"> 94 </td>
  109.      </tr>
  110.      <tr>
  111.       <th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  112.      </tr>
  113.       </table>
  114.     </div>
  115.     
  116.     <hr />
  117.     <b>&lt;th&gt;&lt;td&gt; : 5.속성-align : 테이블 셀의 문자 행 정렬을 지정합니다.</b><br /><br />
  118.     HTML5에서 지원되지 않습니다.<br />
  119.     대신 CSS를 사용합니다.<br />
  120.     css 문법 : &lt;th style="text-align:right;"&gt;<br />
  121.     css 문법 : &lt;td style="text-align:right;"&gt;<br />
  122.   left - 왼쪽으로 테이블 정렬합니다. <br />
  123.   right - 오른쪽으로 테이블 정렬합니다. <br />
  124.   center - 중앙으로 테이블 정렬합니다. <br />
  125.   justify - 각 라인은 같은 폭을 갖도록 라인을 지정합니다.(Explorer만 지원) <br />
  126.   char - 특정 문자로 내용을 정렬한다고 하는데 모르겠음.<br />
  127.     <div id="ex_view2">
  128.       <table border=1  style="width:300px;">
  129.      <tr>
  130.       <th>      </th><th style="text-align:right;">국어</th><th>영어</th><th>수학</th>
  131.      </tr>
  132.      <tr>
  133.       <th>김선희</th><td style="text-align:center;"> 80 </td><td> 73 </td><td> 68 </td>
  134.      </tr>
  135.      <tr>
  136.       <th style="text-align:left;">김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  137.      </tr>
  138.      <tr>
  139.       <th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  140.      </tr>
  141.       </table>
  142.     </div>
  143.     
  144.     <hr />
  145.     <b>&lt;th&gt;&lt;td&gt; : 6.속성-valign : 테이블 셀의 문자 열 정렬을 지정합니다.</b><br /><br />
  146.     HTML5에서 지원되지 않습니다.<br />
  147.     대신 CSS를 사용합니다.<br />
  148.     css 문법 : &lt;th style="vertical-align:top;"&gt;<br />
  149.     css 문법 : &lt;td style="vertical-align:top;"&gt;<br />
  150.   top - 위로 테이블 정렬합니다. <br />
  151.   middle - 중앙로 테이블 정렬합니다. <br />
  152.   bottom - 아래으로 테이블 정렬합니다. <br />
  153.   baseline - 베이스라인이 가상선이로써 텍스트 라인을 시트에 대부분 맞춥니다.<br />
  154.   &lt;th&gt;&lt;td&gt; 태그에선 셀 개념이 낱개라서 baseline은 제대로 안되는것 같음
  155.     <div id="ex_view2">
  156.       <table border=1 style="width:300px; height:300px;">
  157.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  158.      </tr>
  159.      <tr>
  160.       <th style="vertical-align:bottom;">김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  161.      </tr>
  162.      <tr>
  163.       <th style="vertical-align:top;">김민정</th><td style="font-size:40px;">72</td><td> 45 </td><td> 94 </td>
  164.      </tr>
  165.      <tr>
  166.       <th style="vertical-align:bottom;">김현준</th><td style="font-size:40px;"> 65 </td><td> 98 </td><td> 55 </td>
  167.      </tr>
  168.       </table>
  169.     </div>
  170.     
  171.     <hr />
  172.     <b>&lt;th&gt;&lt;td&gt; : 7.속성-bgcolor : 테이블 셀의 배경색을 지정합니다.</b><br /><br />
  173.     HTML5에서 지원되지 않습니다.<br />
  174.     HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  175.     대신 CSS를 사용합니다.<br />
  176.     css 문법 : &lt;th style="background-color:blue;"&gt;<br />
  177.     css 문법 : &lt;td style="background-color:green;"&gt;<br />
  178.     <div id="ex_view2">
  179.       <table border=1>
  180.      <tr>
  181.       <th>      </th><th style="background-color:blue;">국어</th><th>영어</th><th>수학</th>
  182.      </tr>
  183.      <tr>
  184.       <th>김선희</th><td  style="background-color:green;"> 80 </td><td> 73 </td><td> 68 </td>
  185.      </tr>
  186.      <tr>
  187.       <th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  188.      </tr>
  189.      <tr>
  190.       <th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  191.      </tr>
  192.       </table>
  193.     </div>
  194.     
  195.     <hr />
  196.     <b>&lt;th&gt;&lt;td&gt; : 8.속성-그밖에 속성인 <br />
  197.     nowrap, scope, headers, abbr, axis, sorted, char, charoff 8가지의 속성기능 <br />
  198.     설명은 봤지만 필요할 것 같지 않아서 생략합니다.  </b><br />
  199.   </body>
  200.   
  201. </html>

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

위 소스 예제 보기


<th></th>

<td></td>


<tr테이블의 헤더셀을 정의하며,

기본적으로 중앙에 문자 정렬에 굵은 글씨체입니다.


<td테이블의 기본셀을 정의하며,

기본적으로 왼쪽에 문자 정렬에 일반 글씨체입니다.


<tr><td>는 속성이 거의 다 같습니다.
colspan, rowspan, width, height, align, valign, bgcolor 속성과 설명은 소스에 있습니다.

nowrap, scope, headers, abbr, axis, sorted, char, charoff 속성과 설명은 부실합니다.



:
BLOG main image

공지사항

카테고리

분류 (356)
main (1)
php5 (218)
HTML (36)
javascript (93)
IT 이론과 퍼온정보 (8)
깨작일상 (0)
곧 추가할 내용 (0)
추후 알아볼것들... (0)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Total :
Today : Yesterday :