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

Question

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?

Answer 1

Have you looked at existing TV guides for inspiration?

The table with lots of colspans option is the one used here for example.

I think there are basically two options.

• Use tables, and have colspans. You can only have one 'column' for a finite amount of time, so you may have to round to the nearest, 5, 10, or 15 minutes depending on your number of columns per hour and a one-hour-long program might have a colspan of 4, 6, or even 12, as you point out in your question.
• Use CSS with plain DIVs (or you could even make them ULs and LIs, a UL for each row and an LI for each block in that row if you really want) and specify the width of each item separately. You could do this in percentage (allowing the whole row to expand and contract) or pixels. You may want to experiment with the inner elements, ie one for each program, being either floated blocks or inline-blocks. Floats should be fine as long as rounding error doesn't make them wrap.

I think semantically, the second option is better. As you rightly point out, it is very much like a table so a table ought to be appropriate, but once you get into using many more columns than you intend to show, and colspans to size areas, it loses the semantic appeal.

Answer 2

The data you are presenting is really similar to a graph or chart of sorts. There is no HTML element that corresponds to this. I'd say the table approach makes sense. Splitting the table into 1/6ths makes sense as well. It's a limitation of the medium that you can't have a colspan of 1.125. Since this table will be generated programmatically I don't think splitting each logical cell into 6 physical cells will be a major problem. Just test a sample on any non-standard browsers you care about, such as a screen reader.

Answer 3

I think you've shown that your data isn't really a table. If you're comfortable with CSS, then I would suggest that you'd go down the route of using CSS and setting up rules that way.

For example you could have classes such as five-min, ten-min, fifteen-min, thirty-min, one-hour etc.... each of these rules would be configured to give you the correct width and so on. For anything else out of the ordinary, you could then just calculate the size on the fly.

Answer 4

This is definitely not something you should solve with <table>.

Use multiple <div>s, each having display inline or inline-block set in CSS. Set their width, probably best done using CSS-classes, e.g. as follows:

div.channel div
{
   display: inline-block;
}
div.five { width: 1em; }
div.ten { width: 2em; }
div.fifteen { width: 3em; }
...

Then the HTML:

<div class="channel">
  <div class="five">Five minute program</div>
  <div class="fifteen">Fifteen minute program</div>
  <div class="five">Five minute program</div>
</div>
<div class="channel">
  <div class="ten">Ten minute program</div>
  <div class="fifteen">Fifteen minute program</div>
</div>

Answer 5

TV Listings? It's a list...

Well actually, there are some serious disagreements on this:

• the Radio Times does use a list
• TVGuide.co.uk uses a morass of 4 level nested tables
• Sky use a quite shocking number of divs and lot of javascript.

So decide which you prefer and take your pick...

Answer 6

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.

Answer 7

You could use a 3rd party tool to visualize the program schedule perhaps. Check out the Ext Scheduler, and this demo of a radio program schedule. Might be of interest.

http://www.ext-scheduler.com/examples/radiotime/radiotime.html