0

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.

Here is the code I'm using and a jsfiddle can be found here http://jsfiddle.net/s2ZgT/:

<div id="grid">
    <table width="100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr class="gridHeader">
                <td>&nbsp;</td>
                <td class="underline">09:00</td>
                <td class="underline">10:00</td>
                <td class="underline">11:00</td>
                <td class="underline">12:00</td>
                <td class="underline">13:00</td>
                <td class="underline">14:00</td>
                <td class="underline">15:00</td>
                <td class="underline">16:00</td>
                <td class="underline">17:00</td>
            </tr>
            <tr id="mon">
                <td class="gridSide">Mon</td>
                <td class="box" id="mon1">&nbsp;</td>
                <td class="box" id="mon2">&nbsp;</td>
                <td class="box" id="mon3">&nbsp;</td>
                <td class="box" id="mon4">&nbsp;</td>
                <td class="box" id="mon5">&nbsp;</td>
                <td class="box" id="mon6">&nbsp;</td>
                <td class="box" id="mon7">&nbsp;</td>
                <td class="box" id="mon8">&nbsp;</td>
                <td class="box" id="mon9">&nbsp;</td>
            </tr>
            <tr id="tue">
                <td class="gridSide">Tue</td>
                <td class="box" id="tue1">&nbsp;</td>
                <td class="box" id="tue2">&nbsp;</td>
                <td class="box" id="tue3">&nbsp;</td>
                <td class="box" id="tue4">&nbsp;</td>
                <td class="box" id="tue5">&nbsp;</td>
                <td class="box" id="tue6">&nbsp;</td>
                <td class="box" id="tue7">&nbsp;</td>
                <td class="box" id="tue8">&nbsp;</td>
                <td class="box" id="tue9">&nbsp;</td>
            </tr>
            <tr id="wed">
                <td class="gridSide">Wed</td>
                <td class="box" id="wed1">&nbsp;</td>
                <td class="box" id="wed2">&nbsp;</td>
                <td class="box" id="wed3">&nbsp;</td>
                <td class="box" id="wed4">&nbsp;</td>
                <td class="box" id="wed5">&nbsp;</td>
                <td class="box" id="wed6">&nbsp;</td>
                <td class="box" id="wed7">&nbsp;</td>
                <td class="box" id="wed8">&nbsp;</td>
                <td class="box" id="wed9">&nbsp;</td>
            </tr>
            <tr id="thu">
                <td class="gridSide">Thu</td>
                <td class="box" id="thu1">&nbsp;</td>
                <td class="box" id="thu2">&nbsp;</td>
                <td class="box" id="thu3">&nbsp;</td>
                <td class="box" id="thu4">&nbsp;</td>
                <td class="box" id="thu5">&nbsp;</td>
                <td class="box" id="thu6">&nbsp;</td>
                <td class="box" id="thu7">&nbsp;</td>
                <td class="box" id="thu8">&nbsp;</td>
                <td class="box" id="thu9">&nbsp;</td>
            </tr>
            <tr id="fri">
                <td class="gridSide">Fri</td>
                <td class="box" id="fri1">&nbsp;</td>
                <td class="box" id="fri2">&nbsp;</td>
                <td class="box" id="fri3">&nbsp;</td>
                <td class="box" id="fri4">&nbsp;</td>
                <td class="box" id="fri5">&nbsp;</td>
                <td class="box" id="fri6">&nbsp;</td>
                <td class="box" id="fri7">&nbsp;</td>
                <td class="box" id="fri8">&nbsp;</td>
                <td class="box" id="fri9">&nbsp;</td>
            </tr>
        </tbody>
    </table>
</div>
methuselah
  • 12,766
  • 47
  • 165
  • 315

2 Answers2

11

The claim that tables are somehow harmful in themselves is a myth. Tables are harmful when misused for layouting purposes. They are still the weapon of choice when displaying tabular data, which yours clearly is.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Is this discussed somewhere ? So I can convince people... Having a link or somewhere to point them will help. – Benjamin Crouzier Mar 10 '13 at 22:47
  • @pinouchon send them here. We'll tell them they're dumb. ;) Seriously though, I'll see whether I can look something up.... – Pekka Mar 10 '13 at 22:48
  • @pinouchon the official spec from the W3 consortium: http://www.w3.org/TR/html401/struct/tables.html#h-11.1 (looking for more, hold on) – Pekka Mar 10 '13 at 22:50
  • This question maybe: [Why is using tables for website layout such an evil](http://stackoverflow.com/questions/313468/why-is-using-tables-for-website-layout-such-an-evil). But it is a little bit biased. – Benjamin Crouzier Mar 10 '13 at 22:50
  • @pinouchon yeah, or this one: [Displaying tabular data in HTML](http://stackoverflow.com/q/12040841) – Pekka Mar 10 '13 at 22:52
  • 1
    @Pekka I just want you to know that I totally agree with you if all he cares about is tabular data - good answer! – klewis Mar 10 '13 at 22:55
1

Looks like a table to me. Why make it anything else? There are situations where you want to implement a system of div and span in order to display a complex ui or report, but this is not one of them. The table will naturally respond to changes in content and will render in a layout which users are used to. Tables are very common and are easy to read. Even with some fake data this still looks fine. Here is an example of your code with some simple data in it.

http://jsfiddle.net/J8khb/

Bottom line: Use tables for tabular displays. Use alternatives for complex displays.

Travis J
  • 81,153
  • 41
  • 202
  • 273