是否应该不惜任何代价在HTML中避免使用表格?

时间:2008-09-17 12:09:46

标签: html css html-table

建议在HTML页面中使用表格(现在我们有CSS)?

表的应用是什么?表中有哪些特性/能力不在CSS中?

相关问题

27 个答案:

答案 0 :(得分:76)

不 - 完全没有。但是使用表格来表格数据。只是不要将它们用于一般布局。

但如果您显示表格数据,如结果或甚至表格,请继续使用表格!

答案 1 :(得分:69)

我想我在这里并不占多数,但我仍然看到HTML中的表格有很多用处。当然,是的,对于形式之类的东西,你根本无法击败一张桌子。尝试排列标签和随附的表单字段肯定可以使用DIV,但在某些情况下,PITA会是什么样的,并且调整页面大小会很难看。一张桌子在这里创造奇迹。

但也要考虑更大的问题。例如,您是否尝试仅使用DIV和CSS创建带有页眉和页脚的标准3列布局?同样,这是非常可能的,并且有大约1000个网站的例子,但他们都倾向于遭受同样的问题。第一个问题是,在没有某种javascript帮助的情况下,列永远不会真正想要变成相同的高度。第二个问题是改变布局往往是一个棘手的事情,因为它是一个balacing行为,以使一切“恰到好处”开始,所以那么你不想搞砸它。最后,这可以追溯到最后一点 - 这并不容易。你必须布置你所有的DIV,然后回去创建魔法CSS,迫使那些DIV进入正确的位置,然后花几个小时调整它直到它是正确的....呃。然后在没有查看器的情况下查看HTML确实不会让您知道页面的样子,因为它最终会被CSS重新解释。

现在,选项B.使用表格。花大约30秒输入< tr>和< td>标签,可能根本没有CSS,没有javascript'fixit',只是通过查看HTML就可以确切地知道它的样子。

当然有支持和反对表格的论据,纯粹主义者似乎赞成DIV的布局,但是出于宗教原因不使用DIV只是因为有人告诉你桌子是邪恶的。使用最适合您的方式,页面以及查看者与页面交互的方式。如果那是一张桌子,那就用吧。如果没有,请不要。

答案 2 :(得分:12)

到目前为止,每个人都说过表格应该只用于表格数据,这是事实。看看SO上任何页面的HTML源代码,你会发现他们有不同的想法......

我认为他们的理由是有时使用表格会简单得多。虽然,有很多非常好的可用性原因可以避免它们。

答案 3 :(得分:11)

除了tabular data之外,如果您想以跨浏览器兼容的方式创建复杂表单等灵活网格布局,那么表格仍然是必需的。

CSS2支持通过display property创建灵活的网格布局而不使用table元素,但这是not supported in IE6 or IE7

但是,对于大多数基本表单布局,CSS应该足够了。

答案 4 :(得分:6)

如果只有CSS等价物在设置“类似表格”的布局方面是合适的,那么我很乐意使用CSS。我发现模仿其他人在这里列出的东西所需的时间(单元格上的高度,自动增长的行等等)根本不值得努力。我不会得到我的投资回报,而不是在大多数情况下迅速抛出一张桌子。

所有浏览器都可以就如何布置表格达成一致。巴姆。完成。

以下是我的CSS愚蠢行为: 尝试在CSS中设置类似于表格的布局。花20分钟或更长时间在Mozilla中获取所有内容,然后在IE中打开它。在这两个浏览器之间再花30分钟调整一下。假装世界上只有两个浏览器,因为我实际上需要完成一些工作。

我相信CSS的承诺:关注点的分离。问题是,对于那些需要高效工作的人来说,CSS还没有准备好迎接黄金时段。或者它可能是浏览器的渲染引擎 - 无论哪个。

答案 5 :(得分:4)

CSS的好处在于它将设计和布局与内容分开。

如果您有表格数据,那么使用<TABLE>标记是有意义的。如果您要布置不同的内容块,则应使用<DIV><SPAN>和CSS。

答案 6 :(得分:3)

扫描这些答案,我没有看到一个真实的原因,表格是布局所必需的,而且是HTML电子邮件。

我为一家非常非常大的金融公司工作,我们每月跟踪大约600个不同的工作......其中许多是多个电子邮件活动。

您不能将css用于任何邮件阅读器的布局。你可以使用一些与颜色,字体和大小相关的内联css规范,甚至行高也相当广泛,但对于布局,你必须使用表作为所有主要和最小的电子邮件阅读器(Outlook 97 / 03,随行人员,MSN等)读得很好。

如果没有指定高度/宽度的td是否包含数据,那么表的问题就会发挥作用。所以,“破碎的”表格布局通常是通过关注属性来修复的,是的......是html中的空白......是的空白是不重要的。

