html - 电视指南列表语义。不就是一张 table 吗?

标签 html html-table semantics

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

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

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。

但是(总有一个但是),现在我拥有的不是带有表格数据的表格,而是某种意大利面条表格。

我该怎么办?

最佳答案

这绝对不是你应该用

解决的问题。

使用多个

,每个都在 CSS 中设置了 display inline 或 inline-block 集。设置它们的宽度,最好使用 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>

关于html - 电视指南列表语义。不就是一张 table 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/626224/