css - Is there a business reason for striving for pure CSS layout?

Question

It seems like every time I try to create a pure CSS layout it takes me much longer than if I'd use a table or two. Getting three columns to be equal lengths with different amounts of data seems to require particular fancy hacks, especially when dealing with cross-browser issues.

My Question:

Who are these few tables going to hurt?

Tables seem to work particularly well on tabular data — why are they so reviled in this day and age?

Google.com has a table in its source code, so do many other sites (stackoverflow.com does not by the way).

score 27 · Accepted Answer

由于这是堆栈溢出，我会给你我的程序员的答案

语义 101

先看看这段代码，想想这里出了什么问题……

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

当然，问题在于自行车不是汽车。汽车类是不适合自行车实例的类。代码没有错误，但语义不正确。它对程序员的反映很差。

语义 102

现在将其应用于文档标记。如果您的文档需要显示表格数据，那么适当的标签将是<table>. 但是，如果您将导航放置在表格中，那么您就误用了该<table>元素的预期用途。在第二种情况下，您没有呈现表格数据 - 您正在（错误）使用<table>元素来实现呈现目标。

结论

这伤害了谁？没有人。如果您使用语义标记，谁会受益？你——还有你的职业声誉。现在去做正确的事。

score 18 · Accepted Answer

Like a lot of things, it's a good idea that often gets carried too far. I like a div+css driven layout because it's usually quite easy to change the appearance, even drastically, just through the stylesheet. It's also nice to be friendly to lower-level browsers, screen readers, etc. But like most decisions in programming, the purpose of the site and the cost of development should be considered in making a decision. Neither side is the right way to go 100% of the time.

BTW, I think everyone agrees that tables should be used for tabular data.

score 9 · Accepted Answer

在现实世界中，您在不接触标记的情况下采用一种设计并完全重新设计它的机会非常渺茫。对于像 csszengarden 这样的博客和编造的演示来说这很好，但对于任何具有中等复杂设计的网站来说，这都是一个虚假的好处，真的。使用 CMS 更为重要。

DIV 加上 CSS != 语义，或者。好的 HTML 对于 SEO 和可访问性总是非常值得的，无论是表格还是 CSS 用于布局。通过将非常简单的表格与一些优秀的 CSS 相结合，您可以获得非常高效、快速的网页设计。

表格布局比 CSS 布局更易于访问，反之亦然 - 它完全取决于内容的源顺序，并且仅仅因为您避免使用表格并不意味着使用屏幕阅读器的用户会自动在您的网站上玩得开心. 布局表与屏幕阅读器访问无关，只要内容在线性化时有意义，就像你做 CSS 布局一样。数据表不同；它们真的很难正确标记，即使这样，屏幕阅读器软件的用户通常也不知道他们需要使用哪些命令来理解数据。

与其为使用几个布局表而苦恼，不如担心标题标签和替代文本的使用是否正确，以及表单标签是否正确分配。然后，您将对现实世界的可访问性有很好的了解。

这来自几年运行网络可访问性用户测试的经验，专门从事可访问性网站设计，以及为在线银行 Cahoot 提供了一年关于此主题的咨询。

所以我对海报的回答是否定的，没有商业理由更喜欢 CSS 而不是表格。它更优雅、更令人满意、更正确，但你作为构建它的人和在你之后必须维护它的人是世界上唯一的两个人，无论是 CSS 还是表格，都给了老鼠的屁股。

score 8 · Accepted Answer

I'm of the thought that CSS layout with as few tables as possible is cleaner and better, but I agree that sometimes you just gotta use a table.

Business-wise, it's generally "what's going to get it done the fastest and most reliable way." In my experience, using a few tables generally falls into that category.

I have found that a very effective way to mitigate cross-browser differences in CSS rendering is to use the "strict" doctype at the top of your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Also, for the dreaded IE6 CSS issues, you can use this hack:

.someClass {
    background-color:black; /*this is for most browsers*/
    _background-color:white; /*this is for IE6 only - all others will ignore it*/
}

score 8 · Accepted Answer

Using semantic HTML design is one of those things where you don't know what you're missing unless you make a practice of it. I've worked on several sites where the site was restyled after the fact with little or no impact to the server-side code.

Restyling sites is a very common request, something that I've noticed more now that I'm able to say "yes" to instead of try to talk my way out of.

And, once you've learned to work with the page layout system, it's usually no harder than table based layout.

score 7 · Accepted Answer

