CODEWITHSUNDEEP
htmlcss
methuselah
methuselah

Reputation: 13216

Alternative to using a table to code timetable

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>

Upvotes: 0

Views: 4891

Answers (2)

Travis J
Travis J

Reputation: 82297

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.

Upvotes: 1

Pekka
Pekka

Reputation: 449525

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.

Upvotes: 11

Related Questions