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


当前回答

下面是我的程序员在一个类似的帖子中给出的答案

语义101

首先看一下这段代码,想想哪里出了问题……

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

当然,问题在于自行车不是汽车。car类对于bike实例是不合适的类。代码没有错误,但是语义不正确。这对程序员的形象很不利。

语义102

现在将此应用于文档标记。如果您的文档需要显示表格数据,那么适当的标记将是<table>。但是,如果将导航放在表中,则滥用了<table>元素的预期用途。在第二种情况下,您没有表示表格数据—您(mis)使用<table>元素来实现表示目标。

结论

游客会注意到吗?不。你的老板在乎吗?也许吧。作为程序员,我们有时会偷工减料吗?当然。但是我们应该吗?不。如果使用语义标记,谁会受益?你,还有你的职业声誉。现在去做正确的事吧。

其他回答

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

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

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

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

当您需要确保元素在布局中保持特定的物理关系时,请使用表格。对于数据,表格通常是最适合使用的布局元素,因为您不希望列以超出预期的方式包装,从而混淆了关联。

也有人可能会说,必须保持特定关系的非数据元素也应该呈现在表中。

灵活的css布局非常适合于移动设备、大屏幕、打印和其他显示类型的内容,但有时,内容必须以非常特定的方式显示,如果这要求屏幕阅读器无法轻松访问它,那么它可能是非常合理的。

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

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

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

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

I have found that even with the best planning divs come up short in several respects. For instance. there is no way with divs to have a bottom bar that always sits at the bottom of the browser, even when the rest of the content does not go to the bottom of the browser. Also, you cannot elegantly do anything better than three columns, and you cannot have columns that grow and shrink according the the width of their content. In the end, we try to use divs first. However, we will not limit our html designs based on some religious content vs layout ideal.

下面是我的程序员在一个类似的帖子中给出的答案

语义101

首先看一下这段代码,想想哪里出了问题……

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

当然,问题在于自行车不是汽车。car类对于bike实例是不合适的类。代码没有错误,但是语义不正确。这对程序员的形象很不利。

语义102

现在将此应用于文档标记。如果您的文档需要显示表格数据,那么适当的标记将是<table>。但是,如果将导航放在表中,则滥用了<table>元素的预期用途。在第二种情况下,您没有表示表格数据—您(mis)使用<table>元素来实现表示目标。

结论

游客会注意到吗?不。你的老板在乎吗?也许吧。作为程序员,我们有时会偷工减料吗?当然。但是我们应该吗?不。如果使用语义标记,谁会受益?你,还有你的职业声誉。现在去做正确的事吧。