Question

（请参阅下面的小部件图片了解结构和可能的内容）。所以这就是交易：在我正在开发的应用程序中，有一个固定大小的小部件，内容可变。内容包含3到5个“内容”容器，这些容器根据窗口小部件的显示位置和时间而变化。但是，小部件本身的大小始终相同。

每个“容器”内的内容始终与中心垂直和水平对齐。组合（见下图）是：

状态contianer始终存在（容器1）
第二排'有一个或两个容器;如果一个，它横跨整个宽度;如果两个，每个是总数的1/2。
第3行与第2行相同，添加/更改也可以为空

现在 - 正如我所见，有两种方法可以解决这个问题：Divs和Table。

如果是div，那就像是：

<div outer container>
 <div container 1></div>
 <div container 2>
  <div container 2a></div>
  <div container 2b></div>
 </div> end container 2
 <div container 3>
  <div container 3a></div>
  <div container 3b></div>
 </div> end container 3
</div> end outer container

如果是桌子，那就是：

<table>
 <tr colspan=2><td>Container 1</td></tr>
 <tr><td>Container 2a</td><td>Container 2b</td></tr>
 <tr><td>Container 3a</td><td>Container 3b</td></tr>
</table>

如果第二个或第三个容器只有一个“列”，请适当地应用colspan。

在我看来，像Tables方法更简单，特别是在涉及水平和垂直对象对齐时，但我想与其他人一起检查，因为我知道表往往是禁止的。我实际上相信这里的表是合适的，因为它实际上是将表格数据显示为其内容！

思考？

Architecture of Widget http://www.5sn1.com/images/quantity_widget.png

Answer 1

使用表格进行布局通常不赞成，但没有真正的理由不使用它们。正如你所说，它确实使它变得更容易和更合乎逻辑。

总而言之，你真的应该选择适合你的任何作品。

Answer 2

我建议不要使用适合您的任何内容。是的，在短期内它将是最简单的方法，但是，稍后维护/更新布局可能会变得更加困难。我想说，不仅要考虑'现在'，还要考虑扩张，或者说将来如果另一个开发者需要接管这项工作。

使用适用于网站/应用的。如果最重要的是站点UI是100％完美图片，或100％跨浏览器兼容，或100％验证代码。可悲的是，通常不可能拥有所有这三种情况。因此，使用适用于网站的内容并且可维护。

我个人会在显示表格数据时使用表格，而不是在DIVs 周围玩杂耍，如果它有意义的话。

Answer 3

在我看来，这两种方法都很好，但如果你的目标是那些小部件是跨浏览器的，那么使用表格就会少一些麻烦，就像你提到的垂直对齐一样。请记住，在大多数情况下，布局表是坏的，但即使我在老板将IE 7/8调用到表中时也使用它们。

我不认为该示例被视为表格数据，通常是数据网格。

无论如何，像Kolink说的那样，取决于你，只需使用适合你的方法。

构建一个小部件（HTML / CSS） - 表格或div？

3 个答案: