制作此布局(css或表格)的最佳方法是什么?

时间:2009-04-28 18:05:55

标签: html css layout

我正在开发一个有订阅的应用程序。我想知道什么是构造数据的最佳方式,如下面的模式(使用表或css)。 (对不起,我在工作,感冒不在免费图片托管服务上发布我想要的图片。)

|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
| Location:   xxxxxxxxx-xxxx-xxx                 Maximum subscription date: 12-11-2009  |
| Begin date: 12-15-2009                                              Cost: $ 150       |
| Duration:   2 Days                                                                    |
| Status:     Confirmed with remaining places                           [Subscription]  |
|                                                                                       |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
| Location:   xxxxxxxxx-xxxx-xxx                 Maximum subscription date: 12-12-2009  |
| Begin date: 12-15-2009                                              Cost: $ 150       |
| Duration:   2 Days                                                                    |
| Status:     Confirmed with remaining places                           [Subscription]  |
|                                                                                       |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

我在想桌子,但我不确定这是最合适的方法。

8 个答案:

答案 0 :(得分:13)

你可以用CSS来做,但考虑一下你试图呈现的数据类型:它本质上是一个数据。所以我建议使用一个表格。

实际上,表格会有很多漏洞,但是你应该避免使用表格的唯一时间是具体用于布局目的(即不是为了展示表格,必然) 。在这种情况下使用表格将正确使用表格。

答案 1 :(得分:5)

无论我多么讨厌表格布局,我都不得不说桌子。

答案 2 :(得分:2)

内容表格,因为它基本上是表格数据,但请确保充分利用TH作为标题,如状态,持续时间等。

答案 3 :(得分:2)

我认为人们需要克服在他们的(x)html中使用表格标签的下意识反应。它是一组有效的标签,它可以非常好地呈现和组织“方形”数据。如果您要强烈反对他们,请聪明并指定,其余不适合语义上不恰当的用途。不要使用表格来布置您的徽标和标题。这不是表格数据。您是否以方形方式显示数据,以显示信息的行和列之间的关系?然后继续使用表格!

对于您的特定用途,我建议,鉴于我对语义标记(感谢Dan C.!)的理解,无论是表格还是定义列表。这准确地描述了您要写的内容。

答案 4 :(得分:1)

我正在以一种我正在开发的形式做同样的事情而且我正在使用定义列表。例如:

<dl>
    <dt>Location:</dt>
    <dd>xxxxxxx-xxxxx</dd>
    ....
</dl>

这样做有点难,但代码看起来更干净恕我直言。 (对我来说也可以用表格来做)

答案 5 :(得分:0)

取决于您想要的内容

现在你问题中的例子看起来像一个包含一些文本行的框,然后是另一个框等等。

如果这就是你想要的,我建议使用CSS设置div。如果它更清楚地是“列和行”布局,请使用表格。

答案 6 :(得分:0)

在表格中显示表格数据

答案 7 :(得分:0)

我个人避免使用表格,除非数据是由表驱动的(excel-like results)。在这种情况下,div的集合,甚至基于li的集合可能是最好的。 (下面的psuedo-markup)

UL
  LI
    DIV.left
      DL
        DT LABEL {label} /LABEL /DT
        DD {detail}
      /DL
      ...
    /DIV.left

    DIV.right
      ...
    /DIV.right

    DIV.subscribe ... /DIV.subscribe
  /LI
  ...
/UL

注意:使用标签是因为我对输入表单使用了类似的技术。保持一致有助于减少不必要的CSS。

.left和.right只是为了浮动,我希望LI的定位是相对的,并且消除CSS和子弹的特定样式(IE使得这部分有点像PITA,这就是为什么DIV.list &gt; DIV.list-item在实际使用方面可能更好。