Html 电视指南。Isn'；这不是一张桌子吗？

我需要建立一个基于网络的电视指南清单

当我开始的时候，我想我所需要的就是建立一个表，因为它是一个表格数据

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

但遗憾的是，情况并非如此。 而

每30分钟播放一次。播放时间可以从5分钟到5分钟不等。最多几个小时

我可以作弊，使每一个

的colspan=6，这样子单元将是5分钟。然后玩每个节目的colspan的时间长度为/5（分钟），这就是我的colspan

但是（总是有一个But），现在我有的不是一个表格数据，我有的是某种意大利面表格

---

我该怎么办

你看过现有的电视指南了吗

使用的是带有大量colspans选项的表

我认为基本上有两种选择

• 使用表格，并具有colspans。在有限的时间内，您只能有一个“列”，因此根据每小时的列数，您可能需要四舍五入到最接近的5、10或15分钟，而一个一小时长的程序的colspan可能为4、6甚至12，正如您在问题中指出的那样
• 将CSS与普通div一起使用（或者你甚至可以将它们设为ULs和LIs，如果你真的愿意，每行的UL和该行的每个块的li）并分别指定每个项的宽度。您可以按百分比（允许整行展开和收缩）或像素进行此操作。您可能希望试验内部元素，即每个程序一个元素，即浮动块或内联块。只要四舍五入误差不使浮点数换行，浮点数就可以了

---

我认为从语义上讲，第二种选择更好。正如您正确指出的那样，它非常类似于一个表，因此一个表应该是合适的，但是一旦您开始使用比您想要显示的更多的列，并且跨越大小区域，它就失去了语义吸引力。

您所呈现的数据实际上类似于一个图形或排序图表。没有与此对应的HTML元素。我要说的是，表格法是有意义的。将表拆分为1/6也是有意义的。介质的一个限制是，colspan不能为1.125。由于此表将以编程方式生成，因此我认为将每个逻辑单元拆分为6个物理单元不是一个主要问题。只需在您关心的任何非标准浏览器（如屏幕阅读器）上测试一个示例。

我认为您已经表明，您的数据实际上不是一个表。如果您对CSS感到满意，那么我建议您继续使用CSS并以这种方式设置规则

---

例如，你可以有五分钟、十分钟、十五分钟、三十分钟、一小时等课程。。。。这些规则中的每一条都将被配置为提供正确的宽度等等。对于任何不寻常的事情，你可以随时计算大小。

这绝对不是你应该解决的问题

使用多个，每个都在CSS中设置了显示内联或内联块。设置其宽度，最好使用CSS类，例如：

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

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

五分钟节目
十五分钟节目
五分钟节目
十分钟节目
十五分钟节目

电视节目表？这是一张单子

实际上，在这个问题上有一些严重的分歧：

---

所以，决定你喜欢哪一种，然后选择……

最后，我们决定电视指南并不完全是一张桌子。 标题部分显示小时数，主体部分显示按小时显示的节目，但这里是表格部分的结尾

我们将把它作为一个列表来做 第一个列表是标题和频道列表 在每个li中会有另一个列表，在标题中会有一个小时列表（其中每个小时都有一个恒定的宽度），在li的其余部分（频道）中会有一个特定频道的节目列表，每个li根据节目长度获得一个宽度

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

日期
00:00
00:30
01:00
01:30
.
.
.

第一频道
显示1
表演2
展示3
表演4
.
.
.

第二频道
.
.
.

这不是一个完美的解决方案，但我们生活在一个不完美的世界