7

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

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

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 分钟开始。长达几个小时。

我可以用 colspan=6 作弊并制作每一个<th>，所以子单元将是 5 分钟。然后将每个节目的 colspan 玩成时间长度/5（分钟），这就是我的 colspan。

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

我该怎么办？

4

6 回答 6

3

这绝对不是你应该用 <table> 解决的问题。

使用多个 <div>，每个都在 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>
于 2009-03-09T13:57:08.373 回答
1

您是否从现有的电视指南中寻找灵感？

例如，带有许多 colspans 选项的表就是此处使用的表。

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

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

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

于 2009-03-09T13:36:41.263 回答
1

我认为您已经表明您的数据并不是真正的表格。如果您对 CSS 感到满意，那么我建议您使用 CSS 并以这种方式设置规则。

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

于 2009-03-09T13:42:12.013 回答
1

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

我们将它作为一个列表列表，第一个列表是标题和频道列表，在每个 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>

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

于 2009-03-15T12:02:33.433 回答
0

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

于 2009-03-09T13:40:55.543 回答
0

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

实际上，在这方面存在一些严重的分歧：

所以决定你喜欢哪个，然后选择......

于 2009-03-09T14:00:01.970 回答