关于布局:DIV与表或CSS与愚蠢

关于布局:DIV与表或CSS与愚蠢

DIV's vs. Tables or CSS vs. Being Stupid

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

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

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

@GaryF:蓝图CSS必须是CSS的最佳机密。

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


Yahoo Grid CSS可以执行各种操作。

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

形式是我永远无法下定决心的极端案例之一。我很想在CSS中执行此操作,但是它比表复杂得多。

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


在英国和美国,有法律要求将CSS布局优先于Tables。第508条(美国)和《残疾歧视法》(英国)均涵盖了视力障碍用户的无障碍标准。

在英国,法律的适用范围扩大到实际上使商业生产网站成为违法行为,从而阻碍部分视力不佳的用户的能力,就像现在拥有步入商店的商店是非法的一样,让轮椅使用者进入-诚然,尚未对网站可访问性提起诉讼。但是,我将始终使用CSS,因为从长远来看,这意味着您的网站设计更易于维护。

投入时间学习CSS(我曾经使用过W3C学校和.Net Magazine http://www.netmag.co.uk)会有所回报。


为什么布局表很愚蠢:已定义问题,提供了解决方案。


在我看来,偏向应该偏向于CSS而不是IE6-即除非有非常好的理由(例如,您的网站仅针对使用IE6的用户,这很奇怪),否则最好"疏远"使用IE6的人比视力不好和/或自动用户代理的人要多。 IE6的使用正在减少;后者的人数在增加。即使您的网站在IE6中看起来并不完美,对于那些看不见它的用户来说,它也比基于表的布局更容易阅读。

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

  • 防弹网页设计,Dan Cederholm
  • CSS Mastery,Andy Budd

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


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

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

如果您不愿意花时间真正地学习CSS(因此花几秒钟或几分钟来定位元素,而不是一个小时),则需要将布局工作传递给真正了解CSS的人,结束。

是的,当前CSS的浏览器实现存在很多问题,但是没有什么太过激烈了,以至于您从未感到需要回到基于表的布局。就像其他任何语言或框架一样,坐下来花点时间学习它。

我发现的最佳在线参考资源是以下内容:
http://reference.sitepoint.com/css

但是,看一本类似《用Web标准进行设计》的书可能并没有什么害处,它可以帮助您理解这些东西为什么很重要。


在我看到YAML(但另一个多列布局)之前,我还以为Blueprint很棒。有一个很棒的在线生成器工具。我可以在5分钟内得到一个很酷的多列布局。


过了一会儿,您甚至都不会考虑它。将div与CSS一起使用似乎是更简单的选项imo。另外,在使用诸如jQuery之类的框架时,您拥有更大的自由度。我无法想象不使用css或div来做一些很酷的jQuery。如果您将表格用于样式和布局,我会觉得您错过了许多新技术,并停留在90年代。


之所以使用CSS进行布局,是因为它不仅在语义上是正确的,而且因为表具有多个缺点。

表格的可访问性很差,因为它们破坏了几乎所有的屏幕阅读器,由于读取表格的方式,继而又给视力受损的人带来了毫无价值的信息。

它们的渲染也比CSS慢得多。表格必须绘制两次,一次用于布局,另一次用于内容。这可能意味着,如果服务器上的远程映像或两个远程连接较慢,则整个布局将无法渲染。

当您具有哈希图时,是否将使用数组来存储字典?不。当有更好的东西时,您不应该使用桌子。


List Apart是使用语义HTML的很好参考,Holy Grail文章可能是最好的例子之一。另外,请查看CSS Zen Garden以获取有关该主题的灵感,或阅读Dave Shea的出色著作" CSS Design的禅宗"。


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


我发现CSS有很多局限性,似乎只是在暗示规范设计者不会以网站为生。

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

话虽如此,有些框架确实可以提供帮助,并且如果可以管理的话,在CSS中做起来总是更好。


我只会用桌子。

以我的经验,使用表格进行布局在所有浏览器中都可以使用,而CSS则不能(特别是如果您想支持IE6的话)。如果可以使用表在10分钟内完成布局工作,那么在CSS中使用布局就不值得花费大量的时间进行编码。

使用表的另一个优点是您的布局可以非常轻松地动态调整其自身大小以适应内容。试图用CSS完成它是一个巨大的噩梦。


这可能无济于事,但我不知何故不了解所有与CSS相关的问题。如果报纸设计师试图在广告页面中嵌入电影,那么每个人都会同意他有点疯狂。但是,这些人仍然在使用HTML的三栏式布局后变得松懈。目前,HTML尚无法很好地处理这种布局。此外,多列布局通常不太适合在计算机监视器上阅读。没有足够的可行选择吗?

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


推荐阅读

    linux命令大全数据库?

    linux命令大全数据库?,服务,系统,平台,状态,软件,通用,环境,数据,神州,地址,

    linux上数据库的命令?

    linux上数据库的命令?,服务,系统,信息,地址,命令,密码,工具,管理,数据,单位,

    linux命令dm数据库?

    linux命令dm数据库?,地址,软件,时间,设备,名字,服务,位置,名称,公司,命令,lin

    linux内置命令位置?

    linux内置命令位置?,工作,系统,信息,地址,位置,标准,命令,目录,密码,名字,Lin

    linux命令防火墙位置?

    linux命令防火墙位置?,系统,服务,软件,密码,状态,位置,防火墙,工具,公共,设

    linux存储数据命令?

    linux存储数据命令?,系统,管理,数据,设备,情况,地址,工作,命令,服务,平台,Lin

    linux数据库查找命令?

    linux数据库查找命令?,位置,名称,状态,服务,软件,信息,系统,命令,名字,密码,

    linux数据库同步命令?

    linux数据库同步命令?,信息,系统,汽车,车辆,服务,工作,通信,一致,分析,数据,D

    linux建立数据库命令?

    linux建立数据库命令?,软件,系统,工作,数据,密码,工具,数据库,一致,网络,服

    linux命令进数据库?

    linux命令进数据库?,地址,系统,名字,服务,密码,命令,读法,数据库,操作系统,

    linux清空表数据命令?

    linux清空表数据命令?,系统,数据,软件,名称,不了,命令,文件,电脑,地址,位置,L

    linux拷贝数据命令?

    linux拷贝数据命令?,系统,地址,文件,数据,命令,目录,服务,基本知识,项目,密

    linux光标位置命令?

    linux光标位置命令?,位置,光标,时间,系统,状态,终端,命令,程序,文件,菜单,lin

    linux数据库检查命令?

    linux数据库检查命令?,服务,状态,地址,位置,系统,信息,命令,工作,情况,密码,

    linux命令进去数据库?

    linux命令进去数据库?,地址,服务,名字,系统,数据库,工具,基础,工作,管理,网

    linux数据库基础命令?

    linux数据库基础命令?,地址,工作,基础,系统,命令,信息,情况,工具,设备,目录,l

    linux数据共享命令?

    linux数据共享命令?,情况,系统,工具,网络,数据,软件,发行,设备,命令,文件,Lin

    命令发送数据linux?

    命令发送数据linux?,数据,地址,时间,工具,系统,设计,工作,网络,命令,综合,lin

    linux命令文件换位置?

    linux命令文件换位置?,位置,财务,系统,公司,名称,目录,文件,命令,一致,工作,l

    数据库导出命令linux?

    数据库导出命令linux?,数据,系统,名称,密码,软件,服务,情况,网上,工具,文件,L