2008-09-18 33 views
2

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

任何人都在意提供什么时候表格是有效结构标记的基本原理?


2008年11月7日

考虑到这个问题并没有消失像我想的那样,我想我会更好地阐明我的问题,并解释它的存在。

通过在“DIVs vs. TABLE”问题后多次阅读“表更容易”的论点而感到沮丧,我想让问题更多地暴露出来,而不是让桌上的爱好者如此轻松地摆脱困境。

对自己的其他人可能会说,但我永远被给予一些应用程序放在我们的网站上,这些应用程序是由一些'表更容易'的开发人员,将大量蹩脚的HTML转储到我的网页中,说实话,我只是没有看到足够的桌旁爱好者倾听争论。

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

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

+2

请问可以回答的问题,不仅仅是讨论(来自Ask Question页面) – 2008-09-18 19:45:53

+0

我同意@AviewAnew - 这个问题很奇怪,考虑到您对此的回答昨天完全一样的话题。 – delfuego 2008-09-18 19:52:00

+0

我见过很多这样的底层问题:你的问题引发了很大的反应(其中一些达到了+13),但是在-6的罐装。请注册这个可怜的问题! – 2008-12-27 20:57:43

回答

16

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

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

0

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

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

1

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

如果您已经使用语义标记进行组织,转移到像Drupal,Joomla,WordPress或类似的内容管理器会更容易。

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

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

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

0

我想说jjrv是正确的表格中是优秀的表格数据,走出自己的方式来实现所谓的“工作”之类的表,而不是只使用一个表是边缘迟钝。

如果您关心标准,并在所有浏览器上实现可靠的实施,那么大部分标记应该采用无表格布局,而您的表格数据则在..您猜对了表格!

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

这一切说他们很多时候你撞你靠着墙头布局上,你想/不说f___它通过它的表和它的作品。我希望这是一个不推荐的做法,但在成功的过程中,这确实给出了可预测的结果。

0

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

1

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

1

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

6

RE:为什么表?

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

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

而且他们的世界仍然是快乐和不变,进一步衰落到过去和深入过时*

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

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

2

表是谁可以懒得去捣鼓小时用CSS让开发两个相邻columnesque的div扩大到100%高度和宽度与内容无关,然后拿到绝对挫折,他们诉诸于5秒修复黑客在所有浏览器的工作,无需添加额外的div包装,然后最后:

<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后门进入;-)