在 HTML 中显示表格数据答案

【问题标题】：Displaying tabular data in HTML在 HTML 中显示表格数据
【发布时间】：2012-08-15 23:18:17
【问题描述】：

我以前总是使用表格。然而，有人告诉我，在现代 HTML 设计中使用表格是一个很大的禁忌。在现代 HTML 中显示表格数据有哪些好的和“公认”的方式？

我想做这样的事情：

名字姓氏电话号码布兰妮斯皮尔斯 555-555-5555 乔恩·邦乔维 444-444-4444

我不是 100% 清楚为什么我不应该为此使用表格。但是我看到人们使用<li>'s 他们使用 CSS 使行为更像<div>'s

使用 HTML 和 CSS 设置此类数据的好方法是什么？

【问题讨论】：

您使用了搜索功能吗？ stackoverflow.com/questions/83073/div-vs-table stackoverflow.com/questions/61250/…stackoverflow.com/questions/339210/…
@MaunoV。我认为这些链接对 OP 的问题没有帮助，因为他的问题与表格数据的呈现有关。
嗯。好点，因为类似的问题，我只是觉得我们正在接近“表溢出”！ ;) 但希望它们可以作为与其他人的快速链接。

【解决方案1】：

对于表格数据，请使用表格元素！这就是它的目的，它仍然在这里 (see the HTML5 norm) 并被推荐。

如果您可以使用 CSS 来布局您的屏幕（略高于所有情况的 99%），请不要使用表格来布局屏幕。

【讨论】：

【解决方案2】：

您应该为此使用表格。

它的表格数据，所以它属于 HTML 表格。

表格因过度使用布局而声名狼藉。但它们并不邪恶，并且是在网页上显示数据表时完全可以接受的元素。

【讨论】：

【解决方案3】：

您的示例完全适用于规范中描述的表格（强调我的）：

table元素代表一个表格；也就是说，具有多个的数据尺寸。

对表格数据使用 CSS 是可能的，但很快就很难处理 100% 宽度、单元格等高、文本换行、溢出等问题。表格的布局和渲染模型已明确定义并针对这些场景，而 div 或 dl 或 ol 不是。

有不同的显示类型在非表格元素上支持更多类似表格的布局，但目前还没有很好地实现。

【讨论】：

HTML5 草案不是一个规范（在这个词的任何正常含义中），它有一些奇怪的定义。适用的规范是 HTML 4.01，它说：“HTML 表格模型允许作者将数据——文本、预格式化文本、图像、链接、表单、表单域、其他表格等——排列到单元格的行和列中。”它甚至不包括对多个维度的要求；单行表和单列表也是可能的，尽管情况有所减少。
我们可能会讨论语义，但尽管处于草案或推荐状态的工程师正在开发这些指南，浏览器制造商也是如此。如果我们在讨论一些深奥的新概念，那么我可能会同意，但是将表格数据描述为维度似乎是合乎逻辑的。即使是单行或单个单元格（或两者）表仍然通常具有隐含维度，如果没有，它可能不应该是表。