title: HTML/CSS/JS/jQuery: Color "table"/"grid"
body: <p>I am trying to build a color table just like MS Office font color grid. What is the best way to do it? Table, div or ul?</p>
  
  <p>I have currently used a div but I am struggling to place it with in a ul which is my menu.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="color"&gt;
  
  &lt;table id="colorgrid"&gt;
  
      &lt;tr&gt;
  
          &lt;td class="cell" style="background-color: #FFFF00;"&gt;&lt;/td&gt;
  
          &lt;td class="cell" style="background-color: #7CFC00;"&gt;&lt;/td&gt;
  
          &lt;td class="cell" style="background-color: #40E0D0;"&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
  
      &lt;tr&gt;
  
          &lt;td class="cell" style="background-color: #9400D3;"&gt;&lt;/td&gt;
  
          &lt;td class="cell" style="background-color: #FF0000;"&gt;&lt;/td&gt;
  
          &lt;td class="cell" style="background-color: #FF00FF;"&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
  
  &lt;/table&gt; &lt;!--End of colorgrid --&gt;               
  </code></pre>
  
  <p> </p>
  
  <h2>CSS</h2>
  
  <pre><code>#colorgrid{
  
  width: 85px;
  
  height: 45px;
  
  display: none;
  
  position: absolute;
  
  z-index: 3;
  </code></pre>
  
  <p>}</p>
  
  <p>.row{</p>
  
  <p>}</p>
  
  <p>.cell{</p>
  
  <pre><code>float: left;
  
  border: 1pt gray solid;
  
  margin: 1px;
  
  overflow: hidden;
  
  width: 20px;
  
  height: 20px;
  </code></pre>
  
  <p>}</p>
  
  <h2>JS/jQuery</h2>
  
  <pre><code>$(document).ready(function(){       
  
  $('#btn').click(function(){
  
      $('.backdrop').css('display', 'block');
  
      $('#colorgrid').css('display', 'block');
  
  
      $('.backdrop').click(function(){
  
          $('#colorgrid').css('display', 'none');
  
          $('.backdrop').css('display', 'none');
  
      });
  
  
  
      $('.cell').click(function(){
  
          var color = $(this).css('background-color');
  
          alert(color);
  
          $('#colorgrid').css('display', 'none');
  
          $('.backdrop').css('display', 'none');
  
      });
  
  });
  </code></pre>
  
  <p>This code works, I just want an opinion, whats the best way to skin this cat? :-)</p>
  
  <p>P.S. btn is in a li</p>
  
  <p><img src="https://i.stack.imgur.com/V9vse.jpg" alt="enter image description here"></p>
  
  <p>Thanks,</p>
  
  <p>drjay</p>