在HTML中,表格不应该用于布局,这似乎是普遍的观点。

Why?

我从来没有(老实说,很少)看到过支持这一点的有力论据。通常的答案是:

It's good to separate content from layoutBut this is a fallacious argument; Cliche Thinking. I guess it's true that using the table element for layout has little to do with tabular data. So what? Does my boss care? Do my users care?Perhaps me or my fellow developers who have to maintain a web page care... Is a table less maintainable? I think using a table is easier than using divs and CSS.By the way... why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs. Readability of the codeI think it's the other way around. Most people understand HTML, few understand CSS. It's better for SEO not to use tablesWhy? Can anybody show some evidence that it is? Or a statement from Google that tables are discouraged from an SEO perspective? Tables are slower.An extra tbody element has to be inserted. This is peanuts for modern web browsers. Show me some benchmarks where the use of a table significantly slows down a page. A layout overhaul is easier without tables, see css Zen Garden.Most web sites that need an upgrade need new content (HTML) as well. Scenarios where a new version of a web site only needs a new CSS file are not very likely. Zen Garden is a nice web site, but a bit theoretical. Not to mention its misuse of CSS.

我对使用divs + CSS而不是表的良好参数非常感兴趣。


当前回答

根据过去的经验,我必须选择DIV。即使在OOP中,主要目的也是减少对象之间的耦合,因此这个概念可以应用于DIVS和表。表用于保存数据,而不是围绕页面排列数据。DIV是专门设计用于在页面周围排列项目的,因此设计应该使用DIV,表应该用于存储数据。

此外,编辑由表格组成的网站是非常困难的(在我看来)

其他回答

根据我对表的了解,如果嵌套了太多的表,在呈现页面时浏览器会有很大的开销。

1 -浏览器必须等待呈现最终视图,直到整个表被加载。

2 - The algorithm to render the table is expensive and is not in a single go. The browser, as and when, gets the contents, will try to render calculating the content width and height. So, if you are having nested tables, say, the browser has received the first row and the 1st cell is having large amount of content and width and height not defined, it will calculate the width and will render the first row, In the mean while it gets the 2nd row will cell#2 having loads of content! It will now calculate the width for 2nd row cells.. What about the first ? It will calculate widths recursively. That's bad at client side. (To site an example) As a programmer, you'll optimize stuffs such as time to fetch data, optimized data structures and etc. You optimize things to complete on server side, say in2 secs, but end user in getting the final view in 8 secs. What is wrong here ? 1. May be network is slow! What if network is fine ? What is network is delivering the contents in next 1 sec ? Where is this extra 5 secs getting consumed ? Thing to worry about-- The browser might be taking lot of time in estimating and rendering the tables!

如何优化表? 如果你使用表格,我建议,总是定义单元格的宽度。这并不能保证浏览器会盲目地只取这个宽度,但会对浏览器决定初始宽度有很大的帮助。

但是,最后,div是CSS可以被浏览器缓存的好方法;而表没有缓存!

对于为了简单或临时的东西而拼凑在一起的HTML,表很有用。如果你正在构建一个大型网站,你应该使用div和CSS,因为随着时间的推移,随着网站的变化,它将更容易维护。

使用表格布局的工具可能会因为创建布局所需的大量代码而变得异常沉重。SAP的Netweaver Portal默认使用TABLE来布局页面。

在我目前的工作中,生产SAP门户有一个主页,它的HTML超过60K,有7个表那么深,在页面中有3次。再加上Javascript,误用了16个iframe,其中有类似的表格问题,CSS过重等,页面重量超过5MB。

花点时间降低页面重量,这样你就可以利用带宽与用户进行互动,这是值得的。

另外,别忘了,表格在移动浏览器上的渲染效果并不好。当然,iPhone拥有强大的浏览器,但并不是每个人都有iPhone。对于现代浏览器来说,表呈现可能是花生,但对于移动浏览器来说,它却是一堆西瓜。

我个人发现很多人使用了太多的<div>标记,但如果适当,它可以非常干净且易于阅读。你提到人们阅读CSS比阅读表格更困难;就“代码”而言,这可能是真的;但是在读取内容方面(查看>源代码),用样式表理解结构要比用表容易得多。

我想使用表格元素进行布局确实与表格数据没有什么关系。那又怎样?我的老板在乎吗?我的用户关心吗?

谷歌和其他自动化系统确实关心这些问题,而且它们在许多情况下同样重要。语义代码对于非智能系统来说更容易解析和处理。