Question

我一直在考虑这几天，并想知道哪个是制作论坛的更好的布局选项：桌子或分区？

现在具体来说，这里有一些标准：

我最初的想法是表格在响应式布局中往往存在问题，而典型的论坛布局可以通过div来完成，尽管它们可能需要一些不太常见的方法。

这两种格式都有好处吗？表格布局是否更容易让搜索引擎抓取？我试图避免过多的基于意见的观点，例如div对桌子的偏好，除非有一个非常有力的理由。

修改

我的问题似乎有些混乱，所以我要澄清一下。我的问题不是整个网站格式。事实上，这个项目是利用bootstrap。我的问题是：为论坛布局使用表格是否有优势，即列出论坛类别，列出线程等等。这些事实上是表格数据。那些的表怎么样？这不是纯粹的数据，但它的性质仍然有点表格。

再一次，我的问题不是讨论网页布局表格的优点，正如“可能重复”所暗示的那样。

Answer 1

也许只是弹性框？

Answer 2

这可能仅仅是我个人的观点，但我认为表格是用来构建数据的。是的，曾经有一段时间表格大量用于布局，但我想我们很高兴这些时间结束了。

您的网站应该在语义上正确，不仅仅是语法上的。我认为这句话总结得很好：

＆＃34;表格不应仅用作布局文档的方法内容，因为这可能在渲染到非视觉时出现问题媒体。此外，当与图形一起使用时，这些表可能会强制使用用户水平滚动以查看在系统上设计的表格更大的显示屏。为了尽量减少这些问题，作者应该使用风格用于控制布局而不是表格的工作表。＆＃34;

有一些UI框架可以很好地完成这项工作（事实上，Bootstrap的面向列的方法非常接近一个表格）并且我非常确定您将使用语义正确的标记来实现所需的外观。我不是搜索引擎优化专家，但我认为桌子不是你在履行友好语义的情况下拍摄的。

Answer 3

这取决于您寻找的浏览器支持级别。 Flex-box仅适用于IE 10及更高版本。有像display：table-cell这样的选项（试图使元素的行为像td表元素一样），但同样它对旧版浏览器的浏览器支持有限。

表格应该保留用于表格数据，而不是用于布局，特别是当现在有很多框架（比如Bootstrap）时，它会为你处理它。

我发现非常酷的一件事是Masonry.js，它重新排列页面上的元素，根据它们的大小和周围其他元素的大小找到它们的位置。它适用于IE8及更高版本以及所有其他主流浏览器。唯一的缺点是它需要javascript，因为Flex-Box（它给出了类似的结果）没有。

或者，您可以使用网格结构（类似于Bootstrap）为表格布局编写自己的css，其中您有一组12列布局，行包含跨越1-12列的单元格。

Answer 4

使用<div>也可以帮助制作布局响应和表格式。您只需稍微更改div属性，就可以在使用表时使用它！以下是将<div>转换为表格式

可以进行的主要更改

<head>
<style type="text/css">
.div { display:inline-block; }
</style>
</head>
<div class="div">Hello</div> <div class="div">World!</div>

显示：内联块;将强制所有具有相同属性的div进入一行。