使用CSS/HTML创建每周时间表

Question

我正在尝试为瑜伽工作室创建每周课程时间表.我使用表创建了一个静态版本,您可以在以下位置看到:

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

注意:^^此网页现在包含使用此问题的答案创建的已完成的HTML版本.

我遇到的问题是从一小时后的15分钟开始的课程或持续时间超过一小时的课程,而且为这个版本创建PHP非常困难.

我只是想知道是否有人有任何想法来创建一个具有类似外观但更容易编写PHP的代码.

Answer 1

我松开了桌子,只使用了柱子.然后我用CSS(position:absolute)放置类,并top根据它们的开始时间计算值,并根据它们的长度计算"高度".可以使用重复背景图像来实现水平线.左侧的标签可以放置与放置类的方式相同.

HTML看起来像这样:

<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>