title: Padding Property not applying?
body: <p>I wanted it to have a table which was half red and half blue, with some padding between the borders and the text. I just can't figure out why the padding property isnt apply in this</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt; Practice Exercise &lt;/title
  &lt;style&gt;
  .red{background-color:red}
  .blue{background-color:blue}
  table{border-collapse:collapse;padding:40px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table border ="1"&gt;
  &lt;tr&gt;
  &lt;th class="red"&gt; State &lt;/th&gt;
  &lt;th class="blue"&gt; Capital &lt;/th&gt;
  &lt;/tr&gt;
  &lt;td class="red"&gt; Utah &lt;/td&gt;
  &lt;td class="blue"&gt; Salt Lake City &lt;/td&gt;
  &lt;/tr&gt;
  &lt;td class="red"&gt; Texas &lt;/td&gt;
  &lt;td class="blue"&gt; Austin &lt;/td&gt;
  &lt;/tr&gt;
  &lt;td class="red"&gt; Tennesse &lt;/td&gt;
  &lt;td class="blue&gt; Nashville &lt;/td
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>