API tools faq
paste
Advertisement
amjadArabia

Table/Products

amjadArabia
Jan 20th, 2020
429
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 12.14 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <body>
  4.  
  5.     <head>
  6.         <title>My tables</title>
  7.  
  8.         <style>
  9.             body {
  10.                 background: rgb(232, 234, 238);
  11.             }
  12.  
  13.             /* this is style for table 1*/
  14.  
  15.             .table1 {
  16.  
  17.                 background: rgb(156, 218, 95);
  18.                 width: 100%;
  19.  
  20.             }
  21.  
  22.             .table1 tr td {
  23.                 color: black;
  24.                 font-size: 20px;
  25.                 padding: 30px;
  26.                 float: left;
  27.                 margin: 20px;
  28.  
  29.             }
  30.             .table1 tr td:hover
  31.             {
  32.                 border-radius: 25px;
  33.                 background: white;
  34.             }
  35.  
  36.             .table1 img {
  37.                 width: 100px;
  38.                 ;
  39.                 height: 100px;
  40.                 margin-left: 70px;
  41.             }
  42.  
  43.             /*********************************/
  44.             /*Style for left table = table 2*/
  45.             .table2 {
  46.                 margin-top: 16px;
  47.                 background: lightgrey;
  48.                 width: 10%;
  49.                 height: max-content;
  50.  
  51.  
  52.             }
  53.  
  54.             .table2 thead tr td {
  55.                 font-size: 22px;
  56.                 font-weight: bold;
  57.  
  58.                 padding-top: 10px;
  59.             }
  60.  
  61.             .table2 tbody tr td {
  62.                 padding: 25px;
  63.                 font-size: 20px;
  64.                 margin: 30px;
  65.                 text-align: center;
  66.             }
  67.  
  68.             .table2 tfoot tr td {
  69.                 border: solid black 2px;
  70.                 font-weight: bold;
  71.                 font-size: 22px;
  72.  
  73.                 border-style: dotted;
  74.  
  75.             }
  76.             .table2 tbody tr td:hover{
  77.                 background: tomato;
  78.                 border-radius: 30px;
  79.             }
  80.             /**********************************************/
  81.             /*Style for table 3*/
  82.             .table3 {
  83.                 border-collapse: collapse;
  84.                 margin-left: 14%;
  85.                 margin-top: -25%;
  86.  
  87.             }
  88.  
  89.             .table3 tr td {
  90.                 padding: 5px;
  91.                 text-align: center;
  92.                 border: 1px solid black;
  93.                 font-size: 18px;
  94.  
  95.             }
  96.  
  97.             .table3 thead tr td {
  98.                 font-size: 20px;
  99.                 font-weight: bold;
  100.             }
  101.  
  102.             input {
  103.                 width: 120px;
  104.             }
  105.  
  106.             .table3 tbody tr:nth-child(odd) {
  107.                 background: rgb(140, 140, 201);
  108.             }
  109.             .table3 tr td:hover
  110.             {
  111.                 background: thistle;
  112.             }
  113.  
  114.             .table3 img {
  115.                 width: 25px;
  116.                 height: 20px;
  117.             }
  118.             .table3 img:hover
  119.             {
  120.                 width:35px;
  121.                 height:30px;
  122.                
  123.             }
  124.  
  125.             /*************************************************/
  126.             /*Style for table 4*/
  127.             .table4  {
  128.                 margin-left: 57%;
  129.                 margin-top: 1%;
  130.             }
  131.             .table4 button:hover
  132.             {
  133.                 background: thistle;
  134.             }
  135.            
  136.  
  137.             /***********************************************/
  138.             /* Style for table 5*/
  139.             .table5 {
  140.                 margin-left: 70%;
  141.                 margin-top: -14%;
  142.                 max-width: 25%;
  143.             }
  144.  
  145.             .table5 img {
  146.                 width: 25px;
  147.                 height: 20px;
  148.             }
  149.  
  150.             .img-table img {
  151.                 width: 150px;
  152.                 height: 100px;
  153.                 margin: 10px 100px;
  154.  
  155.             }
  156.            
  157.  
  158.             fieldset {
  159.                 background: white;
  160.             }
  161.  
  162.             /*************************************************/
  163.             /*Style for table 6*/
  164.             .table6 {
  165.                 margin-top: -5%;
  166.                 margin-left: 14%;
  167.                 border-collapse: collapse;
  168.             }
  169.  
  170.             .table6 tr td {
  171.                 border: 6px solid black;
  172.             }
  173.  
  174.             button {
  175.                 width: 100%;
  176.  
  177.             }
  178.             button:hover
  179.             {
  180.                 background: rgb(124, 71, 124);
  181.             }
  182.         </style>
  183.     </head>
  184.  
  185.     <div class="table1">
  186.         <table>
  187.  
  188.             <tr>
  189.                 <th><img class="top-image" src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\my_logo.png"></th>
  190.                 <td>File</td>
  191.                 <td>Settings</td>
  192.                 <td>Tools</td>
  193.                 <td>About</td>
  194.             </tr>
  195.         </table>
  196.     </div>
  197.  
  198.     <div class="table2">
  199.         <table>
  200.             <thead>
  201.                 <tr>
  202.                     <td>Page Options:</td>
  203.  
  204.                 </tr>
  205.                 <tr>
  206.                     <td>
  207.                         <hr>
  208.                     </td>
  209.                 </tr>
  210.  
  211.             </thead>
  212.             <tbody>
  213.                 <tr>
  214.                     <td>Sign Up</td>
  215.                 </tr>
  216.                 <tr>
  217.                     <td>Sign in</td>
  218.                 </tr>
  219.                 <tr>
  220.                     <td>Contact Us</td>
  221.                 </tr>
  222.                 <tr>
  223.                     <td>Help</td>
  224.                 </tr>
  225.             </tbody>
  226.  
  227.             <tfoot>
  228.                 <tr>
  229.                     <td>Enjoy!</td>
  230.                 </tr>
  231.             </tfoot>
  232.  
  233.         </table>
  234.     </div>
  235.  
  236.     <table class="table3">
  237.         <thead>
  238.             <tr>
  239.                 <td>check all</td>
  240.                 <td>ID</td>
  241.                 <td colspan="2">Full Name</td>
  242.                 <td>Date</td>
  243.                 <td>Time</td>
  244.                 <td>Edit</td>
  245.             </tr>
  246.  
  247.             <tr>
  248.                 <td><input type="checkbox"></td>
  249.                 <td> <input list="browsers" name="browser">
  250.                     <datalist id="browsers">
  251.                         <option value="Safari">
  252.                     </datalist>
  253.                 </td>
  254.                 <td> <input list="browsers" name="browser">
  255.                     <datalist id="browsers">
  256.                         <option value="Safari">
  257.                     </datalist>
  258.                 </td>
  259.                 <td> <input list="browsers" name="browser">
  260.                     <datalist id="browsers">
  261.                         <option value="Safari">
  262.                     </datalist>
  263.                 </td>
  264.                 <td> <input list="browsers" name="browser">
  265.                     <datalist id="browsers">
  266.                         <option value="Safari">
  267.                     </datalist>
  268.                 </td>
  269.                 <td> <input list="browsers" name="browser">
  270.                     <datalist id="browsers">
  271.                         <option value="Safari">
  272.                     </datalist>
  273.                 </td>
  274.                 <td></td>
  275.  
  276.  
  277.  
  278.             </tr>
  279.  
  280.         </thead>
  281.  
  282.  
  283.         <tbody>
  284.             <tr>
  285.                 <td><input type="checkbox"></td>
  286.                 <td>1</td>
  287.                 <td>Ronaldo</td>
  288.                 <td>Cris</td>
  289.                 <td>1 Jun 2019</td>
  290.                 <td>11:25</td>
  291.                 <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\edit-user.png"></td>
  292.             </tr>
  293.             <tr>
  294.                 <td><input type="checkbox"></td>
  295.                 <td>2</td>
  296.                 <td>Ronaldo</td>
  297.                 <td>Cris</td>
  298.                 <td>1 Jun 2019</td>
  299.                 <td>11:25</td>
  300.                 <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\edit-user.png"></td>
  301.             </tr>
  302.             <tr>
  303.                 <td><input type="checkbox"></td>
  304.                 <td>3</td>
  305.                 <td>Ronaldo</td>
  306.                 <td>Cris</td>
  307.                 <td>1 Jun 2019</td>
  308.                 <td>11:25</td>
  309.                 <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\edit-user.png"></td>
  310.             </tr>
  311.             <tr>
  312.                 <td><input type="checkbox"></td>
  313.                 <td>4</td>
  314.                 <td>Ronaldo</td>
  315.                 <td>Cris</td>
  316.                 <td>1 Jun 2019</td>
  317.                 <td>11:25</td>
  318.                 <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\edit-user.png"></td>
  319.             </tr>
  320.             <tr>
  321.                 <td><input type="checkbox"></td>
  322.                 <td>5</td>
  323.                 <td>Ronaldo</td>
  324.                 <td>Cris</td>
  325.                 <td>1 Jun 2019</td>
  326.                 <td>11:25</td>
  327.                 <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\edit-user.png"></td>
  328.             </tr>
  329.         </tbody>
  330.  
  331.     </table>
  332.  
  333.     <div class=table4>
  334.         <table>
  335.             <tr>
  336.                 <td>Pages:</td>
  337.                 <td><button>1</button></td>
  338.                 <td><button>2</button></td>
  339.                 <td><button>3</button></td>
  340.                 <td>...</td>
  341.             </tr>
  342.         </table>
  343.     </div>
  344.  
  345.     <div class=table5>
  346.      
  347.         <fieldset>
  348.  
  349.             <legend><img style="width:25px; height:20px;"
  350.                    src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\user_image.png">User Detail:</legend>
  351.  
  352.             <table>
  353.  
  354.                 <tr>
  355.                     <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\id_image.png"></td>
  356.                     <td>User ID:</td>
  357.                     <td>1236544562</td>
  358.                 </tr>
  359.                 <tr>
  360.                     <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\user_name.png"></td>
  361.                     <td>User Name:</td>
  362.                     <td>User Full Name</td>
  363.                 </tr>
  364.                 <tr>
  365.                     <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\phone_image.png"></td>
  366.                     <td>User Phone:</td>
  367.                     <td>054-665665566</td>
  368.                 </tr>
  369.                 <tr>
  370.                     <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\email_image.png"></td>
  371.                     <td>User Email:</td>
  372.                     <td>User@Email.com</td>
  373.                 </tr>
  374.  
  375.             </table>
  376.             <table class="img-table">
  377.                 <tr>
  378.                     <td><img src="C:\Users\arabi\Desktop\full-stack\html\table-exersice\id_card_image.png"></td>
  379.                 </tr>
  380.             </table>
  381.         </fieldset>
  382.  
  383.     </div>
  384.  
  385.  
  386.     <table class="table6">
  387.         <tr>
  388.             <td colspan="4" style="height:35px"> </td>
  389.         </tr>
  390.         <tr>
  391.             <td><button style="background: rgb(158, 59, 59);">DEL</button></td>
  392.             <td><button style="background:rgb(158, 59, 59);">AC</button></td>
  393.             <td><button>*</button></td>
  394.             <td><button>/</button></td>
  395.         </tr>
  396.         <tr>
  397.             <td><button>7</button></td>
  398.             <td><button>8</button></td>
  399.             <td><button>9</button></td>
  400.             <td><button>-</button></td>
  401.  
  402.         </tr>
  403.         <tr>
  404.             <td><button>4</button></td>
  405.             <td><button>5</button></td>
  406.             <td><button>6</button></td>
  407.             <td><button>+</button></td>
  408.         </tr>
  409.         <tr>
  410.             <td><button>1</button></td>
  411.             <td><button>2</button></td>
  412.             <td><button>3</button></td>
  413.             <td rowspan="2"><button style="height:50px; background: yellowgreen;">=</button></td>
  414.  
  415.         </tr>
  416.         <tr>
  417.             <td colspan="2"><button>0</button></td>
  418.             <td><button>.</button></td>
  419.  
  420.         </tr>
  421.     </table>
  422.     <br>
  423.     <br>
  424.  
  425.     <p>
  426.         <pre>
  427.  
  428.                    ***               ***         ***               **   ****
  429.                 ***  ***           *** *       *  ***              **   **   *
  430.               ***     ***         ***   *     *    ***             **   **    *
  431.             *************       ***     *   *      ***             **   **     *
  432.           ***          ***     ***       * *        ***     **     **   **    *
  433.         ***             ***   ***         *          ***    *********   ** * *
  434.     </pre>
  435.     </p>
  436.  
  437. </body>
  438.  
  439. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!