DIVs与TABLE表示反驳

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

任何人都在意为何时有效的结构标记提供一个理由?


2008年11月7日

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

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

对他们自己的其他人可能会说,但我永远被给予一些应用程序,把我们的网站,由一些“表更容易”创建的开发人员,把一块蹩脚的HTML转储到我的网页,老实说,我只是没有看到足够的桌旁爱好者倾听争论。

任何人都在当天使用曼波?任何人都不得不把设计放在微软Sharepoint的顶端?不得不通过所有嵌套的表格废话来争取你的方式是地狱,并认为它是由一些血腥的好编程人员写的恼人的我。合理的语义标记已经存在了很长时间,应该没有理由让开发人员继续支持“表更容易”。桌子不容易 - 他们很懒!

我的问题值得表达消极态度,但我仍然在等待人们接受他们使用表格的唯一原因是因为他们不知道HTML。因为如果他们这样做了,那么他们就会明白,正如jjrv所说,表格是用于表格数据的。

0
请提出可以回答的问题,而不仅仅是讨论(从问题问题页面)
额外 作者 Peter Hilton,
我已经看到很多这样的底层问题:你的问题引发了很好的反应(其中一些达到了+13),但是在-6的时候罐装了。请注册这个可怜的问题!
额外 作者 Dan Rosenstark,
我同意@AviewAnew--这个问题很奇怪,因为你昨天回答了这个完全相同的话题。
额外 作者 delfuego,

9 答案

表格适合那些不习惯使用CSS操作小时的开发人员,无论内容如何,​​都可以让两个相邻的柱状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来替换那张简单的表格,这很明显地告诉我,这种设计本质上与表格一样有缺陷。需要多少个教程来解释如何添加一个包含两列的表格

HTML5应该为我们带来全新的页眉,页脚,栏目,导航栏和标签。 示例取自Nettuts +:

<div id="content">
    <div id="mainContent">
        
<!-- Blog post -->
 
        
<!-- Comments -->
 
        <form>
            <!-- Comment form -->
        </form>
    </div>
    
 
</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后门进入; - )

0
额外
显示:表格和显示:表格单元格与HTML5无关,并且已经存在了很长一段时间(尽管没有很好地实现)。
额外 作者 Matt Sach,

有一张数据表时,表格才有效。我已经看到了交互式网格小部件,他们在这里使用一堆div来避免可怕的表格标签。当它是表格数据时,将它制成表格。

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

0
额外

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

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

0
额外
语义标记和CSS的全部意义在于,即使在笨拙的旧版HTML v1浏览器中,您的页面仍然有意义。表格只会给你不一致和噩梦。不错的标题,段落和其他内容会给你一个很好的结构化pae,这是非常有意义的。
额外 作者 roryf,
表格直到HTML 3.2才被添加到HTML。
额外 作者 Jim,

我会说jjrv是正确的,因为表格非常适合表格数据,为了让某些工作像桌子一样工作,而不是仅仅使用一张桌子,边界线被延迟了。

如果你关心标准,并在所有浏览器上实现可靠的实现,那么你的大部分标记都应该是无表格的液体布局......并且你的表格数据在..你猜对了表格!

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

所有这些和他们的时候,当你的头撞在墙上的布局,你想/通过它在桌子上说f___它,它的工作原理。我希望这是一个不推荐的做法,但在成功的过程中,这确实给出了可预测的结果。

0
额外

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

如果您已经使用语义标记进行了组织,则转向诸如Drupal,Joomla,WordPress等内容管理器将会更容易。

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

另一方面,桌子在这里停留。有些人会继续使用它们,浏览器将继续显示它们。如果这就是你想要的,非语义标记本身没有任何问题。一个永远不会被改变的完全静态网站也可以像现代标记一样运行在表格中。

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

0
额外

使用最低公分母html的表格或表格数据,其中跨越列或行是有意义的。否则,一旦你掌握了它,css布局就不那么冗长了,而且更容易维护。

0
额外

基于DIV的布局受到限制。没有表格,它本质上是”不可能“来实现基于内容的高度正确增长的双列布局。

0
额外

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

0
额外

RE:为什么表?

因为有些人(毕竟这些年来)仍然害怕变化。他们听说使用语义HTML是一件好事(通常不会完全理解这个概念)。所以他们尝试使用CSS从未做过的布局。他们遇到了一些(有据可查,通常很容易解决)问题,举起手来,跑回桌子。

然后他们认为CSS太费时(“我不愿意花时间去学习它”)或“不实际”(“我不明白,太难了”),而且这些表是唯一真实的方法。通过固执和无知,他们相信他们自己的诡计,并说服他们的客户和同行。

而他们的世界仍然幸福而不变,进一步褪去过去,并进入过时*

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

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

0
额外