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; 사용법<br />
  9.     &lt;table&gt; 사용 용도는 HTML 테이블을 정의합니다. <br />
  10.     html 테이블 &lt;table&gt; 요소와 하나 이상의 <br />
  11.     &lt;tr&gt;, &lt;th&gt;, &lt;td&gt; 요소로 구성됩니다.<br />
  12.     <br />
  13.     &lt;tr&gt; 요소는 테이블의 행을 정의하고 <br />
  14.     &lt;th&gt; 요소는 테이블 헤더를 정의하고 <br />
  15.     &lt;td&gt; 요소는 테이블 셀을 정의합니다. <br />
  16.     <br />
  17.     &lt;caption&gt;, &lt;colgroup&gt;, &lt;col&gt;, <br />
  18.     &lt;thead&gt;, &lt;tbody&gt;, &lt;tfoot&gt;요소를 포함해서<br />
  19.     더 다양한 html 테이블을 만들수 있습니다.<br />
  20.     
  21.     ( 속성-border, align, bgcolor, width, cellpadding,  <br />
  22.     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  23.     cellspacing, rules, frame, summary, sortable )<br />
  24.     <hr />
  25.     <b>&lt;table&gt; : 1.속성-border : 테이블의 테두리의 폭을 지정합니다.</b><br /><br />
  26.     <div id="ex_view2">
  27.       <table border=1>
  28.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  29.      </tr>
  30.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  31.      </tr>
  32.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  33.      </tr>
  34.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  35.      </tr>
  36.       </table>
  37.     </div>
  38.     
  39.     <hr />
  40.     <b>&lt;table&gt; : 2.속성-align : 테이블의 정렬을 지정합니다.</b><br /><br />
  41.     HTML5에서 지원되지 않습니다.<br />
  42.     HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  43.     대신 CSS를 사용합니다.<br />
  44.     css 문법 : &lt;table style="float:right;"&gt;<br />
  45.   left - 왼쪽으로 테이블 정렬합니다. <br />
  46.   right - 오른쪽으로 테이블 정렬합니다. <br />
  47.   margin:0 auto; - 중간으로 테이블 정렬합니다. <br />
  48.   (margin:0 auto 를 사용해야할땐 width를 지정을 권고)
  49.     <div id="ex_view2">
  50.       <table border=1 style="margin:0 auto;">
  51.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  52.      </tr>
  53.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  54.      </tr>
  55.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  56.      </tr>
  57.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  58.      </tr>
  59.       </table>
  60.     </div>
  61.     
  62.     <hr />
  63.     <b>&lt;table&gt; : 3.속성-bgcolor : 테이블의 배경색을 지정합니다.</b><br /><br />
  64.     HTML5에서 지원되지 않습니다.<br />
  65.     HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  66.     대신 CSS를 사용합니다.<br />
  67.     css 문법 : &lt;table style="background-color:red;"&gt;<br />
  68.     <div id="ex_view2">
  69.       <table border=1 style="background-color:red;">
  70.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  71.      </tr>
  72.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  73.      </tr>
  74.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  75.      </tr>
  76.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  77.      </tr>
  78.       </table>
  79.     </div>
  80.     
  81.     <hr />
  82.     <b>&lt;table&gt; : 4.속성-width : 테이블의 넓이를 지정합니다.</b><br /><br />
  83.     HTML5에서 지원되지 않습니다.<br />
  84.     대신 CSS를 사용합니다.<br />
  85.     css 문법 : &lt;table style="width:300px;"&gt;<br />
  86.     <div id="ex_view2">
  87.       <table border=1 style="width:300px;">
  88.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  89.      </tr>
  90.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  91.      </tr>
  92.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  93.      </tr>
  94.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  95.      </tr>
  96.       </table>
  97.     </div>
  98.     
  99.     <hr />
  100.     <b>&lt;table&gt; : 5.속성-cellpadding : 테이블의 셀 벽 및 ><br />
  101.     셀 내용 사이 픽셀 공간을 지정합니다.</b><br /><br />
  102.     HTML5에서 지원되지 않습니다.<br />
  103.     대신 CSS를 사용합니다.<br />
  104.     css 문법은 아래 css와 같습니다.(소스참조)<br />
  105.     <style type="text/css">
  106.     <!--
  107.     .cellpadding_table th{padding:10px;}
  108.     .cellpadding_table td{padding:10px;}
  109.     -->
  110.     </style>
  111.     <div id="ex_view2" class="cellpadding_table">
  112.       <table border=1>
  113.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  114.      </tr>
  115.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  116.      </tr>
  117.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  118.      </tr>
  119.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  120.      </tr>
  121.       </table>
  122.     </div>
  123.     
  124.     <hr />
  125.     <b>&lt;table&gt; : 6.속성-cellspacing : 테이블의 셀사이의 공백을 지정합니다. </b><br /><br />
  126.     HTML5에서 지원되지 않습니다.<br />
  127.     대신 CSS를 사용합니다.<br />
  128.     css 문법 : &lt;table style="border-spacing:10px;"&gt;<br />
  129.     <div id="ex_view2">
  130.       <table border=1 style="border-spacing:10px;">
  131.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  132.      </tr>
  133.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  134.      </tr>
  135.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  136.      </tr>
  137.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  138.      </tr>
  139.       </table>
  140.     </div>
  141.     
  142.     <hr style="clear:center" />
  143.     <b>&lt;table&gt; : 7.속성-rules : 테이블의 내부 테두리 부분을 설정합니다.</b><br /><br />
  144.     HTML5에서 지원되지 않습니다.<br />
  145.     대신 CSS를 사용합니다.<br />
  146.     none rows cols all groups(thead, tbody, tfoot, colgroup요소 경계표시)<br />
  147.     css 문법은 아래 css와 같습니다.(소스참조)<br />
  148.     (css로 해본 결과...빡셈; 그냥 저거 있는게 나을것 같은데..쩝)<br /><br />
  149.     <style type="text/css">
  150.     <!--
  151.      /* div 여백 */
  152.     .rules_table{
  153.     padding:10px;
  154.     }
  155.     /* 테이블 */
  156.     .rules_table table{
  157.     border-collapse:collapse; 
  158.     border-top-width:0px; 
  159.     border-right-width:0px; 
  160.     border-bottom-width:0px; 
  161.     border-left-width:0px;
  162.     }
  163.     /* th 끝에 오른쪽 */
  164.      .del_line_right{
  165.       border-right:0px;
  166.      }
  167.     /* th 아래 바닥 */
  168.      .del_line_bottom{
  169.       border-bottom:0px;
  170.      }
  171.      
  172.      /* none */
  173.     .rules_none_table th{
  174.     border:0px; 
  175.     }
  176.     .rules_none_table td{
  177.     border:0px; 
  178.     }
  179.      /* rows */
  180.     .rules_rows_table th{
  181. border-top-width:0px; 
  182. border-right-width:0px; 
  183. border-left-width:0px;
  184.     }
  185.     .rules_rows_table td{
  186.     border-right-width:0px; 
  187.     border-bottom-width:0px; 
  188.     border-left-width:0px;
  189.     }
  190.     /* cols */
  191.     .rules_cols_table th{
  192. border-top-width:0px; 
  193. border-bottom-width:0px; 
  194. border-left-width:0px;
  195.     }
  196.     .rules_cols_table td{
  197.     border-top-width:0px; 
  198.     border-bottom-width:0px; 
  199.     border-right-width:0px;
  200.     }
  201.     /* all  */
  202.     .rules_all_table th{
  203. border-top-width:0px; 
  204. border-left-width:0px;
  205.     }
  206.     .rules_all_table td{
  207.     border-bottom-width:0px; 
  208.     border-right-width:0px;
  209.     }
  210.     /* groups 이건 눈으로 보질 못해서 생략;;" */
  211.     -->
  212.     </style>
  213.     <div id="ex_view2" class="rules_table" style="float:left;">
  214.     rules = none를 css로<br />
  215.       <table border=1 class="rules_none_table">
  216.      <tr><th>      </th><th>국어</th><th>영어</th><th class="del_line_right">수학</th>
  217.      </tr>
  218.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  219.      </tr>
  220.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  221.      </tr>
  222.      <tr><th class="del_line_bottom">김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  223.      </tr>
  224.       </table>
  225.     </div>
  226.     <div id="ex_view2" class="rules_table" style="float:left;">
  227.     rules = rows를 css로<br />
  228.       <table border=1 class="rules_rows_table">
  229.      <tr><th>      </th><th>국어</th><th>영어</th><th class="del_line_right">수학</th>
  230.      </tr>
  231.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  232.      </tr>
  233.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  234.      </tr>
  235.      <tr><th class="del_line_bottom">김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  236.      </tr>
  237.       </table>
  238.     </div>
  239.     <div id="ex_view2" class="rules_table" style="clear:left;float:left;">
  240.     rules = cols를 css로<br />
  241.       <table border=1 class="rules_cols_table">
  242.      <tr><th>      </th><th>국어</th><th>영어</th><th class="del_line_right">수학</th>
  243.      </tr>
  244.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  245.      </tr>
  246.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  247.      </tr>
  248.      <tr><th class="del_line_bottom">김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  249.      </tr>
  250.       </table>
  251.     </div>
  252.     <div id="ex_view2" class="rules_table" style="float:left;">
  253.     rules = all를 css로<br />
  254.       <table border=1 class="rules_all_table">
  255.      <tr><th>      </th><th>국어</th><th>영어</th><th class="del_line_right">수학</th>
  256.      </tr>
  257.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  258.      </tr>
  259.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  260.      </tr>
  261.      <tr><th class="del_line_bottom">김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  262.      </tr>
  263.       </table>
  264.     </div>
  265.     
  266.     <hr style="clear:left;" />
  267.     <b>&lt;table&gt; : 8.속성-frame : 테이블의 외부 테두리 부분 view를 지정합니다.</b><br /><br />
  268.     HTML5에서 지원되지 않습니다.<br />
  269.     대신 CSS를 사용합니다.<br />
  270.     void, above, below, hsides, lhs, rhs, vsides, border(box)<br />
  271.     css 문법은 아래 css와 같습니다.(소스참조)<br />
  272.     (css로 해본 결과...빡셈; 그냥 저거 있는게 나을것 같은데..쩝)<br /><br />
  273.     <style type="text/css">
  274.     <!--
  275. .frame_table th{
  276. border-top-width:0px; 
  277. border-right-width:0px; 
  278. border-bottom-width:0px; 
  279. border-left-width:0px;
  280. }
  281. .frame_table td{
  282. border-top-width:0px; 
  283. border-right-width:0px; 
  284. border-bottom-width:0px; 
  285. border-left-width:0px;
  286. }
  287.     .frame_void_table{
  288. border-top-style: hidden;
  289. border-bottom-style: hidden;
  290. border-left-style: hidden;
  291. border-right-style: hidden;
  292. }
  293.     .frame_above_table{
  294. border-top-style: solid;
  295. border-bottom-style: hidden;
  296. border-left-style: hidden;
  297. border-right-style: hidden;
  298. }
  299.     .frame_below_table{
  300. border-top-style: hidden;
  301. border-bottom-style: solid;
  302. border-left-style: hidden;
  303. border-right-style: hidden;
  304. }
  305.     .frame_hsides_table{
  306. border-top-style: solid;
  307. border-bottom-style: solid;
  308. border-left-style: hidden;
  309. border-right-style: hidden;
  310. }
  311.     .frame_lhs_table{
  312. border-top-style: hidden;
  313. border-bottom-style: hidden;
  314. border-left-style: solid;
  315. border-right-style: hidden;
  316. }
  317.     .frame_rhs_table{
  318. border-top-style: hidden;
  319. border-bottom-style: hidden;
  320. border-left-style: hidden;
  321. border-right-style: solid;
  322. }
  323.     .frame_vsides_table{
  324. border-top-style: hidden;
  325. border-bottom-style: hidden;
  326. border-left-style: solid;
  327. border-right-style: solid;
  328. }
  329.     .frame_border_table{
  330.     /* box */
  331. border-top-style: solid;
  332. border-bottom-style: solid;
  333. border-left-style: solid;
  334. border-right-style: solid;
  335. }
  336.     -->
  337.     </style>
  338.     <div id="ex_view2" class="frame_table" style="float:left; padding:10px;">
  339.     frame = void를 css로
  340.       <table border=1 class="frame_void_table">
  341.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  342.      </tr>
  343.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  344.      </tr>
  345.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  346.      </tr>
  347.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  348.      </tr>
  349.       </table>
  350.     </div>
  351.     
  352.     <div id="ex_view2" class="frame_table" style="float:left; padding:10px;">
  353.     frame = above를 css로
  354.       <table border=1 class="frame_above_table">
  355.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  356.      </tr>
  357.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  358.      </tr>
  359.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  360.      </tr>
  361.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  362.      </tr>
  363.       </table>
  364.     </div>
  365.     
  366.     <div id="ex_view2" class="frame_table" style="clear:left; float:left; padding:10px;">
  367.     frame = below를 css로
  368.       <table border=1 class="frame_below_table">
  369.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  370.      </tr>
  371.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  372.      </tr>
  373.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  374.      </tr>
  375.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  376.      </tr>
  377.       </table>
  378.     </div>
  379.     
  380.     <div id="ex_view2" class="frame_table" style="float:left; padding:10px;">
  381.     frame = hsides를 css로
  382.       <table border=1 class="frame_hsides_table">
  383.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  384.      </tr>
  385.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  386.      </tr>
  387.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  388.      </tr>
  389.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  390.      </tr>
  391.       </table>
  392.     </div>
  393.     
  394.     <div id="ex_view2" class="frame_table" style="clear:left; float:left; padding:10px;">
  395.     frame = lhs를 css로
  396.       <table border=1 class="frame_lhs_table">
  397.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  398.      </tr>
  399.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  400.      </tr>
  401.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  402.      </tr>
  403.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  404.      </tr>
  405.       </table>
  406.     </div>
  407.     
  408.     <div id="ex_view2" class="frame_table" style="float:left; padding:10px;">
  409.     frame = rhs를 css로
  410.       <table border=1 class="frame_rhs_table">
  411.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  412.      </tr>
  413.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  414.      </tr>
  415.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  416.      </tr>
  417.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  418.      </tr>
  419.       </table>
  420.     </div>
  421.     
  422.     <div id="ex_view2" class="frame_table" style="clear:left; float:left; padding:10px;">
  423.     frame = vsides를 css로
  424.       <table border=1 class="frame_vsides_table">
  425.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  426.      </tr>
  427.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  428.      </tr>
  429.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  430.      </tr>
  431.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  432.      </tr>
  433.       </table>
  434.     </div>
  435.     
  436.     <div id="ex_view2" class="frame_table" style="float:left; padding:10px;">
  437.     frame = border(box)를 css로
  438.       <table border=1 class="frame_border_table">
  439.      <tr><th>      </th><th>국어</th><th>영어</th><th>수학</th>
  440.      </tr>
  441.      <tr><th>김선희</th><td> 80 </td><td> 73 </td><td> 68 </td>
  442.      </tr>
  443.      <tr><th>김민정</th><td> 72 </td><td> 45 </td><td> 94 </td>
  444.      </tr>
  445.      <tr><th>김현준</th><td> 65 </td><td> 98 </td><td> 55 </td>
  446.      </tr>
  447.       </table>
  448.     </div>
  449.     
  450.     <hr style="clear:left;" />
  451.     <b>9. summary - 테이블의 내용의 요약을 지정하고<br />
  452.     HTML5에서 지원되지 않는다고 하는데...(확인불가)</b><br />
  453.     <br />
  454.     <b>10. sortable 속성은 테이블을 정렬 할 수 있다는 것을 <br />
  455.     나타난다고 하는데...확인 불가</b><br />
  456.   </body>
  457. </html>

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

위 소스 예제 보기


<table></table>


<table테이블 만듭니다.

<table> border, align, bgcolor, width, cellpadding,cellspacing, rules, frame
속성과 설명은 소스에 있습니다.
 summary, sortable 속성과 설명은 부실합니다.


Global Attributes 지원합니다.

Global Event Attributes 지원합니다.


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


:
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 :