在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>元素来实现表示目标。

结论

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

其他回答

无论如何,这并不是一个明确的论点,但是对于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

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

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

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

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

显而易见的答案:参见CSS Zen Garden。如果你告诉我你可以很容易地用基于表格的布局做同样的事情(记住- HTML没有改变),那么无论如何都要使用表格来布局。

另外两个重要的事情是可访问性和搜索引擎优化。

两者都关心信息以何种顺序呈现。如果基于表格的布局将导航放在页面上第二个嵌套表格的第2行的第3个单元格中,则无法轻松地将导航显示在页面顶部。

所以你的答案是可维护性,可访问性和SEO。

不要偷懒。即使事情有点难学,也要用正确的方式去做。

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

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