为什么_not_使用html表进行布局

时间:2009-02-13 09:24:54

标签: html layout html-table

过去几天我一直在思考这个问题。我正在编写一个Web应用程序(实际上是在现有的广泛应用程序中添加一个屏幕)。我知道使用“表格”进行布局是一个很大的禁忌。但在这个应用程序中,所有页面都使用表格进行布局。我决定使用div来做我的新页面。 但我遇到了2个障碍。

  1. 我需要做的很多布局工作已经在其他页面上完成了,如果我改用div,我就无法重用其中任何一个(CSS和JS以及那种东西)。这导致了更多工作并推迟了我的完成日期。

  2. 布局的一些更复杂的部分使用div很难做到,使用表格很容易。也许它只是我“老派”,因为我不是一个网络/ html有点人(我得到)。

  3. 那么,为什么不能我使用表格?我不是想要争论,只是想看看除了“正确的事情”类型之外是否有任何引人注目的论点。我知道这是正确的做法。我想知道为什么?

16 个答案:

答案 0 :(得分:12)

使用div,spans等实现布局,可以提供比表更多的灵活性。考虑浮动,自动包装块内容与水平滚动,指定元素在页面上应存在的位置等。不使用表时,通过CSS操作内容更容易。

使用表格时,你们已经陷入了严格的结构。

现在这并不意味着它绝对是错误的事情。根据您的信息,我可能会坚持使用应用程序的主题,以保持一致性并使用表格实现。对于现状做出最佳选择,而不是现在流行的“规则”。

希望有所帮助! 伊恩

答案 1 :(得分:7)

执行css布局可以更轻松地在以后更改页面布局。 表格也使您的HTML难以阅读和编辑。

According to this page..

  
      
  • 使您的重新设计更高效,更便宜
  •   
  • 帮助您保持整个网站的视觉一致性
  •   
  • 在最小化标记并正确使用标题标记时,为您提供更好的搜索引擎结果。这降低了代码与内容的比率。
  •   
  • 让所有观看者和用户代理都可以访问您的网站。
  •   
  • 您的网页加载速度更快,文件大小会更小,因为每个页面都不需要表信息。
  •   
  • 并为您提供竞争优势(即工作保障),因为全球越来越多地使用Web标准。
  •   

答案 2 :(得分:5)

我要发布一个逆向观点,只是你有一些弹药。我意识到这没有回答你的问题(为什么使用表格),但它确实解决了你将看到的其他答案。

所以be practical

那就是说,我的大多数设计都使用纯CSS。几乎所有都可以在CSS中完成,就像使用表格一样容易(甚至更容易。)从假设DIV可以做到这一点开始,并且可能会回到1个表格中以获得棘手的多列布局。即使这样,someone has probably found a solution for your layout也要先搜索。

答案 3 :(得分:4)

它们也因可访问性原因而不好,即屏幕阅读器无法正确读取它们,但这只有在您所代表的数据不是 表格数据时才会出现。

说,由于截止日期等(现实世界),我已经使用它们进行表单布局,因为它更容易。

答案 4 :(得分:4)

因为代码<table>暗示它应包含表格数据。

就像彼得所说,如果你创建基于表格的布局,宇宙不会崩溃,但从语义上讲,这应该避免。

语义变得越来越重要,因为网页不再总是在桌面浏览器中显示。 Web标准的发展方式是HTML描述文档的语义结构,而不是标记;并且如上所述:对表格数据使用<table>标签在语义上是正确的。

有趣的相关内容:

答案 5 :(得分:3)

首先,一旦你知道必要的CSS,你通常可以将表格布局转换成div而不会有太多麻烦。

但更重要的是,表格不好的一些原因是:

  • 并非所有用户都会使用浏览器的渲染引擎查看该页面。有些人会使用屏幕阅读器,它可能会假设当遇到表格时,它实际上应该将内容读取为表格数据。从本质上讲,您应该认为表格在浏览器中具有某种“外观”的巧合。
  • 在解析表及其所有子项之前,无法呈现
  • 表。 div可以独立于子节点呈现,因此您可以避免页面内容在页面解析时在页面上上下跳动,并且可以更快地显示内容。

有一些好的和有效的理由来选择桌子,但是当你习惯了桌子时,也有一定的学习曲线,所以如果你按时间,这可能不是进行这种转换的时候。 / p>

答案 6 :(得分:2)

如果你有你提到的那种约束,截止日期迫在眉睫,大量现有代码库,然后使用表格,宇宙不会内爆,但从长远来看使用css和welformed markup会让你创造更好的,更清洁,更易维护的网站。

答案 7 :(得分:2)

如果你想支持文本到语音阅读器,表格非常难看(如果你有任何类型的可访问性要求,你几乎不得不使用表格来表示其他内容)。

这也有SEO方面。对于搜索引擎优化,最好将您的内容放在页面顶部而不是底部。 (可悲的是,研究表明,首先放置菜单对于可访问性来说实际上是一个好主意,因此两个命令会发生冲突。)

如果您在跨浏览器支持方面遇到问题,我建议您使用Firefox进行开发。它对CSS开发的支持比其他浏览器好得多,并且它更符合标准(因此更容易预测)。稍后,您可以修补低级浏览器。

而且,正如彼得所说,宇宙不会崩溃。但从长远来看,使用CSS进行布局更加清晰。重新设计硬编码的布局可能是一个真正的痛苦。查看CSS Zen Garden,了解您可以做些什么。当然,在未来,我们将拥有CSS表格布局,两全其美。

答案 8 :(得分:1)

