为什么要使用div而不是表格来存储表格数据？

Question

我是从价格比较网站上获取的：

您是否希望上图中的数据以表的形式组织？即两行六列。它看起来像是divs。

我看过生成的HTML，发现它使用Divs而不是表格。为什么是这样？我认识到div比布局更适合表，但这不是布局。它正在显示数据。

我花了几个小时对此进行研究，许多网站都在讨论div和布局表，但是似乎没有人在讨论显示数据的div。因此是问题。

Answer 1

在历史的某一时刻，渲染表比使用DIV慢。现在这可能是过去的遗迹，但是由于那时围绕CSS机制构建了一个大型生态系统，因此它可能只是停滞不前。我不确定现代浏览器是否一定会如此。这些天，除了摆桌子以外，他们正在做的事情要复杂得多。

此外，还创建了用于表格数据显示的表，不一定是页面格式。如果必须使用无法真正制成表格的组成来呈现页面，那么您可以执行的操作受到限制。 DIV似乎为页面布局提供了更多的粒度。

Answer 2

两个词：响应式设计！

在使用带有多列的 [HttpPost] public async Task<ActionResult<int>> Process() { string jsonString = await GetRequestBody(); ... } private async Task<string> GetRequestBody() { string jsonString; using (StreamReader reader = new StreamReader(Request.Body, Encoding.UTF8)) { jsonString = await reader.ReadToEndAsync(); } return jsonString; } 时使DOM响应可能是一个主要麻烦。 HTML <table>是非常强大的DOM元素，可以将其配置为在更宽的视口上表现得像表，同时能够适应较小的视口（使用媒体查询和其他更高级的显示选项，例如flexbox）。例如，在宽屏监视器上观察下面的代码段，然后减小视口的宽度。使用媒体查询使DOM响应非常简单。想象一下使用HTML表的情况。由于不能强制将表行呈现为列，因此即使不是不可能，使其具有响应能力也是一场噩梦！

div

#container {
  display: flex;
  flex-direction: row;
}

@media (max-width: 1250px) {
  #container {
    flex-direction: column;
  }
}