CSS规则的“语义”：table，table-row，table-cell

Question

我最近一直在使用这些属性，特别是display: table-cell。它在现代浏览器中得到了很好的支持，它对一些网格有很多好处，并且可以非常容易地对齐内容，而不需要棘手的标记。但是在过去的几天里，我看到有人在讨论这个问题，因为这是使用这些属性的不良做法/方法，例如answer。

优点（我现在想到的）：

• 不为HTML标记添加语义
• 在现代浏览器中得到很好的支持
• 有助于对齐内容
• 对网格系统很有帮助（很可能是对齐内容的组合）

缺点

• 如果您只是使用display: table-cell;，则会自动添加缺失的部分（行和表）

所以我真的不明白，为什么使用那些布局会很糟糕。

我想这个问题会被关闭（我可以理解），但也许有人会有一个不错的答案 - 甚至对他们的使用都是积极的。

Answer 1

来自linked answer：

的引用

  

不要忘记表格单元格不正确。你不想要   要作为表格单元格进行处理的图像，因为只有表格单元格   包含表数据。只是提出警告标志。 坚持下去   语义

我不会这么长： CSS与语义无关。

Answer 2

我喜欢根据需要设置显示和位置，不过任何大的元素我几乎总是设置为position: relative;，所以我可以更容易地处理他们的孩子。

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

我的建议是“如果没有破产，就不要修理它”。 display:只会改变项目的方式...... 显示〜去图！

我根据需要使用尽可能多的display:，例如媒体查询的菜单:inline-block;或完整文章的:block，或:table-cell的好文章在侧栏/文章的一部分上简单的2列位。

Answer 3

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