我们将网页更改为基于 DIV/CSS 的布局的主要原因是渲染基于表格的页面的延迟。

我们有一个公共网站，它的大部分用户群位于印度等国家，那里的互联网带宽仍然是一个问题（它每天都在改善，但仍然没有达到同等水平）。在这种情况下，当我们使用基于表格的布局时，用户不得不长时间盯着空白页。然后整个页面将在一个勾号中作为一个整体显示。通过将我们的页面转换为 DIV，我们设法在用户进入我们的网站时几乎立即将一些内容带到浏览器，并且这些内容足以让用户参与，直到浏览器下载页面的全部内容。

基于表格的实现的主要缺陷是，浏览器只有在下载该表格的整个 html 后才会显示表格的内容。当我们有一个包含整个页面内容的主表，并且当我们有很多嵌套表时，这个问题就会爆发。对于“灵活表格”（没有任何固定宽度的表格），在下载整个表格标签后，浏览器必须解析到表格的最后一行以找出每列的宽度，然后必须再次解析以显示内容. 直到所有这些发生，用户必须盯着一个空白屏幕，然后一切都会在一瞬间出现在屏幕上。

score 7 · Accepted Answer

如果您有一个面向公众的网站，那么真正的商业案例就是 SEO。

可访问性很重要，维护语义 (X)HTML比维护表格布局要容易得多，但在 Google 上排名第一的位置将把培根带回家。

例如：月度网络报告：7 月份的页面浏览量为 1.27 亿次

月度网络报告：7 月份的页面浏览量为 1.27 亿次

...

Latimes.com 在 SEO（搜索引擎优化）方面不断进步，这意味着我们的故事在 Google 和其他搜索引擎中的排名更高。我们在 Digg.com 等网站上的表现也更好。所有这些都比以往任何时候都增加了更多的曝光率和更多的读者群。

如果您查看他们的网站，他们的 CSS 布局相当不错。

通常，您发现这些天在 SERP 中表现良好的表格布局相对较少。

score 6 · Accepted Answer

Keep your layout and your content separate allows you to redesign or make tweaks and changes to your site easily. It may take a bit longer up front, but the longest phase of software development is maintenance. A css friendly site with clear separation between content and design is best over the course of maintenance.

score 6 · Accepted Answer

以我的经验，唯一真正增加业务价值的时候是需要 100% 支持可访问性。当您的用户有视力障碍和/或使用屏幕阅读器查看您的网站时，您需要确保您的网站符合无障碍标准。

~~使用屏幕阅读器的用户倾向于拥有自己的高对比度、大字体样式表（如果您的网站自己不提供），这使得屏幕阅读器可以轻松解析页面。~~

当屏幕阅读器阅读页面并看到一张表格时，它会告诉用户这是一张表格。因此，如果您使用表格进行布局，它会变得非常混乱，因为用户不知道表格的内容实际上是文章而不是其他一些表格数据。菜单应该是一个列表或 div 集合，而不是带有菜单项的表格，这同样令人困惑。您应该确保使用块引用、alt-tags 标题属性等以使其更具可读性。

如果你的设计是由 CSS 驱动的，那么你的整个外观和感觉都可以被剥离并替换为对这些用户来说非常易读的原始视图。如果您有内联样式、基于表格的布局等，那么您会让这些用户更难解析您的内容。

虽然我确实觉得当您的网站完全使用 CSS 进行布局时，某些事情的维护会变得更容易，但我认为并非所有类型的维护都是如此——尤其是当您处理跨浏览器 CSS 时，显然是一场噩梦。

简而言之，如果您希望所述用户可以访问您的页面，则应以符合标准的方式描述其构成。如果您没有需要/要求并且将来可能不需要它，那么不要浪费太多时间尝试成为 CSS 纯粹主义者 :) 使用适合您的样式和布局技术的组合并让您的工作更轻松。

干杯!

[编辑-在此答案的错误或误导部分添加删除线-见评论]

score 6 · Accepted Answer

我刚刚记得的另一件事是，您可以为页面分配不同的样式表以进行打印和显示。

除了正常的样式表定义之外，您还可以添加以下标签

<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />

当您将文档发送到打印机时，它将根据该样式呈现文档。这允许您去除背景图像、额外的页眉/页脚信息，并且只打印原始信息，而无需创建单独的模块。

score 6 · Accepted Answer

仅通过更新 1 个文件来对 15 页的网站进行全面改造就是天堂。

