Search code examples
htmlhtml-tablesemantics

TV guide listing semantics. Isn't it a table?


I need to build a web based TV guide listing.

When I started I thought all I need is to build a table since it is a tabular data.

date       00:00   00:30   01:00   etc...
channel 1  show 1  show 2  show 3  etc...
channel 2  show 3  show 4  show 5  etc...

but alas this is not the situation. While the <th> are for every 30 min. the show length can be anything from 5min. up to a few hours.

I can cheat and make every <th> with colspan=6 so the sub unit will be 5 min. and then play with the colspan of every show to be length in time/5(min.) and that is my colspan.

But (there is always a but), now what I have is not a table with tabular data, what I have is some kind of a spaghetti table.

What should I do?


Solution

  • At the end we've decided that a TV guide is not exactly a table. There is the header section that shows the hours and the body part that shows the shows by the hour but here is where the table part ends.

    We will do it as a list of lists the first list is the header and the channels list and in every li there will be another list, in the header there will be a list of hours (where every hour gets a constant width) and in the rest of the li's (channel) there will be a list of the shows for a specific channel and every li gets a width based on the show length.

    <ol>
        <li>date
            <ol>
                <li>00:00</li>
                <li>00:30</li>
                <li>01:00</li>
                <li>01:30</li>
                .
                .
                .
            </ol>
        </li>
        <li>Channel 1
            <ol>
                <li>Show 1</li>
                <li>Show 2</li>
                <li>Show 3</li>
                <li>Show 4</li>
                .
                .
                .
            </ol>
        </li>
        <li>Channel 2
        .
        .
        .
    <ol>
    

    It is not a perfect solution but we are living in an imperfect world.