54

我知道表格是用于表格数据的,但是将它们用于布局非常诱人。我可以处理 DIV 以获得三列布局,但是当你有 4 个嵌套的 DIV 时,它会变得很棘手。

是否有教程/参考可以说服我使用 DIV 进行布局?

我想使用 DIV,但我拒绝花一个小时将我的 DIV/SPAN 放置在我想要的位置。

@GaryF:蓝图 CSS必须是 CSS 最保守的秘密。

很棒的工具 -蓝图网格 CSS 生成器

4

13 回答 13

24

有可以做各种事情的Yahoo Grid CSS 。

但请记住:CSS 不是一种宗教。如果您通过使用表格而不是 css 来节省时间,请这样做。

我永远无法下定决心的极端案例之一是表格。我很想用 css 来做,但它比表格复杂得多。

您甚至可以争辩说表单是表格,因为它们具有标题(标签)和数据(输入字段)。

于 2008-09-14T11:00:30.747 回答
17

在英国和美国,有一项法律要求支持 CSS 布局而不是表格。第 508 条(美国)和《残疾歧视法》(英国)都涵盖了针对视力有限的用户的无障碍标准。

在英国,立法范围扩大到实际上将商业生产一个妨碍部分视力用户能力的网站视为非法,就像现在拥有一个可以进入但无法进入的商店是非法的一样让轮椅使用者进入 - 诚然,目前还没有关于网站可访问性的起诉。但是我会一直使用 CSS,因为这意味着您的网站设计从长远来看更容易维护。

花时间学习 CSS(我使用过 W3C 学校和 .Net 杂志http://www.netmag.co.uk)会有所回报。

于 2008-09-14T13:08:22.467 回答
9

为什么布局表是愚蠢的:定义的问题,提供的解决方案

于 2008-09-14T14:43:45.327 回答
6

在我看来,这种偏见应该有利于 CSS 而不是 IE6 - 即除非有非常好的理由(例如,您的网站只针对使用 IE6 的人,这会很奇怪),否则最好“疏远”使用 IE6 的人而不是比视力不佳和/或自动化用户代理的人。IE6 的使用正在减少;后一组的人数正在增加。即使您的网站在 IE6 中看起来并不完美,对于那些看不到它的用户来说,阅读它可能比基于表格的布局更容易。

这是一个非常笼统的问题,因此很难具体回答。这两本书是极好的资源:

如果你只需要花一个小时来设计你的整体网站布局,那还不错。

于 2008-09-14T12:45:37.280 回答
5

CSS 可能不是一种宗教,但它是浏览器解释 HTML 以进行布局的方式。不管你喜不喜欢,所有现代浏览器都使用(某些版本的)W3C 盒子模型。继续依赖表格就是继续依赖一种在设计 Web 渲染技术的人眼中完全错误的方法。

我知道 CSS 有时看起来非常复杂,但我相信这是当今时代的必需品(相信我,你的客户会想要它)。

如果您不愿意花时间真正学习 CSS(因此定位元素需要几秒钟或几分钟......而不是一个小时),那么您需要将布局工作交给真正了解前端的人 -结尾。

是的,当前的 CSS 浏览器实现存在很多问题,但没有什么大到让您觉得需要返回基于表格的布局的问题。只需坐下来花时间学习它,就像学习任何其他语言或框架一样。

我发现的最好的在线参考资源是这个: http ://reference.sitepoint.com/css

但是看看像Designing With Web Standards这样的书可能不会有什么坏处,它可以帮助你理解为什么这些东西很重要。

于 2008-09-14T15:28:46.217 回答
4

在我看到YAML(Yet Another Multicolumn Layout)之前,我也一直认为 Blueprint 很棒。有一个很棒的在线构建器工具。我可以在 5 分钟内得到一个看起来很酷的多列布局。

于 2008-09-15T06:05:35.453 回答
2

过了一会儿,你甚至都不会去想它。使用带有 CSS 的 div 似乎是 imo 更简单的选择。此外,您在使用 jQuery 等框架时拥有更多自由。我无法想象在不使用 css 或 div 的情况下做一些很酷的 jQuery 东西。如果您使用表格进行样式和布局,我觉得您错过了许多新技术并停留在 90 年代。

于 2010-12-21T16:40:15.937 回答
1

您也许可以在这里找到一些灵感:http: //blog.html.it/layoutgala/

于 2008-09-14T14:39:28.333 回答
1

A List Apart是使用语义 HTML 的一个很好的参考,Holy Grail 文章可能是最好的例子之一。此外,请查看CSS Zen Garden以获取有关该主题的一些灵感,或阅读 Dave Shea 的优秀著作“The Zen of CSS Design”。

于 2008-09-15T14:20:59.087 回答
1

您使用 CSS 进行布局不仅因为它在语义上正确,而且因为表格有多个缺点。

表格的可访问性很糟糕,因为它们破坏了几乎所有的屏幕阅读器,由于表格的阅读方式,这反过来又给视障人士提供了毫无价值的信息。

它们的渲染速度也比它们的 CSS 对应物慢得多。表格必须绘制两次,一次用于布局,另一次用于内容。这可能意味着,如果您在连接速度较慢的服务器上有一个或两个远程图像,您的整个布局将不会呈现。

当你有一个 hashmap 时,你会使用数组来存储字典吗?不,当有更好的东西时,你不应该使用桌子。

于 2008-09-23T01:54:59.193 回答
1

这可能没有帮助,但我不明白所有这些与 CSS 相关的问题。如果报纸设计师试图在广告页面中嵌入一部电影,每个人都会同意他有点疯狂。但同样的人仍然在 HTML 中的三列布局之后松了一口气。HTML 目前还不能很好地处理这种布局。此外,多列布局通常不太适合在计算机显示器上阅读。没有足够的可行替代方案吗?

顺便说一句,即使是表格也没有提供实现流畅列布局的好方法,所以这根本没有理由诉诸这种黑客。假设是现代浏览器(即 > MSIE 6),与我所知道的干净的 HTML + CSS 相比,表格没有任何优势。

于 2008-09-14T10:30:22.940 回答
1

我只会用桌子。

以我的经验,使用表格进行布局在所有浏览器中都可以正常工作,而 CSS 则不会(尤其是在您尝试支持 IE6 时)。如果使用表格可以在 10 分钟内完成,那么花费数小时和数小时的编码来使布局在 CSS 中工作是不值得的。

使用表格的另一个优点是您的布局可以很容易地根据内容动态调整自身大小。试图用 CSS 完成这件事是一场巨大的噩梦。

于 2008-09-14T11:51:39.547 回答
1

我发现 CSS 有很多限制,这似乎暗示规范设计者不以制作网站为生。

如果您在 CSS 中无法轻松做到这一点,请使用 HTML 表格。

话虽如此,一些框架确实有帮助,如果你能管理它,用 CSS 做总是更好。

于 2008-09-14T12:11:04.680 回答