讨论这个话题的前提是我们直接无视IE6/IE7浏览器,查看浏览器支持情况。有时,我们希望使用HTML table的布局属性,但又不想使用table的语义,因为我们不是用来处理表格数据(tabular data)。比如:
- 创建等高列;
- 实现大小不确定元素的垂直居中;
- 容器内子项目数目未知,子项目平均分配容器的水平空间;
这种情况下,你可以为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来实现我们前面提到的例子,只要不是模拟“多行多列”的情况,就基本没有问题。