Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="gabrys.css">
<style id="jsbin-css">
#czerwona {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#czerwona td, #czerwona th {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

#czerwona tr:nth-child(even){background-color: #f2f2f2;}

#czerwona tr:hover {background-color: #ddd;}

#czerwona th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: red;
    color: white;
}


#zielona {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#zielona td, #zielona th {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

#zielona tr:nth-child(even){background-color: #f2f2f2;}

#zielona tr:hover {background-color: #ddd;}

#zielona th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}


#niebieska {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#niebieska td, #niebieska th {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

#niebieska tr:nth-child(even){background-color: #f2f2f2;}

#niebieska tr:hover {background-color: #ddd;}

#niebieska th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: blue;
    color: white;
}
</style>
</head>
<body>
<table id="czerwona">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Occupation</th>
    <th>Location</th>
  </tr>
  <tr>
    <td>Luke Peters</td>
    <td>25</td>
    <td>Freelance Web Developer</td>
    <td>Brookline, MA</td>
  </tr>
  <tr>
    <td>Joseph Smith</td>
    <td>27</td>
    <td>Project Manager</td>
    <td>Sommerville,MA</td>
  </tr>
  <tr>
    <td>Maxwell Johnson</td>
    <td>27</td>
    <td>UX Architect & Designer</td>
    <td>Arlington,MA</td>
  </tr>
  <tr>
    <td>Harry Harrison</td>
    <td>25</td>
    <td>Front-End Developer</td>
    <td>Bostan,MA</td>
  </tr>


</table>
<br>
<br>
<table id="zielona">
  <tr>
    <th>Product</th>
    <th>Unit Price</th>
    <th>Quantity</th>
    <th>Date Sold</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Solid oak work table</td>
    <td>$800</td>
    <td>10</td>
    <td>03/15/2014</td>
    <td>Waiting for Pickup</td>
  </tr>
  <tr>
    <td>Leather iPhone wallet</td>
    <td>$45</td>
    <td>120</td>
    <td>02/28/2014</td>
    <td>In Transit</td>
  </tr>
  <tr>
    <td>27 Apple thunderbolt displays</td>
    <td>$1000</td>
    <td>25</td>
    <td>02/10/2014</td>
    <td>Delivered</td>
  </tr>
  <tr>
    <td>Bose studio headphones</td>
    <td>$60</td>
    <td>90</td>
    <td>01/14/2014</td>
    <td>Delivered</td>
  </tr>
  </table>
  <br>
  <br>
  <table id="niebieska">
  <tr>
    <th>Username</th>
    <th>Email</th>
    <th>Password</th>
    <th>Active</th>
  </tr>
  <tr>
    <td>ninjalug</td>
    <td>misterninja@hotmail.com</td>
    <td>***********</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>jsmith41</td>
    <td>jospeh.smith@gmail.com</td>
    <td>***********</td>
    <td>No</td>
  </tr>
  <tr>
    <td>1337maxir</td>
    <td>hackerdude1000@aol.com</td>
    <td>***********</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>harryharyy19</td>
    <td>harryharry@gmail.com</td>
    <td>***********</td>
    <td>Yes</td>
  </tr>


</table>


</table>


<script id="jsbin-source-css" type="text/css">#czerwona {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#czerwona td, #czerwona th {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

#czerwona tr:nth-child(even){background-color: #f2f2f2;}

#czerwona tr:hover {background-color: #ddd;}

#czerwona th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: red;
    color: white;
}


#zielona {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#zielona td, #zielona th {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

#zielona tr:nth-child(even){background-color: #f2f2f2;}

#zielona tr:hover {background-color: #ddd;}

#zielona th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}


#niebieska {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#niebieska td, #niebieska th {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

#niebieska tr:nth-child(even){background-color: #f2f2f2;}

#niebieska tr:hover {background-color: #ddd;}

#niebieska th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: blue;
    color: white;
}</script>
</body>
</html>