title: Using TH colspan to include multiple TD elements per column
body: <p>I'm attempting to create an HTML table that displays a list of vehicles down the page along with columns for each hour of the day. Within each hourly column I would like to display five bars of varying colors that indicate activity over 12 minute periods. This is an abbreviated version of my latest attempt showing the first two hours:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="mobile_column" colspan="1"&gt;Mobile Name&lt;/th&gt;
              &lt;th class="time_column" colspan="5"&gt;00&lt;/th&gt;
              &lt;th class="time_column" colspan="5"&gt;01&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tr&gt;
          &lt;td class="mobile_column"&gt;Test&lt;/td&gt;
          &lt;td class="no_data"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="ignition_off"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="no_data"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="no_data"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="no_data"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="moving"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="moving"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="moving"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="no_data"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="no_data"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'm using the following CSS to format each bar:</p>
  
  <pre><code>.no_data, .no_data_legend {
      background-color: White;
  }
  .moving, .moving_legend {
      background-color: Green;
  }
  .idling, .idling_legend {
      background-color: Yellow;
  }
  .ignition_off, .ignition_off_legend {
      background-color: Red;
  }
  .ignition_toggle, .ignition_toggle_legend {
      background-color: Purple;
  }
  .no_data, .moving, .idling, .ignition_off, .ignition_toggle {
      width: 5px;
      height: 24px;
      float: left;
      display: inline-block;
      padding: 0px 0px 0px 0px;
  }
  </code></pre>
  
  <p>I'm fairly inexperienced in HTML layout but from my reading I was expecting that five of the bars should appear under each of the hourly headings and go across the page, however they all appear under the first hour and then wrap down the page.</p>
  
  <p>I've posted a JSFiddle at <a href="http://jsfiddle.net/dKb6Z/2/" rel="nofollow">http://jsfiddle.net/dKb6Z/2/</a> that contains the data for 24 hours that makes it more apparent. Any assistance including preferred alternative ways to format the data would be appreciated.</p>