表格也会影响搜索引擎的行为。使用CSS而不是表格实际上也是一种SEO技术。我听到的原因是搜索引擎在一定级别的标签之后停止索引,并且使用表格的布局可以变得非常嵌套。

答案 9 :(得分:1)

使用CSS进行布局,而不是使用HTML表格,可以在页面内容和内容布局之间实现一定程度的分离。

使用表格,您的HTML标记会将您的内容和布局混合在HTML代码中。这意味着您希望为相同的内容设置不同的布局,您需要大量编辑混合代码。

通过在HTML标记上使用CSS样式表,可以将提供内容(HTML)的代码与提供布局(CSS)的代码分开。这使得完全更改网页的布局方面变得更加容易,而无需编辑内容代码。

最好的例子是CSS Zen Garden网站。

所有这一切,在表格而不是CSS中做一些布局技术仍然容易得多,因此肯定存在“平衡行为”。 (例如,即使Google在其页面布局中使用了表格!)

答案 10 :(得分:1)

通过使用表格进行布局,您可以将内容与格式相关联,这是大多数缺点的主要原因。它会弄乱源代码,使用CSS等方便地完成整个站点范围的格式化更新变得复杂。使用表格进行布局也常常意味着在奇怪的地方切片图片只是为了让它们适合单元格而烦恼。

答案 11 :(得分:1)

你可以使用表格,但div有更多优点。 但这都是透视的。 就像你说的那样,你是时间宝贵的,所以可能(在短时间内)表格将是你的选择。但是,如果你设法使它成为div,那么你将拥有一个更易维护的页面,你也可以用它来重构其他页面。

答案 12 :(得分:1)

Jeffrey Zeldman写了一本关于这个主题的好书:Designing With Web Standards。每本网页设计师都应该阅读本书。

以下是设计表格错误

的一些原因
  • 表生成更多标记 - &gt;更多带宽使用
  • 表格使搜索引擎难以为您的网页编制索引 - &gt;您的网站变得不那么“可搜索”
  • 表格更难以更改和调整网站的可见外观 - &gt;更昂贵的重新设计
  • ...但最重要的是:使用表格进行设计会为您的标记添加演示逻辑

这很糟糕,因为您想要将您的演示文稿与您的内容分开! HTML应该只定义您的内容是什么,而不是它应该如何。

如果您获得此级别的分离,您的网站将......

  • ...可以通过不同类型的浏览器和其他类型的用户代理访问。
  • ...重新设计更多

答案 13 :(得分:1)

最好不要听CSS的狂热分子。这些纯粹主义者生活在一些想象的世界中,并将为你提供一些抽象的纯度,语义和其他的论据。你不希望你的团队中有这样的人。现在我只见过黄嘴学生用“纯CSS设计”的想法。他们将向您展示非常原始的CSS设计网站示例,无论何时您向他们询问如何使用它完成一些复杂的企业软件设计,都会忽略它。经验丰富的开发人员已经知道这种完美是不可能的。

你应该怎么做?遵循KISS原则。如果CSS可以帮助您实现您的特定设计理念,那么问题就解决了。如果你需要诉诸一些相对不复杂的黑客,它可能没问题。但是当涉及到一些巨大的代码片段,其中包含许多规则来制作一个基本的东西,你可以轻松自然地用表格来实现它,然后放弃它。

创建一个令人难以置信的复杂而复杂的棘手CSS设计是没有用的,没有其他人(以及几个月后你自己)能够理解和支持。

对于“轻松重新设计”,除非您只想更改颜色和字体,否则无论是使用表格还是不使用表格,您都必须重新构建标记。在后一种情况下,除了实现CSS技巧之外,标记的很大一部分没有用处,这对于你的新重新设计想法是没用的。

老实说,负责进一步开发HTML / CSS的人员不能正常工作,这不是你的错。你不应该浪费你和其他人的时间来寻找应该在很久以前存在的东西的变通办法。

HTML / CSS就是一个很好的例子,说明与一家拥有资源和承诺的公司相比,一些委员会在完成工作和制动技术发展方面表现不佳。

答案 14 :(得分:1)

“正确的做法”取决于你的情况。

是的,div提供了更多的灵活性,但在一天结束时,你真的需要它吗?就代码行数而言,我发现一个简单的表通常比同等的div设计小得多。

组合起来更快,并且它在几乎所有浏览器中都尽可能可靠地运行,这意味着您不必编写数十万个黑客以使其始终如一地工作并且在新显示时它不会崩溃引擎出来了。

使用表格进行显示在技术上是一种破解,但它完成了工作,易于理解和维护,并且在很大程度上是未来的证据,因此对于简单的布局,考虑到网站的其余部分已经使用了表格布局,我会继续使用表格。

此外,将表格转换为使用新“display = table”属性的“div”表可以通过几个正则表达式轻松完成(如果你绞尽脑汁,你甚至可以通过一次通过来完成它) 。如果你知道你的正则表达式,你可以在几分钟内通过一个整个网站替换一个表格,所以整个灵活性问题真的不是那么大:当(如果)你真的需要使用div和CSS定位时,运行一些正则表达式,你就定了。如果您需要比正则表达式更能控制,您可以花几个小时写一个快速的&amp;脏解析器,它将您的表格完全转换为div。

最重要的是,尽管有耻辱,但对于简单的布局,桌子仍然可以完成工作,他们做得快而且可靠,如果你不必与CSS纯粹主义者抗争,你可以节省很多工作

答案 15 :(得分:0)

CSS布局使得通过样式表(从显示中分离数据)更容易改变布局。

此外,在解析</table>标记之前,浏览器通常无法呈现表。如果您使用包含大量内容的表,则可能会出现问题。 CSS布局通常可以随时进行渲染。