我应该使用 HTML 表格布局还是新的 CSS display:table-cell 代码？答案

【问题标题】：Should I use HTML table layout or the new CSS display:table-cell code?我应该使用 HTML 表格布局还是新的 CSS display:table-cell 代码？
【发布时间】：2011-09-01 05:15:36
【问题描述】：

我使用过表格，但从未使用过 CSS 的处理方式。现在我有一个 3 行 2 列的数据表。有人可以解释我如何使用 CSS DIV 来做到这一点，而且最重要的是我想知道 CSS 是否是做到这一点的方法以及有哪些限制。

【问题讨论】：

如果是数据表，您仍然可以使用表。 anti-table 参数更多是用于使用表格进行布局。
如果是数据表，您应该使用表。
@bpeterson76：这与 CSS3 无关...

标签： html css css-tables

【解决方案1】：

当心display: table-cell。它不适用于反浏览器（不能说出名字的“浏览器”）。

另外，如果您有表格数据，请使用表格。在语义上有意义时使用其他标签（例如<p> 用于段落，<ol> 用于有序列表等），或<div>s 用于布局。

【讨论】：

你的意思是那个名字听起来像痛苦的哭声的人？与“Aieeee！”押韵？

【解决方案2】：

如果它是一个数据表，那么最好的（也是最符合语义的）选择就是坚持使用旧的 <table>。

对display: table-cell的支持不错，见：http://caniuse.com/#search=table

它适用于所有现代浏览器和 IE8+。

它在 IE7 中不起作用，这对一些人来说是一个限制因素。

【讨论】：

我有充分的理由使用它而不是吗？

@Monica，不是真的...<table> 是获取表格数据的方式。这是它的预期语义目的，也是它的创建目的。人们开始滥用它来进行布局，因为没有更好的选择。它应该用于数据，而不是布局。

很抱歉继续讨论这个话题，但如果

这么好，那么为什么会有 display: table-cell 标记。只是询问以防万一将其用于其他用途。

@rdineiu：IE7于2006年10月发布；这在网络浏览器的世界中是古老的。但是，是的，它仍然有一些用途：gs.statcounter.com/#browser_version-ww-monthly-201004-201104 - 全球大约 8%。

@Monica K：display: table-cell 始终适用于您想要table 的行为，但没有the huge array of downsides。以下是display: table-cell 何时有用的具体示例：http://stackoverflow.com/questions/5858108/how-to-make-children-auto-fit-parents-width-only-with-css/5862782#5862782

【解决方案3】：

除了语义之外，将表格用于表格数据还可以更好地支持屏幕阅读器软件。如果您不编写屏幕阅读器可以轻松阅读的代码，那么您实际上会阻碍残疾人的可用性。

只是为了好玩，试试你的 CSS 方法。获取适用于 Firefox 的网站管理员工具栏插件的副本，并使用它来关闭 CSS。现在，这值得吗？想象一下，一个屏幕阅读器正试图弄乱这些乱七八糟的东西......

【讨论】：

【解决方案4】：

两件事：

display: table-cell 不是新的，它是在 CSS 2 中的

display: table-cell 不应该用于除 tr 元素之外的任何东西，除非你喜欢追踪特定于浏览器的不一致和错误

我有一个数据表

您正在处理表格数据——使用表格来执行此操作并没有错。事实上，这将是标记所述数据的最佳实践和语义方式

【讨论】：

【解决方案5】：

使用表格显示表格数据。

但是，对于与表格数据无关的任何其他类型的布局，您应该真正使用 div。

【讨论】：

【解决方案6】：

这真的取决于您要做什么，如果只是网页设计，则使用浮动 div，如果是表格数据，则绝对使用表格，这就是它们的目的。

【讨论】：