所以,如果你曾经为一家大公司/公司工作,或者你找到了一个非常大的客户,那就准备好把所有现有技术都拿出来,把你的html桌子挂上!

答案 7 :(得分:3)

表用于输出表格数据。您可能在电子表格中显示的任何内容,结果列,这类内容。

使用CSS而不是表格的建议是针对列式布局,而不是真正的实际表格。它从来没有打算建议应该完全删除表。

答案 8 :(得分:3)

表格在CSS2中没有等价物,并且使用css并不容易复制。难以重现的表的特定部分是列的自动调整大小。虽然很容易让1行在整个页面上增长到相同的大小,但是下一行很难动态地匹配列大小或每个单元格大小,事实上如果不使用其他脚本语言(如javascript,php或其他。您可以使用最大和最小宽度,以及设置单元格大小或硬代码单元格宽度的百分比,但动态增长的单元格可以正常工作1行,这是它下面的下一行无法匹配。

答案 9 :(得分:2)

我必须在这里采用表格方法。其原因仅限于成本。直到一个受到良好支持的以CSS为中心的布局方法出来,我在宏观层面上讨论...而不是在容器内微观,试图将CSS定位成为一种通用的布局方法是低效的。你必须从编写开发检查的人的角度来处理这个问题。

几年前,我签约为一家大型连锁酒店开发和维护一个网站。我们采用了桌面驱动布局;你的基本标题,正文,页脚左/右列。我们还使用表格来处理一些更精细的元素,比如非图形按钮。该连锁店的母公司维护着自己的网站,采用纯CSS方法进行布局。当IE7问世时,我们的网站完美运行,没有任何变化。母公司的网站一团糟。总的来说,他们花了大约1000个小时(在会议/开发/ QA /推出之间)解决问题。

如果您有资格开发网站,那么您的责任就是减轻未来的风险并最大限度地降低未来的开发成本,特别是如果这些费用不会增加网站(您的产品)的价值。

答案 10 :(得分:2)

我认为这完全取决于时间/精力。虽然纯粹主义者可能会说“只使用表格来表格数据”,但过去我使用表格来简化跨浏览器布局。

对我来说,这是时间利用的问题。我可以把时间花在CSS上以使其正确,或者我可以将它扔在桌子上并花费更少的时间在它上面。事情已经开始并且正在运行,我倾向于走这条路。一旦功能出现,我就会回过头来修改CSS / HTML。

答案 11 :(得分:1)

我相信并希望使用表格进行布局的时代已经过去了。简单地说:一张桌子就是一张桌子,没有别的

我认为未来几年新的,类似的,火焰主题是:我应该使用新的CSS功能显示表 - 单元格表格行等用于布局? ? : - )

答案 12 :(得分:1)

我想你可能会有些困惑。 CSS是一种样式化HTML文档的方法,无论是表格元素还是“div”。

过去,HTML中使用的表来设计整个页面布局。通常会看到多个嵌套表(通常由WYSIWYG程序(如Dreamweaver)生成),这会导致维护噩梦。

自CSS样式表的引入和采用以来,现在只对表格数据使用表是正确的。这意味着如果您的数据最自然地呈现为表,请使用table元素。您仍然可以使用CSS设置表格样式。

但是,我通常不赞成这种方法,因为它复制了现有的功能,因此可以使用元素来构建类似于结构的表。事实上有几个网站会为你生成这样的代码,但我没有链接。

还要记住,有些用户可能正在以纯文本模式查看,或使用屏幕阅读器,这两者都可能会破坏页面(如垂直而不是水平读取列),因此正确使用表格。

HTH

答案 13 :(得分:1)

我对此非常简单和基本的看法是表格存在于表格数据中 - 而不是将一个东西放在顶部或旁边另一个元素,因为你碰巧喜欢它在那里。

所以 - 如果你想显示一个数据表:这样做(用表)。如果您想在页面上定位内容:使用css。

答案 14 :(得分:1)

虽然对于某些使用表格的布局起初可能看起来更简单,但是当维护时间到来时使用css会有所回报。特别是如果你想要改变某些东西的位置,或者你想在几个地方使用相同的布局。

恕我直言,只有在提交表格时才能使用表格。绝不用于布局目的。

答案 15 :(得分:1)

我认为这个问题出现的原因是在创建结构和布局时使用html表比CSS更容易理解。使用CSS更抽象,但有助于分离您的代码。

响应“结构”参数......根据定义,不使用给数据结构的html表,以便将其标识为“表格”。无论是CSS还是h​​tml,您都在控制数据的流量和布局。无论是表格还是其他......

如果CSS表非常重要(我确定我的答案会开始某种火焰战争)为什么Visual Studio中没有一种机制来使用CSS创建布局?哦,你没有检查VS中的布局功能吗?是的,你可以直接从微软获得表格。我并没有抱怨,只是说明如果它对世界其他地方意义重大,你会看到MS切换到CSS。

