在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而不是表的良好参数非常感兴趣。
Flex有一个标签，用于在垂直列中布局内容。说实话，我不认为他们在布局/内容方面做得很好，但至少他们已经解决了这个问题。
像许多对CSS感到沮丧的人一样，我也到处寻找一个简单的答案，当我以为我找到了它时，我感到兴奋，然后当我在Chrome中打开页面时，我的希望破灭了。我肯定没有足够的技能说这是不可能的，但我还没有看到任何人提供样本代码供同行评审，明确地证明它可以可靠地完成。
那么，这个岛的CSS方面有人能推荐一种布局垂直列的心态/方法吗?我尝试过在第二行和第三行绝对定位，但我最终与到处重叠的东西和浮动有类似的问题，如果页面缩小。
如果这个问题有答案，我会欣喜若狂地做正确的事情——只要告诉我一些像“嘿，你试过**流:垂直|水平”这样的事情，我就完全不烦你了。
根据我对表的了解，如果嵌套了太多的表，在呈现页面时浏览器会有很大的开销。
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可以被浏览器缓存的好方法;而表没有缓存!
