10

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

  1. 我需要做的很多布局工作已经在其他页面上完成了,如果我使用 div 代替,我不能重用其中的任何一个(CSS 和 JS 之类的东西)。这会导致更多的工作并推迟我的完成日期。

  2. 布局中一些更复杂的部分使用 div 确实很难做到,而使用表格却很容易做到。也许这只是我是“老派”,因为我不是一个 web/html 类型的人(我过得很好)。

那么,为什么我不能使用表格?我不想争论,只是想看看除了“这是正确的做法”类型的东西之外是否还有任何令人信服的论点。我知道这是正确的做法。我想知道为什么?

4

16 回答 16

12

使用 div、span 等实现布局,为表格提供了更多的灵活性。考虑浮动、块内容的自动换行与水平滚动、指定元素应存在于页面上的位置等。在不使用表格时,通过 CSS 更容易操作内容。

使用表格时,您会被严格的结构所束缚。

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

希望有帮助!伊恩

于 2009-02-13T09:34:26.873 回答
7

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

根据这个页面..

  • 让您的重新设计更高效、更便宜
  • 帮助您保持整个网站的视觉一致性
  • 当您最小化标记并正确使用标题标签时,可以获得更好的搜索引擎结果。这降低了代码与内容的比率。
  • 让所有查看者和用户代理更容易访问您的网站。
  • 您的页面加载速度更快,文件大小会更小,因为不是每个页面都需要表格信息。
  • 随着世界上越来越多的人转向使用 Web 标准,并为您提供竞争优势(即工作保障)。
于 2009-02-13T09:27:30.400 回答
5

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

所以要实用

也就是说,我的大部分设计都使用纯 CSS。几乎所有事情都可以在 CSS 中完成,就像使用表格一样容易(甚至更容易)。从假设 DIV 可以做到这一点开始,并且可能会退回到 1 个表格以实现棘手的多列布局。即使这样,也可能有人已经为您的布局找到了解决方案,因此请先搜索。

于 2009-02-13T10:21:19.100 回答
4

由于可访问性的原因,它们也很糟糕,即屏幕阅读器无法正确读取它们,但这仅适用于您所代表的数据不是表格数据的情况。

话虽如此,由于截止日期等(现实世界),我不得不将它们用于表单布局,因为它更容易。

于 2009-02-13T09:36:18.210 回答
4

因为标签<table>暗示它应该包含表格数据。

就像彼得说的那样,如果你确实创建了基于表格的布局,宇宙不会内爆,但从语义上讲,应该避免这种情况。

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

有趣的相关阅读:

于 2009-02-13T09:38:58.487 回答
3

首先,一旦你知道了必要的 CSS,你通常可以毫不费力地将表格布局转换为 div。

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

  • 并非所有用户都会使用浏览器的渲染引擎看到页面。有些人会使用屏幕阅读器,它可能会假设当它遇到表格时,它实际上应该将内容作为表格数据读出。本质上,您应该将表格在浏览器中具有特定布局“外观”视为巧合。
  • 在解析完表格及其所有子项之前,无法呈现表格。一个 div 可以独立于其子元素进行渲染,因此您可以避免页面内容在页面被解析时在页面上上下跳跃,并更快地显示内容。

喜欢桌子有充分且正当的理由,但是当你习惯了桌子时,也有一定的学习曲线,所以如果你时间紧迫,这可能不是进行转换的时候。

于 2009-02-13T09:43:56.413 回答
2

如果你有你提到的那种限制,最后期限迫在眉睫,现有的大量代码库,然后使用表,宇宙不会内爆,但从长远来看,使用 css 和 welformed 标记将允许你创建一个更好、更清洁、更可维护的网站。

于 2009-02-13T09:33:19.013 回答
2

如果您想支持文本到语音阅读器,那么表格非常难看(如果您有任何类型的可访问性要求,您几乎必须将表格用于表格,仅此而已)。

