在HTML 5中使用表格是否合适?

时间:2013-07-06 13:32:02

标签: html5

我需要在逐列网格中显示帖子和相关数据,当然需要table作为单行对齐div的人,使用float s是一件很费时间的事情!

非常感谢您对HTML中的Do和Do not for Table的评论!

2 个答案:

答案 0 :(得分:38)

简单规则 - 将表格用于表格数据,使用其他元素进行演示(使用css设计布局),例如divsectionasidenav等等。这为他们所持有的内容提供了意义,而不是将table用于所有内容

事实上,开发人员在90年代使用表来绘制他们的布局,但是现在,新的CSS3规范非常棒,它让你在设计Flex Boxcolumn-count等布局时非常谨慎。使用box-sizing属性可以更改框模型,使用@media查询,grid等,使用table元素无法实现响应式设计越来越好...因此,table仅用于存储表格数据。

我看到很多开发人员的印象是table应该完全被忽略,而是他们使用了大量的div和100行CSS, display: table; table-cell table-row属性只是为了直接获得一个表格。

因此,即使在HTML5中,如果您使用表格数据 的表格,也可以完全正常。


From W3 Org : (v4.01)

  

表格不应仅仅用作布局方式   文档内容,因为这可能会在渲染时出现问题   非视觉媒体。另外,当与图形一起使用时,这些表格   可能会强制用户水平滚动以查看设计的表格   系统具有更大的显示。为了尽量减少这些问题,作者   应该使用style sheets来控制布局而不是表格。


From (HTML 5)

  

不应将表用作布局辅助工具。从历史上看,很多网络   作者可以使用HTML格式的表格来控制页面布局   难以从这些文档中提取表格数据。在   特别是,可访问性工具的用户,如屏幕阅读器,是   可能会发现使用表格导航页面非常困难   用于布局。如果要使用表格进行布局,则必须使用该表格进行标记   用户代理正确的属性role="presentation"   代表辅助技术并正确传达的表格   作者的意图是希望提取表格数据的工具   来自该文件。

     

使用HTML表格进行布局有多种选择,   主要使用CSS定位和CSS表模型。 [CSS]

答案 1 :(得分:5)

根据规范,<table>表示具有多个维度的数据,并且“不得用作布局辅助工具。”

如果您需要显示包含多个维度的表格数据,那么您一定要使用表格。如果您只需要列,请不要。有许多CSS框架,如bootstrap,可以简化构建网格所需的样式。