title: Why isn't 'Vertical-align:bottom' working on this table
body: <p>This has been driving me crazy, sadly haha. I can't figure out why I can't make the "X's" in my table align with the bottom of the table... I've tried putting vertical-align in different places in the CSS, but to no avail :(. Also am I using  correctly for blank spots in my table?</p>
  
  <p>Here are snips of both my HTML and CSS files...any comments would be greatly appreciated</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Day4: Table King&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="stylesday4.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;table id="products"&gt;
    &lt;tr&gt;
    &lt;th&gt;&lt;span&gt;&lt;/th&gt;
  &lt;th&gt;Free Version&lt;/th&gt;
  &lt;th&gt;Lite Version&lt;/th&gt;
  &lt;th&gt;Full Version&lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Advertising&lt;/td&gt;
    &lt;td id="td"&gt;X&lt;/td&gt;
    &lt;td&gt;&lt;span&gt;&lt;/td&gt;
    &lt;td&gt;&lt;span&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr class="alt"&gt;
    &lt;td&gt;Catering Software&lt;/td&gt;
    &lt;td&gt;&lt;span&gt;&lt;/td&gt;
    &lt;td id="td"&gt;X&lt;/td&gt;
    &lt;td id="td"&gt;X&lt;/td&gt;
   &lt;/tr&gt;
  </code></pre>
  
  <p>....</p>
  
  <pre><code>#products
  {
  border-collapse:collapse;
  width:100%;
  }
  #products th, #products td
  {
  border:1px solid #0000FF;
  background-color:#C0C0C0;
  padding:3px 2px 7px 5px;
  }
  #products th
  {
  font-size:20px;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#0000FF;
  padding-top:4px;
  padding-bottom:5px;
  background-color:green;
  }
  #products td
  {
  vertical-align:bottom;
  }
  #products tr
  {
  text-align:center;
  color:#0000FF;
  }
  #products tr.alt td
  {
  color:blue;
  background-color:#A7C942;
  }
  </code></pre>