Cacher is the code snippet organizer for pro developers

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Verdana;
  color: #222;
}

table#choc {
  width: 5in;
  margin: 1in auto 0px auto;
  color: #420808;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}

table#choc tr {
  padding: 7px;
}

table#choc td,
table#choc th {
  height: .5in;
  padding-left: 25px;
  border-left: 1px solid #eee;
}

table#choc th {
  text-align: left;
  font-size: 36px;
  padding: 24px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

//call to jQuery ready function that checks whether or not the browser is
//ready to load the page
$(document).ready(function() {

  //send a message to the console window to check 
  //if this page is geting read
  console.log("ready");

  //custom js goes here

 //add code to change the body background 

  //js filters include :even and :odd
  $('#choc tr:even').css('backgroundColor', '#eee');

  // add a filter that changes something in the css for the odd tr's

  //close jQuery
});

<table id="choc">
  <tr>
    <th colspan='2'>chocolate</th>
  </tr>

  <tr>
    <td>extra dark</td>
    <td>ecstatic</td>
  </tr>
  <tr>
    <td>very dark</td>
    <td>very happy</td>
  </tr>
  <tr>
    <td>dark</td>
    <td>happy</td>
  </tr>
  <!--add two more table rows with table data of more types of chocolate-->
  <tr>
    <td>white</td>
    <td>sweet</td>
  <tr>
      
</table>