为什么我应该使用 display:table 而不是 table答案

【问题标题】：Why should I use display:table instead of table为什么我应该使用 display:table 而不是 table
【发布时间】：2010-05-19 16:28:39
【问题描述】：

用 div 构建我的网站并应用 display:table 属性（display:tr、display:tr）有什么好处。这是否意味着 div 的行为与 tr 和 td 元素完全一样？

我知道我可能根本不应该使用表格或表格行为进行布局，但我只是好奇是否有区别和好处？

【问题讨论】：

标签： html css css-tables

【解决方案1】：

用 div 构建我的网站并应用 display:table 属性（display:tr, display:tr）有什么好处。

除了你take away compatibility with older browsers之外，我认为没有。使用带有display: table-* 的DIV 比<table>s 更好的想法是愚蠢的IMO，并且是对表格元素完全被误导的歇斯底里的结果。（不是攻击你@Nimo，只是批评一些将“桌子是邪恶的”模因过分的人。）

表格应该用于表示表格数据，而不是被误用于布局。

但是，表格的某些功能仍然很难使用纯 CSS 来模拟。您要么需要大量的 hack，有时甚至需要基于 JavaScript 的变通方法才能使这些工作正常进行。

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

在极少数情况下，您确实需要它们。但是，无论您使用正确的<table><tr> 还是脑残的<div style="display: table"><div style="display: table-row"> 都没有关系（顺便说一句，哪个更语义化且可读性更好？）

如果您需要 display: table-* 用于您的布局，那么您手头就有一种罕见的情况，或者无论如何您已经把自己画在一个角落里。无论哪种方式，使用<table>，您至少可以获得一致的浏览器支持。

【讨论】：

我认为使用<div> 元素、外部样式表和描述性类名称总是比<table> 非表格数据元素更具语义和可读性。跨度>
@ghoppe 指出 table 标签在布局中总是语义错误，无论如何。我仍然更喜欢使用基于<table> 的结构的标记，但这取决于口味。无论如何，div 和 display: table-* 带来了表格布局固有的所有问题，以及缺乏向下兼容性的额外问题，以及一些不理解该问题的人的额外问题认为他们现在做得很好，因为嘿，我们没有使用 <table> s，对吧？这就是我咆哮的最终目的。
抱歉 Pekka，我没有关注。您是说通过使用table 进行布局将错误的语义应用于您的页面可以吗？或者使用 display:table CSS 展示样式以某种方式将表格语义分配给 div？或者，使用足够的 div 标记页面以便能够明智地应用 display:table* 必然会导致与使用 table 的语义错误相同程度的可访问性问题？
@Alohci 我主要是说当您需要桌子的功能时，正确地或通过愚蠢的计划，您最好使用@ 987654337@ 元素，因为它比旧版 IE 中的 display: table* 得到更好的支持，后者仍然起作用。此外，<table> 标签的大多数问题也适用于display: table 演示风格；除了您提到的语义和可访问性。我看到人们采用display: table 并认为通过这个，所有关于布局表格的负面影响都消失了——但事实并非如此。
我宁愿通过创建适当的<div> 元素来支持残疾用户的辅助阅读技术，而不是支持旧的过时的 IE 版本，这些版本只能将网络拖到他们的水平。此外，如果我以后想更改页面的布局，重新设置 div 的样式要比重新布局表格容易得多。

【解决方案2】：

下面解释了为什么在 TABLE 元素上使用 DIV。

表格元素的优点：大多数设计师使用表格来获得一致的外观。桌子也很容易维护。 table 的另一个优点是它兼容大多数浏览器。

表格元素的缺点：所有这些都是有代价的：嵌套表格过多会增加页面大小和下载时间。更多的表格元素会下推重要内容，因此搜索蜘蛛不太可能将内容添加到搜索引擎。

DIV 元素的优点： div 与 CSS 我们可以实现相同的基于表格的页面结构并减少页面上的元素数量，从而使页面加载更快。它还使页面与搜索引擎蜘蛛更加兼容。

DIV 元素的缺点：这样做的主要缺点是并非所有 CSS 元素都与浏览器不兼容。因此，我们必须编写一些自定义 CSS 来解决问题。

全文：http://www.codeproject.com/KB/HTML/DIVwebsite.aspx

display: table 告诉元素显示为表格。嵌套元素应显示为表格行和表格单元格，模仿良好的旧 TR 和 TD。还有一个 display: table-column，但它应该什么都不显示，只像 COL 一样提供样式信息。我不确定这是如何工作的。

更多关于 div 显示样式：http://www.quirksmode.org/css/display.html

【讨论】：

【解决方案3】：

显示：表格；并不意味着您将 div 转换为表格，它只是使某些属性（如垂直对齐）在它们通常不会工作的地方工作。这与使用表格进行布局不同。

【讨论】：

这根本没有回答问题。
Re “不像使用表格进行布局”。不知道你的意思是什么 - 它非常喜欢使用表格进行布局。这才是重点。（例如，问题问 “这不是意味着 div 的行为与 tr 和 td 元素完全一样吗？” 答案是是。I show the 1:1 correspondence here. ) 你获得了表格的功能，但是通过 CSS 而不是嵌入在 HTML 标签中。（因此您将布局与内容分开，因此可以灵活地用不同的布局替换该布局。）

【解决方案4】：

表格只能用于表示表格数据。 div 是对内容进行分组的容器。就那么简单。 display: table 只为您提供表格的布局属性。但不兼容

【讨论】：