title: <ul> and <li> - Table with alternating row color
body: <p>I want to create a table just like the one on the picture. I did this table with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script language="Javascript"&gt;
  $(document).ready(function() {
   $('#example tr').click(function() {
    var href = $(this).find("a").attr("href");
    if(href) {
     alert(href);
     return false;
     window.location = href;
    }
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table#example {
    border-collapse: collapse;
  }
  tr:nth-child(even) {
    background-color: #f1f1f1;
  }
  tr:nth-child(odd) {
    background-color: #fff;
  }
  li:nth-child(even) {
    background-color: #f1f1f1;
  }
  li:nth-child(odd) {
    background-color: #fff;
  }
  #example tr:hover {
    background-color: #ccc;
  }
  #example th {
    background-color: #fff;
  }
  #example th,
  #example td {
    padding: 3px 5px;
  }
  #example td:hover {
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Table&lt;/h2&gt;
  &lt;div style="overflow:auto;height:150px;border: 2px solid grey;"&gt;
    &lt;table id="example" style="width:100%"&gt;
      &lt;tr&gt;
        &lt;td style="padding-left:10px"&gt;&lt;a href="http://www.w3schools.com"&gt;AAAAAAAA&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;BBBBBBBBBBB&lt;/td&gt;
        &lt;td&gt;CCCCCC&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td style="padding-left:10px"&gt;&lt;a href="http://www.w3schools.com"&gt;AAAAAAAA&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;BBBBBBBBBBB&lt;/td&gt;
        &lt;td&gt;CCCCCC&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td style="padding-left:10px"&gt;&lt;a href="http://www.w3schools.com"&gt;AAAAAAAA&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;BBBBBBBBBBB&lt;/td&gt;
        &lt;td&gt;CCCCCC&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td style="padding-left:10px"&gt;&lt;a href="http://www.w3schools.com"&gt;AAAAAAAA&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;BBBBBBBBBBB&lt;/td&gt;
        &lt;td&gt;CCCCCC&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td style="padding-left:10px"&gt;&lt;a href="http://www.w3schools.com"&gt;AAAAAAAA&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;BBBBBBBBBBB&lt;/td&gt;
        &lt;td&gt;CCCCCC&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td style="padding-left:10px"&gt;&lt;a href="http://www.w3schools.com"&gt;AAAAAAAA&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;BBBBBBBBBBB&lt;/td&gt;
        &lt;td&gt;CCCCCC&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://i.stack.imgur.com/nSM2A.png" rel="nofollow">Table Example</a></p>
  
  <p>Question now is: How can I create a table like this only with <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> tags?</p>
  
  <p>I am trying without success. See how far I am:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   $('#example li').click(function() {
    var href = $(this).find("a").attr("href");
    if(href) {
     alert(href);
     return false;
     window.location = href;
    }
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table#example2 {
   border-collapse: collapse; 
  }
  li:nth-child(even) {
      background-color: #f1f1f1;
  }
  li:nth-child(odd) {
      background-color: #fff;
  }
  #example2 li:hover {
   background-color: #ccc;
  }
  #example2 li{
   padding-top: 3px;
          padding-right: 5px;
          padding-left:-30px;
  list-style-type: none;
  }
  #example2 li:hover {
   cursor: pointer;
  }
  #example2 ul {
      list-style:none;
      padding-left:0;
      margin-left: -40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="overflow:auto;height:150px;border: 2px solid grey;"&gt;
  &lt;ul id="example2" style="width:100%"&gt;
    &lt;li&gt;
      &lt;ul&gt;
       &lt;li style="padding-left:10px"&gt;&lt;a href="http://www.w3schools.com"&gt;AAAAAA&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;BBBBBB&lt;/li&gt; 
       &lt;li&gt;CCCCCC&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't get it to look like the table with the table-tags. 
  Could someone please help me by explaining how to achieve this? Thank you so much.</p>