在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而不是表的良好参数非常感兴趣。


当前回答

作为纯布局使用的表格确实会带来一些可访问性问题(我听说过)。但我理解这里被问到的问题,你正在通过使用表格来确保页面上某些东西的正确对齐来破坏网络。

我以前听到有人说,FORM标签和输入实际上是数据,应该允许它们进入表。

使用一个表来确保一些元素正确排列会导致代码大量增加,这种说法往往包含了单个DIV如何满足所有需求的示例。他们不总是包括10行CSS和特殊的浏览器技巧,他们必须为IE5、IE5.5、IE6、IE7……

我认为这仍然是关于在你的设计中使用平衡。表格在工具箱里,记住它们是干什么用的……

其他回答

CSS布局通常在可访问性方面要好得多,前提是内容以自然的顺序出现,并且没有样式表也有意义。不仅仅是屏幕阅读器难以适应基于表格的布局:它们也使移动浏览器更难正确呈现页面。

此外,使用基于div的布局,你可以很容易地用打印样式表做一些很酷的事情,比如从打印页面中排除页眉、页脚和导航——我认为这是不可能的,或者至少很难用基于表格的布局做到这一点。

If you're doubting that separation of content from layout is easier with divs than with tables, take a look at the div-based HTML at CSS Zen Garden, see how changing the stylesheets can drastically change the layout, and think about whether you could achieve the same variety of layouts if the HTML was table based... If you're doing a table-based layout, you're unlikely to be using CSS to control all the spacing and padding in the cells (if you were, you'd almost certainly find it easier to use floating divs etc. in the first place). Without using CSS to control all that, and because of the fact that tables specify the left-to-right and top-to bottom order of things in the HTML, tables tend to mean that your layout becomes very much fixed in the HTML.

实际上,我认为完全改变一个基于div和css的设计而不改变div是非常困难的。然而,使用基于div和css的布局,就更容易调整不同块之间的间距以及它们的相对大小。

一张桌子来布置也不错。但大多数情况下,仅靠一张表是无法得到所需的布局的。很快你就有了2到3个嵌套表。这变得非常麻烦。

It IS a LOT harder to read. That's not up to opinion. There's just more nested tags with no identifying marks on them. Separating content from presentation is a good thing because it allows you to focus on what you're doing. Mixing the two leads to bloated pages that are hard to read. CSS for styles allows your browser to cache the files and subsequent requests are much faster. This is HUGE. Tables lock you into a design. Sure, not everyone needs the flexibility of CSS Zen Garden, but I've never worked on a site where I didn't need to change the design a little bit here and there. It's much easier with CSS. Tables are hard to style. You don't have very much flexibility with them (i.e. you still need to add HTML attributes to fully control a table's styles)

我大概有4年没有用表格来处理非表格数据了。我没有回头。

我真的很想建议你阅读Andy Budd的《CSS Mastery》。棒极了。

图片在ecx.images-amazon.com http://ecx.images-amazon.com/images/I/41TH5NFKPEL._SL500_BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg

我很惊讶地发现有些问题还没有涉及到,所以除了之前提出的所有非常有效的观点之外,以下是我的2点看法:

.1.CSS & SEO:

a) CSS used to have a very significant impact on SEO by allowing to position the content in the page wherever you want. A few years ago, Search Engines were giving a significant emphasis to "on-page" factors. Something at the top of the page was deemed more relevant to the page than something located at the bottom. "Top of the page" for a spider meant "at the beginning of the code". Using CSS, you could organize your keyword-rich content at the beginning of the code, and still position it wherever you liked in the page. This is still somewhat relevant, but on page factors are less and less important for page ranking.

b)当布局转移到CSS时,HTML页面更轻,因此对于搜索引擎蜘蛛加载更快。(蜘蛛不需要下载外部CSS文件)。快速加载页面是一个重要的排名考虑几个搜索引擎,包括谷歌

c) SEO工作通常需要测试和更改内容,这与基于CSS的布局更方便

。2。生成的内容:

用编程方式生成表要比等效的CSS布局容易得多。

foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

生成表很简单,也很安全。它是自包含的,可以很好地集成到任何模板中。用CSS做同样的事情要困难得多,而且可能根本没有任何好处:很难在飞行中编辑CSS样式表,并且内联添加样式与使用表没有什么不同(内容没有与布局分离)。

此外,在生成表时,内容(在变量中)已经与布局(在代码中)分离,使其易于修改。

这就是为什么一些设计非常好的网站(例如SO)仍然使用表格布局的原因之一。

当然,如果需要通过JavaScript对结果进行操作,那么div是值得的。

。3。快速转换测试

在找出适合特定受众的方法时,能够以各种方式更改布局以找出最佳结果是很有用的。基于CSS的布局使事情变得相当简单

。4。不同的问题有不同的解决方案

布局表通常被鄙视,因为“每个人都知道div和CSS”才是正确的方式。

然而,事实仍然是,表创建更快,更容易理解,比大多数CSS布局更健壮。(是的,CSS可以很健壮,但是在不同的浏览器和屏幕分辨率上快速浏览一下网络就会发现情况并非如此)

桌子有很多缺点,包括维护、缺乏灵活性……但是我们不要把孩子和洗澡水一起丢了。快速可靠的解决方案有很多专业用途。

前段时间,我不得不用表格重写了一个干净简单的CSS布局,因为相当一部分用户会使用对CSS支持非常差的旧版本IE

就我而言,我已经厌倦了“哦,不!”布局的表格!”

至于那些“它不是为了这个目的而设计的,因此你不应该这样使用它”的人群,这不是虚伪吗?你怎么看待所有的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可以被浏览器缓存的好方法;而表没有缓存!

内容和布局之间的分离也使它更容易为您的网站生成打印机友好的布局或不同的皮肤(样式),而不必创建不同的html文件。有些浏览器(如Firefox)甚至支持从视图菜单中选择样式表。

而且我确实认为保持无表格布局更容易。你不需要担心行span, colspan等等。您只需创建一些容器div并将内容放置在需要的位置。也就是说,我认为它也更有可读性(<div id="sidebar"> vs <tr><td>…</td><td>…<td>sidebar</td></tr>)。

这只是一个你必须学会的小“技巧”(一旦你掌握了这个技巧,我认为它会更容易,更有意义)。