간단한 css 테이블

카테고리 없음 2017. 11. 15. 03:53 |

간단한 css 테이블

 

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">  
  6. <title>Untitled Document</title>  
  7. <style>  
  8. #table {border-collapse:collapse; margin:0 auto}  
  9. #table td {border:1px solid #ccc; border-collapse:collapse; padding:5px; width:200px}  
  10. #table tr:nth-child(1) {background:#f7f7f7} /* tr:first-child 와 같음 */  
  11.   
  12. /* table 좌우선 없애기 */  
  13. #table td:first-child {border-left:0}  
  14. #table td:last-child {border-right:0}  
  15. </style>  
  16. </head>  
  17.   
  18. <body>  
  19. <table id="table" width="1000" border="0" cellspacing="0" cellpadding="0">  
  20.   <tr>  
  21.     <td>&nbsp;</td>  
  22.     <td>&nbsp;</td>  
  23.     <td>&nbsp;</td>  
  24.     <td>&nbsp;</td>  
  25.     <td>&nbsp;</td>  
  26.   </tr>  
  27.   <tr>  
  28.     <td>&nbsp;</td>  
  29.     <td>&nbsp;</td>  
  30.     <td>&nbsp;</td>  
  31.     <td>&nbsp;</td>  
  32.     <td>&nbsp;</td>  
  33.   </tr>  
  34.   <tr>  
  35.     <td>&nbsp;</td>  
  36.     <td>&nbsp;</td>  
  37.     <td>&nbsp;</td>  
  38.     <td>&nbsp;</td>  
  39.     <td>&nbsp;</td>  
  40.   </tr>  
  41.   <tr>  
  42.     <td>&nbsp;</td>  
  43.     <td>&nbsp;</td>  
  44.     <td>&nbsp;</td>  
  45.     <td>&nbsp;</td>  
  46.     <td>&nbsp;</td>  
  47.   </tr>  
  48.   <tr>  
  49.     <td>&nbsp;</td>  
  50.     <td>&nbsp;</td>  
  51.     <td>&nbsp;</td>  
  52.     <td>&nbsp;</td>  
  53.     <td>&nbsp;</td>  
  54.   </tr>  
  55. </table>  
  56.   
  57.   
  58. <br>  
  59. <br>  
  60.   
  61.   
  62.   
  63. <style>  
  64. #table2 {border-top:2px solid #666; border-bottom:1px solid #666; border-collapse:collapse; margin:0 auto}  
  65. #table2 td {border:1px solid #ccc; padding:5px; width:200px;}  
  66. #table2 tr:nth-child(1) {background:#f7f7f7} /* tr:first-child 와 같음 */  
  67.   
  68. /* table 좌우선 없애기 */  
  69. #table2 td:first-child {border-left:0}  
  70. #table2 td:last-child {border-right:0}  
  71.   
  72.   
  73. /* table 상하 선넣기위해 맨위, 맨아래 td선없애기 */  
  74. #table2 tr:first-child td {border-top:0}  
  75. #table2 tr:last-child td {border-bottom:0}  
  76. </style>  
  77. <table id="table2" width="1000" border="0" cellspacing="0" cellpadding="0">  
  78.   <tr>  
  79.     <td>&nbsp;</td>  
  80.     <td>&nbsp;</td>  
  81.     <td>&nbsp;</td>  
  82.     <td>&nbsp;</td>  
  83.     <td>&nbsp;</td>  
  84.   </tr>  
  85.   <tr>  
  86.     <td>&nbsp;</td>  
  87.     <td>&nbsp;</td>  
  88.     <td>&nbsp;</td>  
  89.     <td>&nbsp;</td>  
  90.     <td>&nbsp;</td>  
  91.   </tr>  
  92.   <tr>  
  93.     <td>&nbsp;</td>  
  94.     <td>&nbsp;</td>  
  95.     <td>&nbsp;</td>  
  96.     <td>&nbsp;</td>  
  97.     <td>&nbsp;</td>  
  98.   </tr>  
  99.   <tr>  
  100.     <td>&nbsp;</td>  
  101.     <td>&nbsp;</td>  
  102.     <td>&nbsp;</td>  
  103.     <td>&nbsp;</td>  
  104.     <td>&nbsp;</td>  
  105.   </tr>  
  106.   <tr>  
  107.     <td>&nbsp;</td>  
  108.     <td>&nbsp;</td>  
  109.     <td>&nbsp;</td>  
  110.     <td>&nbsp;</td>  
  111.     <td>&nbsp;</td>  
  112.   </tr>  
  113. </table>  
  114. </body>  
  115. </html>  

:

div table 테이블

카테고리 없음 2017. 11. 15. 03:40 |