这也有一个 SEO 方面。对于 SEO,最好将您的内容放在页面顶部而不是底部。(可悲的是,研究表明,将菜单放在首位实际上是一个可访问性的好主意,因此这两个必要条件发生了冲突。)

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

而且,正如彼得所说,宇宙不会内爆。但从长远来看,使用 CSS 进行布局会更干净。用硬编码的布局重新设计某些东西可能会很痛苦。查看 CSS Zen Garden 了解您可以做什么的示例。当然,在未来,我们将拥有两全其美的 CSS 表格布局。

于 2009-02-13T09:38:20.327 回答
1

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

于 2009-02-13T09:31:11.047 回答
1

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

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

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

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

尽管如此,在表格中而不是在 CSS 中做一些布局技术仍然容易得多,所以那里肯定有一个“平衡行为”。(例如,即使 Google 在其页面布局中也使用表格!)

于 2009-02-13T09:35:45.950 回答
1

通过使用表格进行布局,您可以将内容与格式联系起来,这是大多数缺点的主要来源。它弄乱了源代码,使可以使用 CSS 轻松完成的站点范围的格式更新变得复杂,等等。使用表格进行布局也通常意味着在奇怪的地方切片图像只是为了将它们放入单元格中,哎呀。

于 2009-02-13T09:36:32.580 回答
1

您可以使用表格,但 div 有更多优势。但这一切都是正确的。就像你说的,你的时间很宝贵,所以可能(在短时间内)桌子将是你的选择。但是,如果您设法使其 div-wise,您将拥有一个更可维护的页面,您也可以使用它来重构其他页面。

于 2009-02-13T09:39:16.473 回答
1

Jeffrey Zeldman就这个主题写了一本很棒的书:Designing With Web Standards。这本书应该是每个网页设计师的必读。

以下是设计表不好的一些原因

  • 表格生成更多标记 -> 更多带宽使用
  • 表格使搜索引擎更难为您的网页编制索引 -> 您的网站变得不那么“可搜索”了
  • 表格使更改和调整网站的可见外观变得更加困难 -> 重新设计成本更高
  • ...但最重要的是:使用表格进行设计会为您的标记添加表示逻辑

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

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

  • ...更容易被不同类型的浏览器和其他类型的用户代理访问。
  • ...使重新设计容易
于 2009-02-13T09:53:15.753 回答
1

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

你该怎么办?遵循 KISS 原则。如果 CSS 可以帮助您实现您的特定设计理念,那很好,问题就解决了。如果您需要求助于一些相对不复杂的黑客,它可能没问题。但是当涉及到一些包含数十条规则的巨大代码来制作一个基本的东西时,你可以很容易地用表格自然地实现它,放弃它。

创建一个其他人(以及几个月后的你自己)将无法理解和支持的极其复杂和复杂的棘手 CSS 设计毫无用处。

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

老实说,负责 HTML/CSS 进一步开发的人员没有做好他们的工作并不是你的错。您不应该浪费您和其他人的时间来尝试寻找多年前应该存在的解决方法。

HTML/CSS 是一个很好的例子,说明与拥有资源和承诺的单一公司相比,一些委员会的工作做得多么糟糕,阻碍了技术的发展。

于 2009-02-13T09:54:32.973 回答
1

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

是的,div 提供了更大的灵活性,但归根结底,你真的需要它吗?就代码行数而言,我发现一个简单的表格通常比等效的 div 设计要小很多。

组装起来更快,并且在几乎所有浏览器中都尽可能可靠地工作,这意味着您不必编写无数的技巧来使其始终如一地工作并且当新的显示引擎出现时它不会崩溃.

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

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

底线是,尽管有污名,但对于简单的布局,表格仍然可以完成工作,它们可以快速且可靠地完成,如果您不必与 CSS 纯粹主义者抗衡,您可以为自己节省大量工作。

于 2009-02-13T16:53:50.623 回答
0

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

此外,浏览器通常无法在</table>标签被解析之前呈现表格。如果您使用包含大量内容的表格,这可能会成为问题。CSS 布局通常可以随时呈现。

于 2009-02-13T09:32:51.200 回答