html - 构建小部件 (HTML/CSS)——表格还是 div？

标签 html css html-table

<分区>

想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它.

关闭 4 年前。

Improve this question

(有关结构和可能的内容，请参见下面的小部件图像)。所以这是交易:在我正在处理的应用程序中，有一个具有可变内容的固定大小的小部件。内容有 3 到 5 个“内容”容器，具体取决于小部件显示的位置和时间。但是，小部件本身的大小始终相同。

每个“容器”中的内容始终垂直和水平对齐到中心。组合(见下图)是:

Status 容器始终存在(容器 1)
第二“行”有 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。

在我看来，表格方法更简单，尤其是在水平和垂直对象对齐方面，但我想与其他人核实一下，因为我知道表格往往是禁止的。不过，我实际上认为表格在这里是合适的，因为它实际上显示表格数据作为其内容!

想法？

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

最佳答案

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

总而言之，您真的应该选择适合您的那个。

关于html - 构建小部件 (HTML/CSS)——表格还是 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13131313/