html - DIVs vs. TABLEs 请反驳

Question

有很多人问“为什么我们不应该使用表格来构建我们的 HTML”，虽然有很多答案出现，但我很少看到有人被转换到语义世界。也就是说，我还没有看到任何令人信服的反驳来支持我们为什么应该（或可能）使用表格的理由。

有人愿意为表格何时是有效的结构标记提供理由吗？

2008 年 11 月 7 日

考虑到这个问题并没有像我想象的那样消失，我想我最好澄清我的问题并解释它的存在。

在“DIVs vs. TABLEs”问题之后多次阅读“表格更容易”的论点感到沮丧，我想更多地揭示这个问题，而不是让表格爱好者这么容易摆脱困境。

每个人都会对他们自己的其他人说，但我永远被赋予了一些应用程序来放置在我们的网站上，这些应用程序是由一些“表格更容易”的开发人员创建的，他们将一大块糟糕的 HTML 转储到我的页面中，老实说，我我只是没有看到足够多的餐桌爱好者倾听这些争论。

以前有人用过曼波吗？任何人都必须在微软的 Sharepoint 上进行设计吗？必须通过所有嵌套的表格垃圾来争取自己的方式是地狱，并且考虑到它是由一些该死的优秀编码人员编写的，这让我很恼火。合理的语义标记已经存在了很长时间，以至于开发人员没有理由仍然拥护“表格更容易”。桌子并不容易 - 他们很懒惰！

我的问题应该以消极的方式呈现，但我仍在等待人们接受他们使用表格的唯一原因是因为他们不知道 HTML。因为如果他们这样做了，那么他们就会明白，正如 jjrv 所说，表格是用于表格数据的。

score 16 · Accepted Answer

当您有数据表时，表是有效的。我见过交互式网格小部件，它们不遗余力地使用一堆 div 来避免可怕的表格标签。当它是表格数据时，将其设为表格。

我的一个比较有争议的观点是，当你在处理 CSS 中的垂直布局问题时遇到问题，你可以只使用一个表格，并且通常会立即解决它。将内容与演示混合起来可能没有它应该的那么漂亮，但它可以完成工作并避免使用 CSS hack 绕过 IE。

score 6 · Accepted Answer

RE: 为什么是桌子？

因为有些人（经过这么多年仍然）害怕改变。他们听说使用语义 HTML 是一件好事（而且通常不会完全掌握这个概念）。因此，他们尝试使用以前从未做过的 CSS 组合布局。他们遇到了一些（有据可查，通常很容易解决）的问题，举起手，然后跑回桌子。

然后他们认为 CSS“太耗时”（“我不愿意花时间去学习它”）或“不实用”（“我不明白。这太难了”）并且表格是唯一真正的方式。通过固执和无知，他们相信自己的胡说八道，并说服他们的客户和同行。

他们的世界依然快乐，不变，逐渐消失在过去，更深地进入过时*

这就是“为什么要使用表格”。结束。

（*除了它们非常适合编码 HTML 电子邮件）

score 2 · Accepted Answer

表格适用于那些不想花几个小时用 CSS 来让两个相邻的列式 div 扩展到 100% 的高度和宽度而不考虑内容的开发人员，然后让黑客在所有浏览器中工作而无需添加额外的 div 包装器和然后最后在绝对沮丧中，他们求助于 5 秒修复：

<table width="100%">
<tr><td valign="top">Left nav</td><td valign="top">Main content</td></tr>
</table>

一个残酷的事实是，大多数用户（不包括那些使用屏幕阅读器的用户）真的不在乎页面是如何标记的，只要它加载得很快。

开发人员有预算和时间限制，“好”的 CSS 和标记需要时间。

网上有大量资源详细解释了如何排列两个 div 来替换那个简单的表格，这一事实非常清楚地告诉我，这种设计本质上与表格一样有缺陷。需要多少教程来解释如何将具有两列的表格添加到页面？

HTML5 应该通过新的页眉、页脚、部分、导航和旁边标签给我们带来一些理智。取自 Nettuts+ 的示例：

<div id="content">
    <div id="mainContent">
        <section>
            <!-- Blog post -->
        </section>
        <section id="comments">
            <!-- Comments -->
        </section>
        <form>
            <!-- Comment form -->
        </form>
    </div>
    <aside>
        <!-- Sidebar -->
    </aside>
</div>

然后是CSS：

#content {
    display: table;
}

    #mainContent {
        display: table-cell;
        width: 620px;
        padding-right: 22px;
    }

    aside {
        display: table-cell;
        width: 300px;
    }

当您注意到 CSS 具有以下属性时，那些目光敏锐的人会喜欢这种讽刺的感觉：display: table;和display: table-cell;.

表回来了宝贝！通过 HTML5 后门潜入；-)

score 1 · Accepted Answer

基于 DIV 的布局受到限制。如果没有表格，基本上不可能实现基于内容高度适当增长的两列布局。

score 1 · Accepted Answer

当您添加功能或修复错误或更改数据驱动网站的外观时，使用现代语义标记要容易得多。添加 AJAX 功能或任何类型的交互式脚本对 DIV 和 CSS 的效果要比使用 TABLE 好得多。

如果您也已经使用语义标记进行组织，那么迁移到 Drupal、Joomla、WordPress 等内容管理器会容易得多。

较新的浏览器版本还将更有效地支持现代标记，并且您的网站将显示得更快。重新排列所有这些表格可能会导致显示时间变慢。

另一方面，桌子会留在这里。有些人将继续使用它们，浏览器将继续显示它们。如果这是您想要的，那么非语义标记本身就没有错。一个永远不会改变的完全静态的站点可以与现代标记一样运行表格。

至于有效的结构标记，有这样的：表格是显示表格数据的好方法，如数据库或电子表格表格。它们对于其他任何东西都不是真正有效的标记。

score 1 · Accepted Answer

An interesting note is related to highly complex JavaScript applications. If you pick apart Gmail or Google Calendar with Firebug, you'll see that tables are used extensively, even for layout. Granted, these are usually dynamically generated but this goes to show that in rare cases some very visually complex interactive user interfaces are extremely difficult to build using only DIVs.

score 0 · Accepted Answer

即使在硬壳的旧 HTML v1.0 浏览器中也支持表格。如果您的目标市场包括 1990 年代在手机中使用嵌入式浏览器的人，那么这可能是使用表格的一个很好的理由。

许多现有的自动生成的 HTML 使用表格。如果您的代码需要与这些表交互或包含这些表，则最好保持一致性。

score 0 · Accepted Answer

将表格用于最小公分母 html 或用于跨列或跨行有意义的表格数据。否则，一旦你掌握了它的窍门，css 布局就不会那么冗长并且更容易维护。

score 0 · Accepted Answer

我会说 jjrv 是正确的，因为表格非常适合表格数据，不遗余力地让某些东西像表格一样“工作”，而不是仅仅使用表格是边缘延迟的。

如果您关心标准，并朝着跨所有浏览器的可靠实现迈进，那么您的大部分标记应该在无表格的液体布局中......并且您的表格数据在......你猜对了表格！

如果您需要迎合真正旧的浏览器，即在可怕的 ie6 之前，那么您将在 css 中遇到很多问题，并且鉴于当前的使用统计数据，可以假设每个人都将拥有一个支持 css 布局的“现代”浏览器。

所有这一切都是这样的，当您在布局上将头撞在墙上并且您想要/确实在桌子上通过它说 f___ 它并且它起作用的时候。我希望这是一种已弃用的做法，但总的来说，这确实会产生可预测的结果。

html - DIVs vs. TABLEs 请反驳

9 回答 9

Related

Reference