似乎每次我尝试创建一个纯CSS布局,它比我使用一两个表需要更长的时间.让三列具有相同长度和不同数据量似乎需要特别奇特的黑客攻击,尤其是在处理跨浏览器问题时.
我的问题:
这几张桌子会受伤吗？
表格似乎在表格数据上特别有效 - 为什么它们在这个时代如此受到谴责？Google.com的源代码中有一个表,所以很多其他网站(stackoverflow.com不是这样).
Car*_*era 27
由于这是堆栈溢出,我会给你程序员的答案
语义101首先来看看这段代码,然后想一想这里有什么问题......
class car {
int wheels = 4;
string engine;
}
car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;
当然,问题在于自行车不是汽车.汽车类对于自行车实例来说是不合适的类.代码没有错误,但在语义上是不正确的.它反映了程序员的糟糕表现.
语义学102现在将此应用于文档标记.如果您的文档需要提供表格数据,那么适当的标记就是<table>.但是,如果将导航放入表中,则会误用<table>元素的预期用途.在第二种情况下,您没有呈现表格数据 - 您(错误地)使用该<table>元素来实现表达目标.
这伤害了谁？没有人.如果使用语义标记,谁会受益？你 - 以及你的专业声誉.现在去做正确的事.
pal*_*sey 17
像很多东西一样,这是一个好主意,经常被带到太远.我喜欢div + css驱动的布局,因为通常很容易通过样式表来改变外观,甚至是非常容易.与较低级别的浏览器,屏幕阅读器等友好相处也很好.但是,与编程中的大多数决策一样,在做出决定时应考虑网站的目的和开发成本.任何一方都不是100%的正确方式.
顺便说一下,我想每个人都同意表格应该用于表格数据.
在现实世界中,你采用一种设计并完全重新设计而不触及标记的可能性非常小.它适用于像csszengarden这样的博客和炮制演示,但对于任何具有中等复杂设计的网站来说,这都是一个虚假的好处.使用CMS更为重要.
DIVs加上CSS!=语义.对于SEO和可访问性来说,良好的HTML非常值得,无论表格还是CSS都用于布局.通过将非常简单的表与一些好的CSS相结合,您可以获得真正高效,快速的Web设计.
表布局比CSS布局更容易访问,反过来也是如此 - 它完全取决于内容的源顺序,并且仅仅因为您避免使用表并不意味着拥有屏幕阅读器的用户将自动在您的网站上玩得开心.布局表与屏幕阅读器访问无关,前提是内容在线性化时有意义,与CSS布局完全相同.数据表不同; 它们很难正确标记,即使这样,屏幕阅读器软件的用户通常也不知道他们需要用来理解数据的命令.
您应该担心正确使用标题标记和替代文本,并且正确分配表单标签,而不是为使用一些布局表而烦恼.那么你将对现实世界的可访问性有一个很好的准备.
这可以从多年运行用户测试Web可访问性,专注于可访问的站点设计,以及咨询Cahoot(一家在线银行)这一主题一年的经验.
所以我对海报的回答是否定的,没有商业理由喜欢CSS而不是桌子.它更优雅,更令人满意,也更正确,但是你作为构建它的人和必须维持它的人在你是世界上只有两个人,无论是CSS还是桌子之后都会给它留下屁股.
使用语义HTML设计是你不知道自己缺少什么的东西之一,除非你练习它.我曾经在几个网站上工作过,事后对网站进行了重新设计,对服务器端代码的影响很小或没有影响.
Restyling网站是一个非常常见的请求,我现在已经注意到了更多的东西,我可以说"是"而不是试图说出自己的方式.
而且,一旦你学会了使用页面布局系统,它通常不比基于表格的布局更难.
我认为尽可能少的表格的CSS布局更干净,更好,但我同意你有时候只需要使用一张桌子.
从商业角度来看,它通常是"以最快,最可靠的方式完成任务".根据我的经验,使用几个表通常属于该类别.
我发现在CSS渲染中缓解跨浏览器差异的一种非常有效的方法是在页面顶部使用"严格"文档类型:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
另外,对于可怕的IE6 CSS问题,你可以使用这个hack:
.someClass {
background-color:black; /*this is for most browsers*/
_background-color:white; /*this is for IE6 only - all others will ignore it*/
}
如果你有一个面向公众的网站,真正的商业案例是SEO.
无障碍环境是重要的,保持语义(X)HTML 是比维护表的布局要容易得多,但谷歌是排名第一的宝座将养家糊口.
每月网络报告:7月份的页面浏览量为1.27亿次
...
Latimes.com在SEO(搜索引擎优化)方面的表现越来越好,这意味着我们的故事在谷歌和其他搜索引擎中排名更高.我们在Digg.com这样的网站上也表现得更好.所有这些都比以往任何时候都增加了曝光率和读者人数.
如果你看看他们的网站,他们有一个相当不错的CSS布局.
通常,您发现现在相对较少的表格布局在SERP中表现良好.
我们将网页更改为基于DIV/CSS的布局的主要原因是渲染基于表格的页面的延迟.
我们有一个公共网站,其大多数用户都在印度这样的国家,在那里互联网带宽仍然是一个问题(它日益改善,但仍未达到标准).在这种情况下,当我们使用基于表格的布局时,用户必须长时间盯着空白页面.然后整个页面将以整数形式显示.通过将我们的页面转换为DIV,我们设法在用户进入我们的网站时几乎立即将一些内容带到浏览器,以及那些足以让用户参与直到浏览器下载页面的全部内容的内容.
基于表的实现的主要缺陷是,浏览器只有在下载了该表的整个html之后才会显示表的内容.当我们有一个包装页面的整个内容的主表时,以及当我们有许多嵌套表时,问题就会爆发.对于'灵活表'(没有任何固定宽度的那些),在下载整个表标签之后,浏览器必须解析到表的最后一行以找出每列的宽度,然后必须再次解析它以显示内容.直到所有这些发生的用户必须盯着一个空白的屏幕,然后一切都会在屏幕上打勾.
保持您的布局和内容分离,您可以轻松地重新设计或对网站进行调整和更改.预先可能需要更长的时间,但软件开发的最长阶段是维护.内容和设计之间明确分离的css友好站点最好在维护过程中使用.
根据我的经验,这真正增加业务价值的唯一时间是需要100%支持可访问性.当您有视力障碍的用户和/或使用屏幕阅读器查看您的网站时,您需要确保您的网站符合可访问性标准.
使用屏幕阅读器的用户往往会拥有自己的高对比度大字体样式表(如果您的网站本身不提供),这使得屏幕阅读器可以轻松解析页面.
当屏幕阅读器读取页面并查看表格时,它会告诉用户它是一个表格.因此,如果您使用表格进行布局,则会非常混乱,因为用户不知道表格的内容实际上是文章而不是其他一些表格数据.菜单应该是列表或div的集合,而不是带有菜单项的表,这又令人困惑.您应该确保使用blockquotes,alt-tags标题属性等使其更具可读性.
如果你的设计是CSS驱动的,那么你的整个外观可以被剥离掉,并用原始视图替换,这对那些用户来说是非常易读的.如果您有内联样式,基于表格的布局等,那么您将使这些用户更难以解析您的内容.
虽然我觉得当你的网站纯粹用CSS布局时,某些东西的维护变得更容易,但我不认为所有类型的维护都是如此 - 特别是当你处理跨浏览器的CSS时,显然可能是一场噩梦.
简而言之,如果您希望所述用户可以访问它,那么您的页面应该以符合标准的方式描述其构成.如果您没有需要/要求并且将来可能不需要它,那么不要浪费太多时间尝试成为CSS纯粹主义者:)使用适合您的风格和布局技术的混合并使您的工作更轻松.
干杯!
[编辑 - 在此答案的错误或误导性部分添加删除线 - 请参阅评论]
我记得的另一件事是,您可以为页面分配不同的样式表以进行打印和显示.
除了常规样式表定义之外,您还可以添加以下标记
<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />
当您将文档发送到打印机时,将根据该样式呈现文档.这使您可以去除背景图像,其他页眉/页脚信息,只需打印原始信息,而无需创建单独的模块.
仅仅通过更新1个文件对15页网站进行全面改造就是天堂.
这是真的.不幸的是,拥有一个由15,000个复杂且广泛不同的页面使用的CSS文件是你最糟糕的噩梦成真.改变一些东西 - 它打破了一千页？谁知道？
CSS在像我们这样的大型网站上是一把双刃剑.