Question

我需要制作一个基于网络的电视指南列表。

当我开始时，我认为我需要的是构建一个表，因为它是表格数据。

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

但唉，这不是情况。而<th>每30分钟一次。节目长度可以是5分钟。最多几个小时。

我可以欺骗并使每个<th>使用colspan = 6，因此子单位将是5分钟。然后玩每个节目的colspan到时间长度/ 5（分钟），这是我的colspan。

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

我该怎么办？

Answer 1

这绝对不是你应该用＆lt; table＆gt;来解决的。

使用多个＆lt; div＆gt;，每个都在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>

Answer 2

您是否看过现有的电视指南以寻找灵感？

包含许多colspans选项的表格是here for example使用的表格。

我认为基本上有两种选择。

使用表格，并有colspans。您只能在有限的时间内拥有一个“列”，因此您可能需要舍入到最近的5,10或15分钟，具体取决于您每小时的列数和一小时长的程序可能有你在问题中指出的是4,6，甚至12的colspan。
将CSS与普通DIV一起使用（或者您甚至可以将它们设为UL和LI，每行为UL，如果您确实需要，则为该行中的每个块设置LI）并分别指定每个项目的宽度。你可以用百分比（允许整行扩展和收缩）或像素来做到这一点。您可能想要尝试内部元素，即每个程序一个，是浮动块或内联块。只要圆角误差不能使它们包裹，浮点数应该没问题。

我认为在语义上，第二种选择更好。正如你正确指出的那样，它非常像一张桌子，所以桌子应该是合适的，但是一旦你开始使用比你想要显示的更多的列，并且colspans用于大小区域，它就会失去语义吸引力。

Answer 3

我认为你已经证明你的数据并不是真正的表格。如果你对CSS感到满意，那么我建议你沿着使用CSS的方式走下去并设置相应的规则。

例如，您可以使用五分钟，十分钟，十五分钟，三十分钟，一小时等课程....这些规则中的每一个都将配置为给您正确的宽度，所以上。对于其他任何不寻常的事情，您可以随时计算尺寸。

Answer 4

最后我们认为电视指南并不完全是一张桌子。标题部分显示小时和按小时显示节目的正文部分，但这里是表格部分结束的位置。

我们将以列表列表的形式进行第一个列表是标题和频道列表并且在每个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>

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

Answer 5

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

Answer 6

电视节目单？这是一个清单...

实际上，对此有一些严重的分歧：

所以决定你喜欢哪个并选择......

电视指南列出语义。不是桌子吗？

6 个答案: