在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和CSS的定位允许一个更灵活的设计,导致更容易修改和模板的网页。

也就是说,如果你对灵活性不感兴趣,那么使用一个表而不是一些由CSS变形成表的div绝对是更容易和更快的。我倾向于在设计时使用表格,只是为了更快地让它看起来正确。

其他回答

This isn't really about whether 'divs are better than tables for layout'. Someone who understands CSS can duplicate any design using 'layout tables' pretty straightforwardly. The real win is using HTML elements for what they are there for. The reason you would not use tables for non-tablular data is the same reason you don't store integers as character strings - technology works much more easily when you use it for the purpose for which it is desgined. If it was ever necessary to use tables for layout (because of browser shortcomings in the early 1990s) it certainly isn't now.

布局的灵活性 想象一下,您正在创建一个带有大量缩略图的页面。 div: 如果你把每个缩略图放在DIV中,向左浮动,可能一行有10个缩略图。让窗口变窄,BAM -它是一行6个,或者2个,或者其他合适的。 表: 你必须明确地说一行中有多少单元格。如果窗口太窄,用户必须水平滚动。

可维护性 和上面的情况一样。现在要向第三行添加三个缩略图。 div: 把它们加进去。布局会自动调整。 表: 将新单元格粘贴到第三行。哦!现在那里的商品太多了。从那一行切一些,放在第四行。现在那里的商品太多了。从那一行切一些……(等) (当然,如果您使用服务器端脚本生成行和单元格,这可能不是问题。)

有必要弄清楚CSS和div,以便在页面布局中,中央内容列在侧栏之前加载和呈现。但是,如果你正在努力使用浮动div来垂直对齐一个logo和一些赞助文本,那就使用这个表格,继续生活吧。禅宗花园宗教并没有带来多少价值。

将内容与表示分开的思想是对应用程序进行分区,以便不同类型的工作影响不同的代码块。这实际上是关于变更管理的。但是编码标准只能以表面的方式检查代码的当前状态。

应用程序的更改日志依赖于编码标准来“将内容与表示分开”,它将显示跨垂直竖井的并行更改模式。如果对“内容”的更改总是伴随着对“表示”的更改,那么分区的成功程度如何?

如果您真的想高效地划分代码,请使用Subversion并检查更改日志。然后使用最简单的编码技术——divs、表、JavaScript、include、函数、对象、延续等等——来构建应用程序,以便以简单和舒适的方式进行更改。

我很惊讶地发现有些问题还没有涉及到,所以除了之前提出的所有非常有效的观点之外,以下是我的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技巧,你必须使用使该死的东西工作在大多数浏览器?他们是为了这个目的吗?

看起来你只是习惯了桌子,仅此而已。 将布局放在表格中会限制你的布局。用CSS你可以移动位,看看http://csszengarden.com/ 不,布局通常不需要很多嵌套的div。

没有表格的布局和适当的语义HTML更干净,因此更容易阅读。 为什么不理解CSS的人要尝试阅读它呢?如果有人认为自己是web开发人员,那么对CSS的良好掌握是必须的。

SEO的好处来自于将最重要的内容放在页面上方的能力 拥有更好的内容与标记比率。

http://www.hotdesign.com/seybold/