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

StackOverflow https://stackoverflow.com/questions/626224

  •  06-07-2019
  •  | 
  •  

题

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

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

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。

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

我应该怎么办？

有帮助吗？

解决方案 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>

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

其他提示

这绝对不是你应该用<！> lt; table <！> gt;。

解决的

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

您是否查看过现有的电视指南以获取灵感？

使用的是带有大量 colspans 选项的表 例如这里.

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

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

我认为从语义上来说，第二种选择更好。正如您正确指出的那样，它非常像表格，因此表格应该是合适的，但是一旦您开始使用比您打算显示的更多的列，并且使用 colspan 来调整区域大小，它就会失去语义吸引力。

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

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

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

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

事实上，对此存在一些严重的分歧：

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top