我需要在逐列网格中显示帖子和相关数据,当然需要table
作为单行对齐div
的人,使用float
s是一件很费时间的事情!
非常感谢您对HTML中的Do和Do not for Table的评论!
答案 0 :(得分:38)
简单规则 - 将表格用于表格数据,使用其他元素进行演示(使用css设计布局),例如div
,section
,aside
,nav
等等。这为他们所持有的内容提供了意义,而不是将table
用于所有内容
事实上,开发人员在90年代使用表来绘制他们的布局,但是现在,新的CSS3规范非常棒,它让你在设计Flex Box,column-count
等布局时非常谨慎。使用box-sizing
属性可以更改框模型,使用@media
查询,grid
等,使用table
元素无法实现响应式设计越来越好...因此,table
仅用于存储表格数据。
我看到很多开发人员的印象是table
应该完全被忽略,而是他们使用了大量的div
和100行CSS, display: table;
table-cell
table-row
属性只是为了直接获得一个表格。
因此,即使在HTML5中,如果您使用表格数据 的表格,也可以完全正常。
表格不应仅仅用作布局方式 文档内容,因为这可能会在渲染时出现问题 非视觉媒体。另外,当与图形一起使用时,这些表格 可能会强制用户水平滚动以查看设计的表格 系统具有更大的显示。为了尽量减少这些问题,作者 应该使用style sheets来控制布局而不是表格。
不应将表用作布局辅助工具。从历史上看,很多网络 作者可以使用HTML格式的表格来控制页面布局 难以从这些文档中提取表格数据。在 特别是,可访问性工具的用户,如屏幕阅读器,是 可能会发现使用表格导航页面非常困难 用于布局。如果要使用表格进行布局,则必须使用该表格进行标记 用户代理正确的属性
role="presentation"
代表辅助技术并正确传达的表格 作者的意图是希望提取表格数据的工具 来自该文件。使用HTML表格进行布局有多种选择, 主要使用CSS定位和CSS表模型。 [CSS]
答案 1 :(得分:5)
根据规范,<table>
表示具有多个维度的数据,并且“不得用作布局辅助工具。”
如果您需要显示包含多个维度的表格数据,那么您一定要使用表格。如果您只需要列,请不要。有许多CSS框架,如bootstrap,可以简化构建网格所需的样式。