为什么不在HTML中使用表格进行布局呢？

Question

表不应该用于一般意见中的布局，这似乎是一个HTML。

为什么？

我从来没有(或者很少诚实地)看到过这方面的好论据。通常的答案是：

• 这对内容与布局分离很好 但这是一个谬误的论点；陈词滥调思维。我想，使用table元素进行布局与表格数据没有什么关系。那又怎么样？我老板在乎吗？我的用户关心吗？

也许是我或者我的同事，他们需要维护网页.表的可维护性较差吗？我认为使用表比使用div和CSS更更简单。

顺便说一下..。为什么使用div或span可以很好地将内容与布局和表分离开来？只有div才能获得良好的布局，这通常需要大量嵌套的div。

• 代码的可读性 我觉得是另外一回事。大多数人理解HTML，很少人理解CSS。
• SEO最好不要使用表格 为什么？有人能证明这是真的吗？还是谷歌的声明说，从SEO的角度来看，表格是不受欢迎的？
• 桌子比较慢。 必须插入额外的tbody元素。这对于现代网络浏览器来说是微不足道的。向我展示一些基准测试，在这些基准测试中，表的使用大大降低了页面的速度。
• 如果没有表，布局大修就更容易了，请参阅css禅园。 大多数需要升级的网站也需要新内容(HTML)。网站的新版本只需要一个新的CSS文件的情况不太可能发生。禅园是一个不错的网站，但有点理论。更不用说它的CSS 误用了。

我真正感兴趣的是使用div+ CSS而不是表的好参数。

Answer 1

这是我的程序员来自简单螺纹的答案

语义101

先看看这段代码，想想这里出了什么问题.

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

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

当然，问题是自行车不是汽车。汽车类是自行车实例中不合适的类。代码没有错误，但在语义上是错误的。它对程序员的影响很差。

语义102

现在将其应用于文档标记。如果您的文档需要显示表格数据，那么适当的标记将是<table>。但是，如果将导航放置到表中，则会误用<table>元素的预期用途。在第二种情况下，您没有显示表格数据--您正在(Mis)使用<table>元素来实现表示目标。

结论

访客会注意到吗？不是的。你老板在乎吗？也许吧。作为程序员，我们有时会走捷径吗？好的。但我们应该吗？不是的。如果使用语义标记，谁会从中受益？你--还有你的职业声誉。现在去做正确的事。

Answer 2

显而易见的答案是:参见CSS禅园。如果您告诉我您可以很容易地对基于表的布局进行同样的处理(记住，HTML没有改变)，那么无论如何都要使用表来进行布局。

另外两件重要的事情是可访问性和SEO。

两者都关心以什么顺序提供信息。如果基于表的布局将导航放在页面上的第二个嵌套表的第二行的第三单元格中，那么您很难将导航显示在页面的顶部。

因此，您的答案是可维护性、可访问性和SEO。

别偷懒。做正确和正确的事情，即使他们是有点难学。

Answer 3

看这个重复的问题。

有一件事你忘记了，那就是可访问性。例如，如果您需要使用屏幕读取器，基于表的布局就不会很好地翻译。如果你确实为政府工作，可能需要支持像屏幕阅读器这样的可访问的浏览器。

我也认为你低估了你在问题中提到的一些东西的影响。例如，如果您既是设计人员又是程序员，您可能不完全了解它如何将演示文稿与内容区分开来。但是，一旦你进入一个商店，他们是两个不同的角色，优势开始变得更清楚。

如果您知道自己在做什么，并且拥有很好的工具，那么CSS确实比表的布局更有优势。虽然每个项目本身并不能证明放弃表格是合理的，但总的来说，这是值得的。