CSS规则的“语义”：表格、表格行、表格单元格

Question

最近我一直在使用那些属性，特别是display: table-cell。它在现代浏览器中得到了良好的支持，并且对于某些网格和轻松对齐内容具有许多好处，而无需进行复杂的标记。但在最近几天，我看到有人谈论这个问题，认为使用这些属性是一种不好的实践/方法，就像在这个答案中所说。

优点（我能想到的）：

• 不会向HTML标记添加语义
• 在现代浏览器中得到很好的支持
• 有助于对齐内容
• 对于网格系统非常有用（很可能与对齐内容相结合）

缺点：

• 如果你只使用display: table-cell;缺失部分（行和表）将自动添加

因此，我真的不明白为什么使用这些属性来布局应该是不好的。

我猜这个问题会被关闭（我能理解），但也许有人有一个正面的回答，甚至是对他们的使用持肯定态度。

- insertusernamehere

---

这是一种更加严格的做事方式，但本身并没有使用它造成任何伤害。 - DA.

我可以想到一个明显的理由不这样做。您正在设置的显示选项是“table-cell”，它可能会带来额外的负担，实际上使其看起来像表格数据。例如网格状外观或类似效果。 - TheZ

@TheZ 一些HTML元素具有默认外观。CSS的display属性是完全不同的 - 它不应该带有额外的负担。table，tr等已经默认以网格方式呈现，这是可以接受的。 - kapa

如果与语义意义无关，为什么它叫做表格单元格？他们本来可以给它起任何名字。 - TheZ

这似乎与我最近提出的一个问题有些相关，对于那些感兴趣的人可以参考：http://stackoverflow.com/questions/11763400/correct-semantic-use-of-css-properties。 - Alex W

@bažmegakapa - 我也会说，如果他们只称呼它为 box，或许就没有人会抱怨了。 :) - insertusernamehere

Answer 1

从链接的回答中引用：

不要忘记table-cell不是正确的用法。您不希望将图像视为表格单元格，因为表格单元格应仅包含表格数据。只是提醒一下。坚持语义。

我不会说太多： CSS与语义根本没有关系。

- kapa

---

实际上，CSS 提供了必要的技术来充分利用 HTML 的潜力。没有 CSS，我们仍然会使用基于表格的布局，这会影响语义。这只是一个例子，还有很多其他的例子。 - albert

@albert 这就是我想说的。HTML 处理语义，CSS 处理样式。 - kapa

@albert 嗯，Microformats显然不是CSS。HTML属性也不是CSS。 - kapa

@albert 如果你还是抗拒的话，我没有更多时间来谈论这个问题了。或许你可以尝试阅读一下规范说明。你有没有想过总线句柄是总线的一部分还是你自己的一部分呢？ :) - kapa

在更深入思考后，我们像通过css访问元素一样访问该类；我从不会称呼元素为css。也许我只是需要更清晰地定义它们的互动方式。我们并非都是巨魔。:) 我喜欢学习。积极的讨论能够推动进步。 - albert

Answer 2

我喜欢根据需要设置显示和位置，但几乎总是将任何大元素设置为position: relative;，这样我就可以更轻松地处理它们的子元素。

至于display:table-cell - 它只是改变了它的布局方式。如果你只需要一个整洁的4x4网格，为什么不使用它呢？它非常简单、非常干净，是编写大型（混乱）表格的非常简单的替代方法。

我的建议是“不破坏它，不要修复它”。display:只改变项目的... 显示 ~ 想想看！

我使用尽可能多的display:，比如菜单可能是:inline-block;用于媒体查询或:block用于完整文章，或者:table-cell用于侧边栏/文章部分的漂亮简单的两列位。

- Xhynk

Answer 3

一个优点：提供表格布局而不使用表格元素。一个缺点：会对某些用户代理产生负面影响：http://www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/ 这是一个“一切都取决于…”的问题。

- albert