代码之家 › 专栏 › 技术社区 › Martin

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

layout css html

Martin · 技术社区 · 17 年前

|Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯Â¯|
| 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 回复 | 直到 17 年前

hbw 17 年前

您可以使用CSS来实现这一点,但请考虑您试图呈现的数据类型:它实际上是一个桌子从本质上说,是数据。所以我建议用一张桌子来做这个。

真的,桌子会受到很多高射炮的攻击,但是你唯一应该避免使用桌子的时候是在你使用桌子的时候 明确地 用于布局目的(即,不一定用于显示表格)。在这种情况下使用表格是正确的表格用法。

Joe Phillips 17 年前

不管我多么讨厌桌子的布局,我都会说桌子。

Pervez Choudhury 17 年前

因为内容基本上是表格数据,所以请使用表格,但请确保在状态、持续时间等标题中充分使用TH。

Alex Mcp 17 年前

. 不要用表格来展示你的标志和标题。这不是表格数据。您是否以正方形的方式显示数据,以显示信息行与列之间的关系?那就用桌子吧!

考虑到我对语义标记的理解(谢谢Dan C!),对于您的特殊用途,我建议使用表或定义列表。这准确地描述了你想要写的东西。

Drevak 17 年前

我现在正在开发一个表单,我正在使用一个定义列表。例如:

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

这样做有点困难,但代码看起来更干净。(对我来说,用桌子也可以)

Nathan Long 17 年前

取决于你想要什么

如果这是您想要的,我建议使用CSS样式的div。如果更清楚的是“列和行”布局,那么使用表格。

Allen Rice 0x6A75616E 17 年前

Tracker1 17 年前

我个人避免使用表,除非数据是非常表驱动的(类似excel的结果)。在这种情况下,收集div,甚至基于li的可能是最好的。(下面是psuedo标记)

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和项目符号的特定样式(即使此部分有点PITA,这就是为什么DIV.list>DIV.list-item在实际使用中可能更好的原因)。