讨论这个话题的前提是我们直接无视IE6/IE7浏览器，查看浏览器支持情况。有时，我们希望使用HTML table的布局属性，但又不想使用table的语义，因为我们不是用来处理表格数据（tabular data）。比如:

• 创建等高列；
• 实现大小不确定元素的垂直居中；
• 容器内子项目数目未知，子项目平均分配容器的水平空间；

查看应用实例demo页

这种情况下，你可以为html元素使用css定义display:table, display:table-row, display:table-cell来达到目的。同时也不会破坏我们的结构，标签选用符合语义化要求。

display:table和屏幕阅读器

使用css改变一个元素的display属性不会改变HTML的底层语义。从逻辑上讲，display:table不应该使屏幕阅读器把css表格看作真正的表格。

456 berea street最近做了一个测试，测试屏幕阅读器在不同浏览器下如何对待css 表格，在此基础上我又添加了测试内容，下面是结果摘要：

NVDA + IE：不会将css表格读为“表格”。
NVDA + chrome：不会将css表格读为“表格”。
NVDA + Firefox：原作者认为除只含有一个单元格的表格外，css表格会被读为“表格”。我的测试结果是：只有多行多列的情况下，才会读为“表格”，单行多列，单行单列均不会读作“表格”。
VoiceOver：不会将 css 表格读为“表格”。
ORCA:在页面中进行表格导航时，会将所有的css表格读为“表格”。

这是 display:table 测试页面，如有兴趣，自己可试一下。

另外有读者测试了Window-Eyes 和 JAWS在IE和Firefox下的表现，均不会把css表格作为“表格”对待。

综上所述，使用display:table来实现我们前面提到的例子，只要不是模拟“多行多列”的情况，就基本没有问题。