I don't understand why my column won't span to the top and bottom rows I created. It is supposed to look like the "Today" column is taller on the top and bottom then the other columns. I tried accomplishing this by adding rows above and below it and then using rowspan. For some reason, it only works on the bottom row.

It's a lot of code, and I wasn't sure what I should cut without deforming it all or adding a new variable (it needs a fluid height). JSFiddle: http://jsfiddle.net/DaAwesomeP/aU9Le/

Basic HTML Layout (the full fiddle has the css):
HTML Code:
<table id="weatherForecast">
  <tr class="weatherForecast-row-outer">
    <td></td>
  </tr>
  <tr id="weatherForecast-row">
    <td id="weatherForecast-DATE" class="weatherForecast-day  weatherForecast-day-today" rowspan="2">
      <!-- Cell Content for "Today" Here -->
    <td id="weatherForecast-DATE" class="weatherForecast-day ">
      <!-- Cell Content Here. There are 4 of these -->
    </td>
  </tr>
  <tr class="weatherForecast-row-outer">
    <td></td>
  </tr>
</table>
An image showing what I am trying to accomplish:
http://s14.postimg.org/ba3xwcm75/Row...ng_top_row.png


I tried posting this on StackOverflow, but I was told it was a design question. So I saw this: http://meta.stackoverflow.com/questi...-stackoverflow which said to post in on Pro Webmasters or User Experience, which I tried and then got suspended. I hope that the community on this site can answer my question.