使用 table+css 为桌面浏览器制作跨浏览器布局比 div+css 更容易，这仍然是真的吗？答案

【问题标题】：Is it still true, to make cross broswer layouts for desktop browsers using table+css is easier then div+css?使用 table+css 为桌面浏览器制作跨浏览器布局比 div+css 更容易，这仍然是真的吗？
【发布时间】：2023-03-30 13:08:01
【问题描述】：

我的一位网页设计师朋友仍在使用表格制作网站，但他使用 css 非常好，我也很好地使用 css，但使用 <div>，我在布局中面临的跨浏览器问题比我的朋友更多。

我向我的朋友说明了<table> 的缺点。阅读我与朋友的整个讨论？

我 - 你的网站会出现屏幕阅读器问题

我的朋友 - 好的，但是我从来没有接到任何客户的电话。

我 - 如果更改来自客户端，您将投入更多时间来对布局进行任何更改

我的朋友 - 我不这么认为，但如果是的话，请告诉我如何使用<div> 节省时间？

我 - 您的网站无法很好地与搜索引擎配合使用。

我的朋友 - 这不是真的。我已经制作了很多网站，并且没有任何网站或客户对此有任何问题

I - 布局是旧方式，非 w3c 和非标准方式。

我的朋友 - 什么是旧的，什么是新的，我不知道谁是 W3C，什么是标准？无论我在所有浏览器中做什么，对我来说都足够了，我的客户不会为标准和 W3C 指南规则付费

我 - 您的网站无法在移动浏览器中运行

我的朋友 - 我没问题，我的客户不关心手机

我 - 您的网站无法访问？

我的朋友 - 你的意思是无法访问？无论我做什么都适用于所有浏览器。我的任何客户都从未询问过可访问性

我 - 你以后不会有更多的工作，有桌子吗？

我的朋友 - 好的，当客户不接受带有表格的网站时没问题，那么我将来会学习基于 div 的布局。

我的问题？

是否还是真的，做十字架桌面浏览器的浏览器布局然后使用 table+css 更容易 div+css？
对开发人员有什么好处使用 DIV+CSS 布局代替 <table> 布局，如果客户不愿意介意我用吗？

【问题讨论】：

您正在尝试使用我们的 cmets 和答案赢得讨论？？？？大声笑:)
呵呵，是不是这样啊？
老实说，我认为你的朋友做错了。而且“客户从不抱怨”也不是争论的方式。
“而且“客户从不抱怨”也不是争论的方式。”呐，这是一个绝妙的论点！客户从不抱怨！事实上，他们再也没有给我打电话！

标签： css xhtml accessibility mobile-website screen-readers

【解决方案1】：

就我个人而言，我发现根据独立的块而不是单元格彼此紧密耦合并相互依赖的表格来考虑布局要容易得多。广泛使用这两种方法后，当您了解 div 时会更容易。

维护表格也是一场噩梦。如果要添加列，则需要确保其他行不受影响。即使使用 CSS，表格的 HTML 仍然非常臃肿且难以“一目了然”理解（尤其是嵌套表格）。

如果表格真的是屏幕阅读器的一个大问题，我会感到惊讶（希望该软件足够智能以处理所有类型的网页）。但是，您应该采取一切合理的措施来确保该网站可供所有人访问，因为这是法律规定。

手机可以正常显示表格。这里唯一的问题是，如果您想创建一个单独的移动样式表，则几乎不可能删除列格式。

最后，对于 SEO，它没有任何区别。 SE 多次表示，代码的有效性无关紧要。

【讨论】：

表格可以轻松完成的一些事情看起来对 div 来说过于复杂。我遇到的一些问题是 3 列设计中中间列的液体布局（动态调整大小），以及固定宽度最大高度侧边栏。
如果您的 HTML 代码完全一团糟，那么 Google 可能无法找到您的内容（尽管不太可能）。但总的来说，没有它没有任何区别。谷歌过去曾明确证实过这一点。事实上，最近的一项研究表明，只有 4% 的网站经过充分验证。

【解决方案2】：

对于大多数人来说，使用表格布局网页可能比 CSS 更直观。

虽然取决于布局。深度嵌套的表可能会变得非常多毛。 CSS 布局选项（目前基本上是浮动）是考虑页面布局的不同方式。我发现它现在比表格更容易，因为我习惯于根据 CSS 浮动来考虑布局。

IE 有一些与浮点数相关的错误。我认为它们是 CSS 布局跨浏览器问题的主要来源。

【讨论】：

同意，一旦我弄清楚了语义标记和 CSS，我发现很难再回到表格布局做任何事情。

【解决方案3】：

使用 CSS 框架让使用 DIV 创建布局变得轻而易举！

我个人使用960 Grid System，但也有很多其他人。

【讨论】：

【解决方案4】：

CSS 更加灵活和简洁。时期。我个人认为 3 个具有有意义名称的嵌套 div 比 3 个表 tr td 更具可读性，对吧？它是新的公认标准是有原因的。我用桌子。但仅在显示表格数据时。一旦你学会了 CSS 的技巧，你就可以编写完全跨浏览器兼容的超级干净的 div 结构。

我记得有一次我觉得自己像你的朋友。这主要是出于恐惧。不要害怕。请记住，决定代码和浏览器未来的是我们开发人员。也同意这里的所有其他答案。无论您如何（从头开始）或网格布局，您都会对无表格布局更满意。同意上述观点，将网站视为块有助于 TON。祝你好运！

【讨论】：

【解决方案5】：

没有人提到这一点：HTML 的目标是语义标记。这意味着，您使用的标签具有语义含义。

因此，将table 用于表格数据 很好，也是唯一的方法。
但是使用table 进行布局与语义相矛盾。

语义的相关性不应被低估，因为语义是 WWW 目前正在努力的 (Semantic Web)。我知道 Semantic Web 和 HTML 不一定有联系，但我想正确使用 HTML 只会有所帮助。

使用divs 创建吸引人的布局可能会更加困难。这带来了更大的灵活性优势。

如前所述，可维护性对表格来说可能是个难题。

我个人尽量保持我的 HTML 文件在语义上正确，即为正确的目的使用正确的标签。 look（布局所属的）是 CSS 的问题。

顺便说一句。如果您正在搜索 CSS vs tables，请获得很多不错的比较（最支持 CSS）。

【讨论】：

【解决方案6】：

表格布局会导致更多的 html，更多的 html 会导致更多的代码需要编写和维护，而通过 js 进行 dom 操作的清晰度会降低。 css 代码的数量几乎保持不变（我不是在谈论 2004 年的内联样式标记，这肯定会大大减少 css 的数量）。并且总是有更好的 seo 因素反对表格布局。因此，如果您完全了解 css，那就再简单不过了。也许您需要澄清您在“跨浏览器”声明中包含哪些浏览器，因为现在支持 ie6 和 ie7 甚至不言自明。

【讨论】：