<table></table> 테이블 만들기

| HTML/xhtml문법
2014. 1. 21. 20:22
  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


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

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

<table>-<tr>-<th></th><td></td> 테이블 헤더셀과 기본셀  (0) 2014.01.22
<table>-<tr></tr> 테이블 행  (0) 2014.01.21
<img></img>-<map></map>-<area><area> 이미지-이미지맵-클릭영역지정  (0) 2014.01.21
<a></a> 링크 연결 페이지  (0) 2014.01.20
<ul></ul>-<li></li> 목록 모양 스타일 - 목록 모양  (0) 2014.01.20
:
BLOG main image
by 로이데스트

공지사항

카테고리

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

태그목록

php변수검사 php배열키 php수반환 php시간 html5문법 css문법 dom문법 php문법 phpDB php배열포인터 javascript문법 php정렬 php시스템 php압축파일 php상수 정규표현식 php이미지 php배열값 php코딩 php배열 php파일 xhtml문법 html5 php문자열반환 web_portfolio php설정 portfolio complete

링크

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2025/02   »
일 월 화 수 목 금 토
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
Total :
Today : Yesterday :