在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而不是表的良好参数非常感兴趣。
1:是的,你的用户很关心。如果他们使用屏幕阅读器,它就会丢失。如果我使用任何其他试图从页面中提取信息的工具,遇到不用于表示表格数据的表是一种误导。
div或span用于分隔内容是可以接受的,因为这正是那些元素的含义。当我,一个搜索引擎,一个屏幕阅读器或其他任何东西,遇到一个表格元素,我们期望这意味着“以下是表格数据,表示在一个表中”。当我们遇到div时,我们期望“这是一个用于将内容划分为单独部分或区域的元素。
2 .可读性:错误。如果所有的表示代码都是css,我可以阅读html,我将理解页面的内容。或者我可以阅读css和理解的表示。如果html中的所有内容都是混杂在一起的,那么在我甚至可以看到什么是内容,什么不是内容之前,我必须在脑海中剔除所有与表示相关的部分。
此外,我害怕遇到一个不懂css的web开发人员,所以我真的不认为这是一个问题。
3:表比较慢:是的,它们比较慢。原因很简单:在呈现表之前,必须对表进行完整的解析,包括其内容。可以在遇到div时呈现它,甚至在它的内容被解析之前。这意味着div会在页面加载完成之前显示出来。
还有一个好处是,表格更加脆弱,在不同的浏览器中呈现的效果并不总是一样的,不同的字体和字体大小以及所有其他可能导致布局变化的因素。表格是一种很好的方法,可以确保你的网站在某些浏览器中会偏离一两个像素,当用户改变字体大小或以任何其他方式改变设置时,它不会很好地缩放。
Of course #1 is the big one. A lot of tools and applications depend on the semantic meaning of a webpage. The usual example is screen-readers for visually impaired users. If you're a web developer, you'll find that many large companies who may otherwise hire you to work on a site, require that the site is accessible even in this case. Which means you have to think about the semantic meaning of your html. With the semantic web, or more relevantly, microformats, rss readers and other tools, your page content is no longer viewed exclusively through a browser.
The issue of strictly separating presentation and content strikes me as roughly analogous to separating header files from implementation files in C++. It makes sense, but it can also be a pain. Witness Java and C# where classes are defined in a single source file. The authors of the newer languages noticed something that was causing programmers headaches and they got rid of it. That seems to be the gist of this discussion. One side is saying CSS is too difficult, the other side is saying one must become a CSS master.
对于简单的布局问题,为什么不改变表示必须完全独立的规则呢?一个新的标签(或者一些div标签的扩展)可以让我们直接在HTML中控制显示?毕竟,我们不是已经将表示泄露到HTML中了吗?看看h1, h2, h6。我们都知道这些控制表示。
阅读代码(HTML就是代码)的能力非常重要。专家们往往忽略了使编程环境尽可能为大众所接受的重要性。认为只有专业程序员才重要是非常短视的。
一个例子:你想要居中
一个页面的主要内容区域,但在
为了把浮体装在里面,
它需要浮动。没有
CSS中的float: center。
这并不是在居中元素中“包含浮点数”的唯一方法。所以,这根本不是一个好的论点!
在某种程度上,“divs vs table”是一个错误的前提。
把一页快速地分成三列?说实话,表格更简单。但是没有专业人士将它们用于布局,因为它们将页面元素的位置锁定在页面中。
真正的争论是“由CSS完成的定位(最好是在远程文件中)”,而不是“在页面中由HTML完成的定位”。相对于后者,每个人都能看到前者的好处吗?
Size -- if your page layout is in the HTML, in the pages, it can't be cached, and it has to be repeated on every page. You will save enormous amounts of bandwidth if your layout is in a cached CSS file, not in the page.
Multiple developers can work on the same page at the same time -- I work on the HTML, other guy works on the CSS. No repository needed, no problems with over-writing, file locking etc.
Making changes is easier -- there will be problems with layout in different browsers, but you only have to fix one file, the CSS file, to sort them out.
Accessibility, as mentioned a lot previously. Tables assume a two-dimensional layout works for everyone. That's not how some users view your content and it's not how Google views your content.
考虑一下:
[ picture ] [ picture ] [ picture ]
[ caption ] [ caption ] [ caption ]
表示包含6个单元格的表中的两行。能看到二维表格布局的人会在每张图片下看到标题。但是使用语音合成,或者PDA,以及搜索引擎蜘蛛,那是
picture picture picture caption caption caption
有了表格,这种关系就明显消失了。
div和CSS是否更适合在HTML页面上简单地布局矩形以在最短的时间内实现给定的设计?不,他们可能不是。但我不是在快速布局矩形来实现给定的设计。我想的是更大的前景。