在我看来,做什么最适合你的项目。对于一个或两个页面的Web项目,我仍然使用html,因为它的作用是显而易见的。使用CSS更抽象,有些早晨我没有那么多咖啡。 HTML表格可能会变得混乱,快速。 CSS需要花费更多的时间来搞乱,但也会这样。

答案 16 :(得分:0)

这很容易。 将您的网页视为纸上的真实页面。 只有当你在纸上画一张桌子时才应该在网页上使用表格。

另一个提示是仅使用带有边框&gt;的表格。 0。 这样,只有在表示您想要一张表(而不是布局)时才使用表格。

答案 17 :(得分:0)

表用于显示表格数据。除此之外别无选择:-D

答案 18 :(得分:0)

似乎取决于您开始设计时能够使用的浏览器。如果你只开始工作,那么这就是你可能总想要使用的东西,因为你知道它。或者,如果这是您喜欢使用的东西,即使在浏览器已经高级以便能够渲染CSS ...

我只是不喜欢一遍又一遍地做同样的事情,因为它们很容易,我知道怎么做。这很无聊。我宁愿学习新技术而不是解雇某些东西,因为我不知道如何使用它,或者我认为我没有时间学习。

我不喜欢使用表格,我不理解它们,它们看起来很陌生和冒犯,但这是因为我从2005年开始。我也不使用设计程序来吐出模板,因为我更喜欢手工编码

答案 19 :(得分:0)

@toddhd,提倡使用表格进行布局只是为了节省时间是一个警察。如果时间成为问题,那么您可以使用Blueprint CSS960 Grid等框架快速创建没有表格的柱状布局。

答案 20 :(得分:0)

如果您的布局有些表格,您甚至可以使用它们进行布局。我喜欢表和单元格的功能,动态调整到浏览器窗口的宽度。 永远不要使用任何固定的宽度或高度,这只是搞乱事情。

答案 21 :(得分:0)

我也不喜欢使用表格来排列页面上的项目。然而,这不应该成为一种宗教 - 表格很糟糕。我遇到过一个例子,我有一个三列布局,需要中心列随内容增长。最后,在所有需要的浏览器上最简单且运行良好的解决方案是使用表格。恕我直言CSS仍然有一些缺点,有时最好使用简单有用的东西,而不是盲目地坚持某些想法('表格不好......')。

答案 22 :(得分:0)

保留仅用于表格数据的表在大多数情况下都有效。使用表格比某些更容易实现的某些布局问题。例如,垂直对齐和相等高度的列。在围栏的另一边,有一些复杂的数据表,我使用了浮动的div,因为表格不适合账单。

与其他任何事情一样,使用正确的工具来完成正确的工作,有时最实用的工具并不是您认为的那样。也就是说,即使在我给出的示例中,我也很少使用表格进行布局,因为我不可避免地遇到了一些问题,这使得我无论如何都必须使用CSS。您的里程可能会有所不同。

答案 23 :(得分:0)

如果有理由以语义方式使用表格(例如显示表格数据),请使用表格。

只是不使用表来做布局。使用语义标记可以获得很多searchengine和可访问性好处。

答案 24 :(得分:-1)

表只有在您尝试显示表格数据时才有意义。对于布局,您应该始终使用DIV并使用CSS定位。

答案 25 :(得分:-1)

我将假设您的问题实际上是 - “我应该避免使用HTML表格进行布局吗?”。答案是:不。实际上,表格专门用于控制布局。使用表来控制整个页面布局的缺点是源文件很快就难以手动理解和编辑。使用表来控制整个布局的(可能的)优点是,是否存在跨浏览器兼容性和呈现的特定问题。我更喜欢直接使用HTML源文件,对我来说,使用CSS比使用表格更容易进行整个布局。

答案 26 :(得分:-4)

如果您需要使用表格,您的布局可能很糟糕。给我看一个精心设计的使用表格的网站,我会向你展示一千个没有表格的网站。

很多人都在抛弃“纯粹主义者”这个词。这是垃圾。你会在一本书中打印报纸吗?你会用Excel设计一本小册子吗?没有?那你为什么要用表来显示非表格数据?

大多数时候,人们在放置布局表时遇到的困难是他们对HTML / CSS /优秀设计原则的无知。虽然您可能会发现很难使多列布局在垂直方向上均匀延伸,但您可能会考虑尝试不同的方法。 DIV不是TABLE。您可以使用宽边框,页面背景等制作人造柱。花一些时间实际学会做你要做的事情,或永远被视为没有任何有用技能的人。 (http://www.alistapart.com将是一个良好的开端)

我真的很惊讶这个问题在2008年出现了。当我在高中时,DIV出现了。不要再做菜鸟了。

如上所述,桌面在移动设备和屏幕阅读器上都很难。