在 HTML 5 中使用表格好吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17503456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:50:25  来源:igfitidea点击:

Is it good to use tables in HTML 5?

html

提问by Dangling Cruze

I need to display post and related data in column-wise grid and certainly require tablefor those as aligning divs in single line, using floats is a time consuming thing!

我需要在列网格中显示帖子和相关数据,当然需要tabledivs对齐到单行,使用floats 是一件耗时的事情!

Will appreciate your reviews on Do's and Don't for Tables in HTML5!

感谢您对 HTML5 中表格的注意事项和注意事项的评论!

回答by Mr. Alien

Simple rule - Use tables for tabular data, use other elements for presentation(designing layouts using css) like div, section, aside, navetc . which provides meaning to the content they hold rather than using tablefor everything

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

The fact is, developers used tables in 90s for drafting their layouts, but now, new CSS3 spec is amazing, it gives you so much hold on designing layouts like Flex Box, column-count, behavior of the box model can be altered by using box-sizingproperty, responsive designs are getting better and better using @mediaqueries, grids etc., which you cannot achieve with tableelement... and hence, tableis only used for storing tabular data.

事实是,开发人员在 90 年代使用表格来起草他们的布局,但是现在,新的 CSS3 规范令人惊叹,它让您可以在设计布局(如Flex Boxcolumn-count、盒模型的行为可以通过使用box-sizing属性、响应式使用@media查询、grids 等,设计越来越好,而table元素无法实现这些……因此,table仅用于存储表格数据。

I've seen many developers having an impression that tableshould be completely ignored, and instead they use a whole lot of divwith 100 lines of CSS, applying display: table;table-celltable-rowproperties just to get a single table straight.

我见过许多开发人员有一种table应该完全忽略的印象,而是使用大量的div100 行 CSS,应用display: table;table-celltable-row属性只是为了得到一个表格。

So even in HTML5 it is COMPLETELY OK if you use tables for tabular data.

因此,即使在 HTML5 中,如果您将表格用于表格数据也是完全可以的



From W3 Org : (v4.01)

来自 W3 组织:(v4.01)

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheetsto control layout rather than tables.

表格不应纯粹用作布局文档内容的手段,因为这在呈现到非视觉媒体时可能会出现问题。此外,当与图形一起使用时,这些表格可能会迫使用户水平滚动以查看在具有更大显示器的系统上设计的表格。为了尽量减少这些问题,作者应该使用样式表来控制布局而不是表格。



From (HTML 5)

来自 (HTML 5)

Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role="presentation"for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.

There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model. [CSS]

表格不应用作布局辅助工具。从历史上看,许多 Web 作者使用 HTML 格式的表格来控制他们的页面布局,这使得从此类文档中提取表格数据变得困难。特别是,屏幕阅读器等辅助功能工具的用户可能会发现使用用于布局的表格来导航页面非常困难。如果要使用表格进行布局,则必须用role="presentation"用户代理的属性进行标记,以便将表格正确地表示给辅助技术,并将作者的意图正确传达给希望从文档中提取表格数据的工具。

有多种使用 HTML 表格进行布局的替代方法,主要使用 CSS 定位和 CSS 表格模型。[CSS]

回答by Explosion Pills

According to the specifications, <table>represents data with more than one dimension and "must not be used as layout aids."

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

If you need to display tabular data with more than one dimension, then you should definitely use a table. If you just need columns, don't. There are many CSS frameworks out there like bootstrap that can simplify the styles you need to build a grid.

如果您需要显示多维的表格数据,那么您绝对应该使用表格。如果您只需要列,请不要。有许多 CSS 框架,例如 bootstrap,可以简化构建网格所需的样式。