title: Alternative to using a table to code timetable
body: <p>I'm currently using a table to design my timetable - but I've heard that its best to stay away from tables in web development because it is rarely advised. Hence, I was wondering if anyone could prescribe a better method of implementing my timetable? I've tried using div's with little success so far.</p>
  
  <p>Here is the code I'm using and a jsfiddle can be found here <a href="http://jsfiddle.net/s2ZgT/" rel="nofollow">http://jsfiddle.net/s2ZgT/</a>:</p>
  
  <pre><code>&lt;div id="grid"&gt;
      &lt;table width="100%" cellspacing="0" cellpadding="0"&gt;
          &lt;tbody&gt;
              &lt;tr class="gridHeader"&gt;
                  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="underline"&gt;09:00&lt;/td&gt;
                  &lt;td class="underline"&gt;10:00&lt;/td&gt;
                  &lt;td class="underline"&gt;11:00&lt;/td&gt;
                  &lt;td class="underline"&gt;12:00&lt;/td&gt;
                  &lt;td class="underline"&gt;13:00&lt;/td&gt;
                  &lt;td class="underline"&gt;14:00&lt;/td&gt;
                  &lt;td class="underline"&gt;15:00&lt;/td&gt;
                  &lt;td class="underline"&gt;16:00&lt;/td&gt;
                  &lt;td class="underline"&gt;17:00&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="mon"&gt;
                  &lt;td class="gridSide"&gt;Mon&lt;/td&gt;
                  &lt;td class="box" id="mon1"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="mon2"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="mon3"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="mon4"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="mon5"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="mon6"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="mon7"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="mon8"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="mon9"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="tue"&gt;
                  &lt;td class="gridSide"&gt;Tue&lt;/td&gt;
                  &lt;td class="box" id="tue1"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="tue2"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="tue3"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="tue4"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="tue5"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="tue6"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="tue7"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="tue8"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="tue9"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="wed"&gt;
                  &lt;td class="gridSide"&gt;Wed&lt;/td&gt;
                  &lt;td class="box" id="wed1"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="wed2"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="wed3"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="wed4"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="wed5"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="wed6"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="wed7"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="wed8"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="wed9"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="thu"&gt;
                  &lt;td class="gridSide"&gt;Thu&lt;/td&gt;
                  &lt;td class="box" id="thu1"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="thu2"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="thu3"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="thu4"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="thu5"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="thu6"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="thu7"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="thu8"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="thu9"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="fri"&gt;
                  &lt;td class="gridSide"&gt;Fri&lt;/td&gt;
                  &lt;td class="box" id="fri1"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="fri2"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="fri3"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="fri4"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="fri5"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="fri6"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="fri7"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="fri8"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td class="box" id="fri9"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>