DIVs和TABLE请反驳

时间:2008-09-18 19:40:41

标签: html css semantics

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

任何人都愿意提供表格有效结构标记的理由吗?


2008年11月7日

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

通过在“DIVs vs. TABLEs”问题之后多次阅读“桌子更容易”的论点,我想要更多地暴露这个问题而不是让桌上爱好者如此轻易地摆脱困境。

对于他们自己的其他人可能会说,但我永远会被给予一些应用程序来放置我们的网站,这些应用程序是由一些“表更容易”的开发人员创建的,它将一大堆糟糕的HTML转储到我的页面中,并且是老实说,我只是没有看到足够多的表爱好者听取这些论点。

当天有人使用Mambo吗?任何人都不得不采取行动将设计置于微软的Sharepoint之上?不得不通过所有嵌套的表废话来战斗你的方式是地狱,并考虑它是由一些血腥的好编程员写的惹恼了我。合理的语义标记已存在很长时间,开发人员仍然没有理由支持“表更容易”。表格并不容易 - 它们很懒惰!

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

9 个答案:

答案 0 :(得分:16)

当您拥有数据表时,表格有效。我已经看过交互式网格小部件,他们不顾一切地使用一堆div来避免可怕的表格标签。如果是表格数据,请将其设为表格。

我的一个更有争议的观点是,当您在处理CSS中的垂直布局问题时遇到问题,您可以使用表格并经常立即解决。可能并不像应该将内容与演示文稿混合在一起那么漂亮,但它可以完成工作并避免CSS黑客攻击IE。

答案 1 :(得分:6)

RE:为什么选择表?

因为有些人(毕竟这些年后)仍然害怕改变。他们听说使用语义HTML是一件好事(并且通常不完全掌握这个概念)。因此他们尝试使用CSS从未使用过它来组合布局。他们遇到了一些(记录良好,通常很容易解决)问题,举起手来,然后跑回桌子。

他们然后决定CSS“太耗时”(“我不愿意花时间去学习它”)或“不实际”(“我不明白。它太难了”)和表是唯一真正的方法。通过顽固和无知,他们相信自己的bull and并说服客户和同行。

他们的世界仍然幸福而且没有变化,进一步消失在过去,更深入过时*

这就是“为什么表”。结束。

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

答案 2 :(得分:2)

表格适合开发人员,他们无法通过CSS来解决小时以使两个相邻的columnesque div扩展到100%的高度和宽度,无论内容如何,​​然后获取 hack 在所有浏览器中工作而不添加额外的div包装器,然后最终在绝对挫折中他们采用5秒修复:

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

事实上,大多数用户(不包括使用屏幕阅读器的用户)实际上并不关心页面是如何标记的,只要它快速加载即可。

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

网上有大量资源,详细解释了如何排列两个div来替换那个简单的表,这一事实非常清楚地表明,这种设计本身就像表一样有缺陷。需要多少教程来解释如何add a table with two columns to a page

HTML5应该通过新的页眉,页脚,部分,导航和旁边的标签为我们带来一些理智。 Example取自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后门进入; - )

答案 3 :(得分:1)

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

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

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

另一方面,表格仍然存在。有些人会继续使用它们,浏览器会继续显示它们。如果这是您想要的,那么非语义标记没有任何内在错误。一个永远不会被更改的完全静态的站点也可以像现代标记一样运行表。

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

答案 4 :(得分:1)

基于DIV的布局受到限制。没有表格,实际上impossible实现了一个根据内容高度正确增长的两列布局。

答案 5 :(得分:1)

一个有趣的说明与高度复杂的JavaScript应用程序有关。如果您使用Firebug分离Gmail或Google日历,您会看到表格被广泛使用,即使是布局也是如此。当然,这些通常是动态生成的,但这表明在极少数情况下,一些非常复杂的交互式用户界面很难仅使用DIV构建。

答案 6 :(得分:0)

即使在恶劣的旧HTML v1.0浏览器中也支持表格。如果您的目标市场包括从20世纪90年代开始在手机中使用嵌入式浏览器的人,这可能是使用表格的理由。

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

答案 7 :(得分:0)

我会说jjrv是正确的,因为表格非常适合表格数据,不会像桌子一样“工作”而不是仅仅使用表格是临界延迟的。

如果你关心标准,并在所有浏览器中实现可靠的实现,那么你的大多数标记都应该是无表格的流畅布局......你的表格数据就是......你猜对了!

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

所有这些都说,他们是时候在一个布局上撞你的头撞墙,你想要/确实通过它在桌子上说它并且它有效。我希望这是一种弃用的做法,但在成功时,这确实会产生可预测的结果。

答案 8 :(得分:0)

将表用于最低公分母html或表格数据,其中跨越列或行是有意义的。否则,一旦你掌握了它,css布局就会更简洁,更容易维护。