这是真实的。不幸的是，让 15,000 个复杂且差异很大的页面使用一个 CSS 文件是您最糟糕的噩梦。改变一些东西——它打破了一千页吗？谁知道？

对于像我们这样的大型网站，CSS 是一把双刃剑。

score 4 · Accepted Answer

The idea is that Designers can Design and Web Developers can implement. This is especially the case in dynamic web applications where you do not want your Designers to mess around in your Source Code.

Now, while there are templating engines, Designers apparantly just love to go crazy and CSS allows to pull a lot more stunts than tables.

That being said: As a developer, i abandoned CSS Layout mostly because my Design sucks anyway, so at least it can suck properly :-) But if I would ever hire a Designer, I would let him use whatever his WYSIWYG Editor spits out.

score 1 · Accepted Answer

Business reason for CSS layout: You can blow away the customers by saying "our portal is totally customizable/skinnable without writing code!"

Then again, I don't see any evil in designing block elements with tables. By block elements I mean where it doesn't make any sense to break apart the said element in different designs.

So, tabular data would best be presented with tables, of course. Designing major building blocks (such as a menu bar, news ticker, etc.) within their own tables should be OK as well. Just don't rely on tables for the overall page layout and you'll be fine, methinks.

score 1 · Accepted Answer

*我会让他使用他的 WYSIWYG 编辑器吐出的任何东西，
我只是吐了一点...
*啊，你好？你不认为平面设计师是手工编写 CSS 的吗？

有趣的是，我曾与几位设计师合作过，其中最好的设计师会手动调整他们的 CSS。我想到的那个人实际上将他所有的设计工作都作为一个带有几个 CSS 文件的 XHTML 文件完成，并根据需要动态创建图形元素。他使用 Dreamweaver，但实际上只是作为一种导航工具。（我从那个人身上学到了很多）

一旦你投资学习纯粹基于 CSS 的设计并且有一点经验（发现 IE 糟糕的地方[公平地说它变得更好]），我发现它最终会更快。我从事内容管理系统的工作，应用程序很少需要更改，设计师就可以设计出完全不同的外观。

score 1 · Accepted Answer

除了易于更新和合规...

我曾经设计所有基于表格的网站，起初我很抗拒，但我逐渐转向 CSS。它不是一夜之间发生的，但它发生了，这也是你应该做的事情。

有几个晚上我想把我的电脑扔到窗外，因为我应用到 div 的样式没有做我想要的，但你从这些障碍中学习。

对于企业来说，一旦你通过 CSS 设计网站成为一门科学，你可以为每个网站开发流程，甚至可以使用过去的网站，只需添加不同的标题图形、颜色等。

此外，请务必嵌入/包含您网站的所有可重用部分：页眉、子页眉、页脚。

一旦你越过驼峰，一切都会从那里下山。祝你好运！

score 0 · Accepted Answer

肯定有。如果你还在为它而努力，那你就没有做对。

DIV+CSS 布局在可维护性和生产力方面实际上比表格布局要容易得多。继续练习，以免为时过早。

表格布局也很好，它只是不适合布局，并且在进行微调时具有特殊的缺点。

score 0 · Accepted Answer

:: nods at palmsey and Jon Galloway ::

I agree with the maintainability factor. It does take me a bit longer to get my initial layouts done (since I'm still a jedi apprentice in the CSS arts) but doing a complete revamp of a 15 page web site just by updating 1 file is heaven.

score 0 · Accepted Answer

Some additional reasons why this is good practice:

Accessibility - the web should ideally be accessible by all
Performance - save bandwidth and load faster on mobile devices (these lack bandwidth to some degree and cannot layout complex tables quickly). Besides loading fast is always a good thing...

score 0 · Accepted Answer

当屏幕阅读器阅读页面并看到一张表格时，它会告诉用户这是一张表格。因此，如果您使用表格进行布局，它会变得非常混乱，因为用户不知道表格的内容实际上是文章而不是其他一些表格数据

这实际上是不正确的；JAWS、Window Eyes 和 HAL 等屏幕阅读器会忽略布局表。他们在处理真实的网络方面工作得非常好。

score 0 · Accepted Answer

我认为根本没有商业原因。技术原因，也许，即便如此，勉强 - 这是一个巨大的世界范围内的时间，然后你在 IE 中查看它并崩溃并哭泣。

score 0 · Accepted Answer

我实际上可以在用户页面上看到 Stack Overflow 中的表格。

它甚至有大量的内联样式......

css - Is there a business reason for striving for pure CSS layout?

21 回答 21

Related

Reference