Create a weekly timetable using CSS/HTML

Question

I'm trying to create a weekly timetable of classes for a yoga studio. I have created a static version using a table which you can see at:

http://www.studioleisure.com/classes.php

Note: ^^ This webpage now contains the finished HTML version that was created using the answers to this question.

I have problem with classes that start at 15 minutes past the hour or ones that last longer than an hour and it's turning out quite difficult to create the PHP for this version.

I was just wondering if anyone had any ideas to create one that would have a similar look but be easier to code the PHP for.

Answer 1

I'd loose the table, and use only columns. Then I'd place the classes with CSS (position:absolute) and calculate the topvalue based on their start time and the 'height' based on their length. The horizontal lines could be achieved using a repeating background image. The labels on the left could be placed the same way you'd be placing the classes.

HTML could look something like this:

<ul>
 <!-- Monday: -->
 <li>
  <strong>Monday</strong>
  <ul class="classes">
   <li style="top:200px; height:100px;">
    <span>10:30 - 11:45</span>
    Class title
   </li>
   <li>
    <!-- More classes here... -->
   </li>
  </ul>
 </li>
 <li>
  <!-- Other days here... -->
 </li>
</ul>
<ul class="labels">
 <li style="top:180px">10:00</li>
 <!-- More labels here... -->
</ul>

Answer 2

Nice markup. But you're right - doing this with a fine granularity will result in a monster of a table (and the accompanying code for generating it). It's doable, but there is an easier way, although it's not so neat:

Create the table as you usually would, but make it empty. However set fixed widths/heights for each row and column. Then use absolute positioning to place the calendar entries on top of the table. Presto - it looks the same, but you can place the entries with minute precisions if you want to.

The downside of this is that copy-paste won't work (very well) on this beast, and I've no idea what it will do for SEO and accessibility. Probably nothing good. So if those two are important to you, you will have to resort to workarounds (though I think there are ways to use the scheme AND have good SEO/accessibility).

Added: Oh, and I just realized that you will also have to watch for overflowing texts. Table cells would expand automatically, but absolutely positioned DIVs won't.

Added 2: Hey, here's an idea: use relative positioning to shift the entries a bit. Instead of writing the text directly in the cells, write them inside a SPAN and then relatively position it so it shifts down for the necessary 15 minutes. Again this calls for fixed widths and heights of cells, and overflow will be an issue, but SEO/accessibility won't get hurt, and copy-paste will work as expected.