title: HTML/CSS Table style
body: <p>I'm having trouble with my table. It isn't appearing how I'd like it to and I was wondering if anyone could help me fix any mistakes I might have made. Thank you so much!</p>
  
  <p>Here is a picture of the table on the site</p>
  
  <p><a href="https://i.stack.imgur.com/EEOtS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EEOtS.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table.foodTable{
   border:4px outset black;
   border-collapse:collapse;
   width: 100%;
   background-color:white;
   text-align:center;
   
  }
  
  table.foodTable caption{
   font-weight:bold;
  }
  
  
  table.foodTable thead{
   height:2.5em;
   font-size:1.1em;
  }
  
  table.foodTable thead tr th{
   padding: 0.5em 1.5em;
  }
  
  table.foodTable tbody tr td{
      border: 4px solid black;
      padding: 0.5em 1.5em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class = "foodTable"&gt;
   &lt;caption&gt;Food&lt;/caption&gt;
   &lt;thead&gt;
   &lt;tr&gt;
    &lt;th colspan = "2" style = "border-top:none;border-left:none;"&gt;&amp;nbsp;&lt;/th&gt;
    &lt;th&gt;Hate&lt;/th&gt;
    &lt;th&gt;Dislike&lt;/th&gt;
    &lt;th&gt;Indifferent&lt;/th&gt;
    &lt;th&gt;Like&lt;/th&gt;
    &lt;th&gt;Love&lt;/th&gt;
   &lt;/tr&gt;
   &lt;/thead&gt;
   
   &lt;tbody&gt;
    &lt;tr&gt;
     &lt;th&gt;Chocolate&lt;/th&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt;&amp;#10004&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;th&gt;Ketchup&lt;/th&gt;
     &lt;td&gt; &amp;#10004&lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;/tr&gt;
     
    &lt;tr&gt;
     &lt;th&gt;Cheese&lt;/th&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt; &amp;#10004 &lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
     &lt;td&gt; - &lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>