我为什么要使用display:table而不是table

Question

使用div构建我的站点并应用display:table属性(display:tr,display:tr)有什么好处.这是不是意味着div的行为与tr和td元素完全相同？

我知道我可能根本不应该使用表格或表格行为进行布局,但我只是好奇是否存在差异和好处？

Answer 1

使用div构建我的站点并应用display:table属性(display:tr,display:tr)有什么好处.

在我看来,没有任何东西,除了你剥夺了与旧版浏览器的兼容性.使用DIV的想法display: table-*在某种程度上比<table>s 更好,是愚蠢的IMO,以及对表格元素的完全误导的歇斯底里的结果.(不要攻击你@Nimo,只是批评一些把"桌子是邪恶的"模因的人太过分了.)

表应该用于表示表格数据,而不是被滥用于布局.

但是,有一些表,使用纯CSS仍然很难模拟表.您需要大量的黑客攻击,有时甚至需要基于JavaScript的解决方法才能使这些工作成功.

您应该以不依赖于这些能力的方式设计布局.

在极少数情况下,您确实需要它们.但是,无论你是使用正确的<table><tr>还是脑死的<div style="display: table"><div style="display: table-row">(哪一个更具语义性和更好的可读方式？)无关紧要.

如果你需要 display: table-*你的布局,你手头有一种罕见的情况,或者你已经在角落里画了自己.无论哪种方式,使用a <table>,您至少可以获得一致的浏览器支持.

我认为使用`<div>`元素,外部样式表和描述性类名以及非表格数据的`<table>`元素总是*更具语义和可读性. (7认同)
@ghoppe 指出，无论如何，`table` 标签在布局中在语义上总是错误的。我仍然更喜欢使用基于`<table>` 的构造的标记，但这取决于品味。无论如何，`div` 和 `display: table-*` 带来了表格布局固有的*所有*问题，加上缺乏向下兼容性的额外问题，以及一些不了解问题思维的人的额外问题他们现在做得很好，因为嘿，我们没有使用 `<table>` ，对吗？这就是我的咆哮的最终目的。 (2认同)
我宁愿通过创建适当的`<div>`元素来支持残疾用户的辅助阅读技术,而不是支持旧的过时的IE版本,这些版本仅用于将Web拖动到他们的级别.另外,如果我想稍后更改页面的布局,重新设置我的div比重新布局表要容易得多. (2认同)