关于html:DIV与TABLEs的反驳请

关于html:DIV与TABLEs的反驳请

DIVs vs. TABLEs a rebuttal please

有很多人问"为什么我们不应该使用表来构造HTML",尽管有很多答案,但我很少看到有人被转换为语义世界。也就是说,我还没有看到任何令人信服的反驳来支持我们为什么应该(或可能)使用表的理由。

有人在乎什么时候提供表是有效的结构标记的理由吗?

2008年11月7日

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

在" DIV vs. TABLEs"问题之后,由于多次沮丧地阅读了" tables easy"的表述,我想再多公开一点这个问题,而不是让表迷们如此轻松地摆脱困境。

每个人都可能会说,但我将永远得到一些应用程序放置在我们的网站上,这些应用程序是由一些"表更容易"的开发人员创建的,该开发人员将一大堆糟糕的HTML转储到我的页面中,老实说,我只是没有看到足够多的餐桌爱好者在听争论。

有人在白天使用曼波吗?任何人都不得不大胆尝试将设计置于Microsoft的Sharepoint之上吗?不得不为所有嵌套表废话而奋斗,这真是地狱,考虑到它是由一些流血的好编码员编写的,这使我烦恼不已。合理的语义标记已经存在了很长时间,以至于开发人员没有理由继续拥护"表更容易"。桌子并不容易-他们很懒!

我的问题应该以否定的形式呈现出来,但是我仍在等待人们接受他们使用表的唯一原因是因为他们不知道HTML。因为如果这样做了,那么就如jjrv所说的那样,他们将理解表是用于表格数据的。


有数据表时,表才有效。我见过交互式网格小部件,它们竭尽所能地使用一堆div来避免可怕的表格标签。当是表格数据时,使其成为表格。

我的一个更具争议的观点是,当您在处理CSS中的垂直布局问题时,可以只使用一个表并经常立即解决它。将内容与演示结合起来可能不尽如人意,但是它可以完成工作并避免CSS hack绕过IE。


RE:为什么要桌子?

因为有些人(毕竟,这些年来)仍然害怕改变。他们听说使用语义HTML是一件好事(而且通常不会完全掌握这个概念)。因此,他们尝试使用从未有过的CSS来整理布局。他们遇到了一些(有据可查,并且通常很容易解决)的问题,举起手来,然后又回到表中去。

然后他们决定CSS是"太费时"("我不愿意花时间学习它")或"不实际"("我不明白。太难了"),并且表是唯一的真实方法。通过固执和无知,他们相信自己的勇气并说服他们的客户和同伴。

他们的世界仍然保持幸福和不变,逐渐淡入过去,变得更加过时*

那就是"为什么要桌子"。结束。

(*除了它们非常适合对HTML电子邮件进行编码之外)


表格是为那些不愿花时间花费CSS来使两个相邻的列式div扩展到100%高度和宽度(不管内容如何),然后使hack在所有浏览器中工作而无需添加额外的div包装器和然后最终在绝对的沮丧中,他们求助于5秒修复程序:

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

硬道理是,大多数用户(不包括使用屏幕阅读器的用户)实际上并不关心页面的标记方式,只要页面能够快速加载即可。

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

Web上有大量资源非常费力地解释了您如何可以排列两个div来替换该简单表的事实,这对我很清楚地表明,这种设计固有地存在与表一样的缺陷。需要多少教程来说明如何向页面添加两列的表?

HTML5应该通过新的页眉,页脚,section,nav和aside标签为我们带来一些理智。取自Nettuts +的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
        <section>
            <!-- Blog post -->
        </section>
        <section id="comments">
            <!-- Comments -->
        </section>
        <form>
            <!-- Comment form -->
        </form>
   
   
        <!-- Sidebar -->
    </aside>

然后是CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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后门;-)


一个有趣的注释与高度复杂的JavaScript应用程序有关。如果将Firebug的Gmail或Google日历分开,您会发现表格被广泛使用,甚至用于布局。当然,这些通常是动态生成的,但这表明在极少数情况下,仅使用DIV很难构建一些视觉上非常复杂的交互式用户界面。


基于DIV的布局存在局限性。没有表,基本上不可能实现根据内容的高度适当增长的两列布局。


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

如果您已经使用语义标记进行了组织,那么迁移到Drupal,Joomla,WordPress等内容管理器将更加容易。

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

另一方面,桌子在这里留下来。某些人将继续使用它们,浏览器将继续显示它们。如果您想要的是非语义标记,那么天生就没有错。一个完全不会改变的静态站点可以在表上运行,也可以在现代标记下运行。

对于有效的结构标记,有以下几点:表格是显示表格数据的好方法,例如数据库或电子表格。它们并不是其他任何东西的有效标记。


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


我会说jjrv是对的,因为表非常适合表格数据,要尽力使像表这样的"工作"而不是仅仅使用表就容易受到限制。

如果您关心标准,并希望在所有浏览器上实现可靠的实现,则您的大部分标记应采用无表液态布局...并且表格数据应位于表格中。

如果您需要迎合真正的旧浏览器,那就是在可怕的ie6之前,那么您在CSS中会遇到很多问题,并且根据当前的使用情况统计数据,可以非常安全地假设每个人都将拥有支持CSS布局的"现代"浏览器。

所有这些都说明了这些,这是您在布局上用头撞墙而您想/要在表中通过它说f___且它起作用的时候。我希望这是一种过时的做法,但是如果确实如此,确实可以得出可预期的结果。


即使在旧的HTML v1.0浏览器中也支持表。如果您的目标市场是1990年代在手机中使用嵌入式浏览器的用户,那么这可能是与桌子搭配的好理由。

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


推荐阅读