div table 테이블

 

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">  
  6.   
  7. <title>Untitled Document</title>  
  8. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
  9. <script type="text/javascript">  
  10.   $(document).ready(function(){  
  11. $.extend($.fn,{  
  12.         equalizeHeights : function() {  
  13.   
  14.             var heights = this.map(function(idx, elm){  
  15.                 return $(elm).height();  
  16.             }).get();  
  17.   
  18.             return this.height(Math.max.apply(this,heights));  
  19.         }  
  20.     });  
  21.   
  22.     var i = 0,  
  23.         arr = [],  
  24.         lis = $('li'),  
  25.         rowsLen = lis.length / 1;  
  26.   
  27.     for(; i < rowsLen; i++) {  
  28.         var rows = i * 1;  
  29.         arr[i] = lis.eq(rows).next().andSelf();  
  30.         arr[i].equalizeHeights();  
  31.     }  
  32.   });  
  33. </script>  
  34.   
  35. <style>  
  36. div, ul, li {  
  37.     list-style:none;  
  38.     box-sizing: border-box;  
  39.     list-style-position: inside;  
  40.     margin:0;  
  41.     font-size:12px;  
  42.     color:#000;  
  43.     overflow:hidden;  
  44. }  
  45. #rprice {  
  46.     width:700px;  
  47.     border-top:2px solid #333;  
  48.     margin:0 auto;  
  49. }  
  50. #rprice ul {  
  51.     border-bottom:1px solid #666;  
  52.     float:left;  
  53.     width:100%;  
  54.     padding:0px;  
  55.     /*display:flex; */  
  56. }  
  57.   
  58. #rprice .title li {  
  59.     background:#ebebeb !important;  
  60.     color:#000 !important;  
  61.     font-weight:bold;  
  62.     font-size:12px;  
  63. }  
  64. #rprice ul li {  
  65.     float:left;  
  66.     border-right:1px solid #ccc;  
  67.     width: calc(550px/3);  
  68.     padding:5px;  
  69.     text-align:center;  
  70.       
  71. }  
  72. #rprice ul li:nth-child(1) {  
  73.     background:#FFFFCC;  
  74.     width:150px;  
  75.     color:#FF6633;  
  76. }  
  77. #rprice ul li:last-child {  
  78.     border-right:0  
  79. }  
  80. </style>  
  81. </head>  
  82. <body>  
  83.   
  84.   
  85. <div id="rprice">  
  86.   <ul class="title">  
  87.     <li>비고</li>  
  88.     <li>1기간요금을 구해봅시다 다음줄로 넘겨요</li>  
  89.     <li>2기간요금</li>  
  90.     <li>3기간요금</li>  
  91.   </ul>  
  92.   <ul>  
  93.     <li>디럭스</li>  
  94.     <li>1,500,000원 [네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파 </li>  
  95.     <li>2,000,000원</li>  
  96.     <li>3,000,000원</li>  
  97.   </ul>  
  98.   <ul>  
  99.     <li>스위트</li>  
  100.     <li>1,500,000원[네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파</li>  
  101.     <li>2,000,000원</li>  
  102.     <li>3,000,000원</li>  
  103.   </ul>  
  104.   <ul>  
  105.     <li>풀빌라</li>  
  106.     <li>1,500,000원</li>  
  107.     <li>2,000,000원</li>  
  108.     <li>3,000,000원</li>  
  109.   </ul>  
  110. </div>  
  111. </body>  
  112. </html>  

:

css table 테이블

카테고리 없음 2017. 11. 15. 03:16 |

css table 테이블

 

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">  
  6. <title>Untitled Document</title>  
  7. <style>  
  8. #table {border-top:2px solid #666; border-bottom:1px solid #ccc; margin:0 auto; } /* table 테두리, cellspacing이 필요하면 border-spacing: 8px;border-collapse: separate; */  
  9. #table td {border-top:1px solid #ebebeb; border-left:1px solid #ebebeb; padding:5px} /* 전체 td 적용, cellpadding 은 padding으로 처리 */  
  10. #table td:first-child {border-left:0} /* 첫번째 td 왼쪽 테두리 없애기 */  
  11. #table tr:first-child {background:#f7f7f7 !important} /* 첫번째 tr 백그라운드 - th역활 !important 는 다른css보다 우선적용명령*/  
  12. #table tr:first-child td {border-top:0;  border-left-color:#ccc} /* 첫번째 tr 의 td 사이 색상변경 */  
  13. #table tr:nth-child(2) td {border-top-color:#ccc;} /* 첫번째 tr의 bottom 테두리를 위하여, 2번째 tr의 td 상단테두리 색상변경 */  
  14. #table tr:last-child {background:#f7f7f7  !important} /* 마지막 tr 백그라운드 - 합계등이 필요할때 */  
  15. #table tr:last-child td {border-top-color:#ccc; border-left-color:#ccc} /* 마지막 tr의 td 사이 색상변경 */  
  16.   
  17. /* tr 짝수 홀수 */  
  18. #table tr:nth-child(odd) {background:#fffff4;}  
  19. #table tr:nth-child(even) {background:#fefdfd;}  
  20.   
  21. /* tr 마우스오버 */  
  22. #table tr:hover {background:#f3f9fe}  
  23.   
  24. /* tr 클릭시 배경변경 */  
  25. #table tr.selected {background:red}  
  26. </style>  
  27.   
  28.   
  29. <!-- tr클릭시 배경변경 스크립트 -->  
  30. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
  31. <script>  
  32. $(document).ready(function(){  
  33.   
  34. // 여러개 tr을 선택할때  
  35. // $("#table tr").click(function(){  
  36. //    $(this).toggleClass("selected");  
  37. // });  
  38.   
  39.   
  40. // 한개만의 tr을 선택할때  
  41. $("#table tr").click(function() {  
  42.     var selected = $(this).hasClass("selected");  
  43.     $("#table tr").removeClass("selected");  
  44.     if(!selected)  
  45.             $(this).addClass("selected");  
  46. });  
  47.   
  48. });  
  49. </script>  
  50. <!-- tr클릭시 배경변경 스크립트 끝 -->  
  51. </head>  
  52.   
  53. <body>  
  54. <table id="table" width="800" border="0" cellspacing="0" cellpadding="0">  
  55.   <tr>  
  56.     <td>&nbsp;</td>  
  57.     <td>&nbsp;</td>  
  58.     <td>&nbsp;</td>  
  59.     <td>&nbsp;</td>  
  60.     <td>&nbsp;</td>  
  61.   </tr>  
  62.   <tr>  
  63.     <td>&nbsp;</td>  
  64.     <td>&nbsp;</td>  
  65.     <td>&nbsp;</td>  
  66.     <td>&nbsp;</td>  
  67.     <td>&nbsp;</td>  
  68.   </tr>  
  69.   <tr>  
  70.     <td>&nbsp;</td>  
  71.     <td>&nbsp;</td>  
  72.     <td>&nbsp;</td>  
  73.     <td>&nbsp;</td>  
  74.     <td>&nbsp;</td>  
  75.   </tr>  
  76.   <tr>  
  77.     <td>&nbsp;</td>  
  78.     <td>&nbsp;</td>  
  79.     <td>&nbsp;</td>  
  80.     <td>&nbsp;</td>  
  81.     <td>&nbsp;</td>  
  82.   </tr>  
  83.     <tr>  
  84.     <td>&nbsp;</td>  
  85.     <td>&nbsp;</td>  
  86.     <td>&nbsp;</td>  
  87.     <td>&nbsp;</td>  
  88.     <td>&nbsp;</td>  
  89.   </tr>  
  90.   <tr>  
  91.     <td>&nbsp;</td>  
  92.     <td>&nbsp;</td>  
  93.     <td>&nbsp;</td>  
  94.     <td>&nbsp;</td>  
  95.     <td>&nbsp;</td>  
  96.   </tr>  
  97.   <tr>  
  98.     <td>&nbsp;</td>  
  99.     <td>&nbsp;</td>  
  100.     <td>&nbsp;</td>  
  101.     <td>&nbsp;</td>  
  102.     <td>&nbsp;</td>  
  103.   </tr>  
  104.   <tr>  
  105.     <td>&nbsp;</td>  
  106.     <td>&nbsp;</td>  
  107.     <td>&nbsp;</td>  
  108.     <td>&nbsp;</td>  
  109.     <td>&nbsp;</td>  
  110.   </tr>  
  111.   <tr>  
  112.     <td>&nbsp;</td>  
  113.     <td>&nbsp;</td>  
  114.     <td>&nbsp;</td>  
  115.     <td>&nbsp;</td>  
  116.     <td>&nbsp;</td>  
  117.   </tr>  
  118.   <tr>  
  119.     <td>&nbsp;</td>  
  120.     <td>&nbsp;</td>  
  121.     <td>&nbsp;</td>  
  122.     <td>&nbsp;</td>  
  123.     <td>&nbsp;</td>  
  124.   </tr>  
  125.   <tr>  
  126.     <td>&nbsp;</td>  
  127.     <td>&nbsp;</td>  
  128.     <td>&nbsp;</td>  
  129.     <td>&nbsp;</td>  
  130.     <td>&nbsp;</td>  
  131.   </tr>  
  132.   <tr>  
  133.     <td>&nbsp;</td>  
  134.     <td>&nbsp;</td>  
  135.     <td>&nbsp;</td>  
  136.     <td>&nbsp;</td>  
  137.     <td>&nbsp;</td>  
  138.   </tr>  
  139. </table>  
  140.   
  141.   
  142.   
  143. </body>  
  144. </html>  

:

티스토리툴바