似乎每当我尝试创建一个纯CSS布局时，它比我使用一两个表需要更长的时间。让三列长度相等，数据量不同似乎需要特别花哨的黑客攻击，特别是在处理跨浏览器问题时。
我的问题：
这几张桌子会受伤吗？
表格似乎在表格数据上运作得特别好 - 为什么它们在这个时代如此受到谴责？ Google.com的源代码中有一个表格，其他许多网站也是如此（stackoverflow.com不是这样）。
答案 0 :(得分：25)
由于这是堆栈溢出，我会给你程序员的回答
语义101首先看一下这段代码，然后想一想这里有什么问题......
class car {
int wheels = 4;
string engine;
}
car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;
问题当然是自行车不是汽车。汽车类对于自行车实例来说是不合适的类。代码没有错误，但在语义上是不正确的。它对程序员反映不佳。
语义学102现在将此应用于文档标记。如果您的文档需要提供表格数据，那么相应的标记将为<table>。但是，如果您将导航放入表中，那么您将滥用<table>元素的预期用途。在第二种情况下，您没有呈现表格数据 - 您（错误）使用<table>元素来实现表达目标。
这伤害了谁？没有人。如果使用语义标记，谁会受益？你 - 以及你的专业声誉。现在去做正确的事。
答案 1 :(得分：17)
像许多事情一样，这是一个好主意，经常被带到太远。我喜欢div + css驱动的布局，因为通常很容易通过样式表来改变外观，甚至是非常容易。与较低级别的浏览器，屏幕阅读器等友好相处也很好。但是，与编程中的大多数决策一样，在做出决定时应考虑网站的目的和开发成本。无论哪一方都是100％的时间都是正确的方式。
BTW，我想每个人都同意表应该用于表格数据。
答案 2 :(得分：9)
在现实世界中，您在不触及标记的情况下进行一次设计并完全重新设计的可能性非常小。它适用于像csszengarden这样的博客和炮制演示，但对于任何具有中等复杂设计的网站来说，这都是一个虚假的好处。使用CMS更为重要。
DIVs加上CSS！=语义。对于SEO和可访问性来说，良好的HTML非常值得，无论表格还是CSS都用于布局。通过将非常简单的表与一些好的CSS相结合，您可以获得真正高效，快速的Web设计。
表布局比CSS布局更容易访问，反过来也是如此 - 它完全取决于内容的源顺序，只是因为你避免使用表并不意味着拥有屏幕阅读器的用户会自动享受美好时光在您的网站上。布局表与屏幕阅读器访问无关，前提是内容在线性化时有意义，与CSS布局完全相同。数据表不同;它们很难正确标记，即使这样，屏幕阅读器软件的用户通常也不知道他们需要用来理解数据的命令。
您应该担心正确使用标题标记和替代文本，并且正确分配表单标签，而不是苦苦于使用一些布局表。那么你将对现实世界的可访问性有一个很好的准备。
这可以从多年运行用户测试Web可访问性，专门从事可访问的站点设计，以及咨询Cahoot（一家在线银行）这一主题一年的经验。
所以我对海报的回答是否定的，没有商业理由喜欢CSS而不是桌子。它更优雅，更令人满意，也更正确，但你是建立它的人和必须维持它的人，在你是世界上唯一两个给老鼠屁股的人之后，无论是CSS还是桌子。
答案 3 :(得分：8)
使用语义HTML设计是你不知道自己缺少什么的东西之一，除非你练习它。我已经在几个网站上工作过，事后对网站进行了重新设计，对服务器端代码的影响很小或没有影响。
Restyling网站是一个非常常见的请求，我现在已经注意到了这一点，我可以说“是”而不是试图说出来。
而且，一旦你学会了使用页面布局系统，它通常不比基于表格的布局更难。
答案 4 :(得分：7)
我认为尽可能少的表格的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*/
}
答案 5 :(得分：7)
我们将网页更改为基于DIV / CSS的布局的主要原因是渲染基于表格的页面的延迟。
我们有一个公共网站，其大部分用户都在印度这样的国家，互联网带宽仍然是一个问题（它日益改善，但仍未达到标准）。在这种情况下，当我们使用基于表格的布局时，用户必须长时间盯着空白页面。然后整个页面将以整数形式显示。通过将我们的页面转换为DIV，我们设法在用户进入我们的网站时几乎立即将一些内容带到浏览器，以及那些足以让用户参与直到浏览器下载页面的全部内容的内容。
基于表的实现的主要缺陷是，浏览器只有在下载了该表的整个html之后才会显示表的内容。当我们有一个包装页面的整个内容的主表时，以及当我们有许多嵌套表时，问题就会爆发。对于'灵活表'（没有任何固定宽度的那些），在下载整个表标签之后，浏览器必须解析到表的最后一行以找出每列的宽度，然后必须再次解析它以显示内容。直到所有这些发生，用户必须盯着一个空白的屏幕，然后一切都会在屏幕上显示。
答案 6 :(得分：7)
如果你有一个面向公众的网站，真正的商业案例是SEO。
辅助功能非常重要，维护语义（X）HTML 比维护表格布局要容易得多，但谷歌排名第一的将会带来培根。
例如：Monthly web report: 127 million page views for July
每月网络报告：7月份的页面浏览量达到1.27亿次
...
Latimes.com在SEO（搜索引擎优化）方面的表现越来越好，这意味着我们的故事在谷歌和其他搜索引擎中排名更高。我们在Digg.com这样的网站上也表现得更好。所有这些都增加了曝光率，增加了读者人数。
如果你看一下他们的网站，他们就会有一个相当不错的CSS布局。
一般来说，你发现现在相对较少的表格布局在SERP中表现良好。
答案 7 :(得分：6)
将您的布局和内容分开，这样您就可以轻松地重新设计或对网站进行调整和更改。预先可能需要更长的时间，但软件开发的最长阶段是维护。在维护过程中，css友好的网站在内容和设计之间有明确的分离。
答案 8 :(得分：6)
根据我的经验，这真正增加业务价值的唯一时间是需要100％支持可访问性。当您有视力障碍的用户和/或使用屏幕阅读器查看您的网站时，您需要确保您的网站符合可访问性标准。
使用屏幕阅读器的用户往往会拥有自己的高对比度大字体样式表（如果您的网站本身不提供），这使得屏幕阅读器可以轻松解析页面。
当屏幕阅读器读取页面并看到一个表格时，它会告诉用户它是一个表格。因此，如果您使用表格进行布局，则会变得非常混乱，因为用户不知道表格的内容实际上是文章而不是其他一些表格数据。菜单应该是列表或者div的集合，而不是带有菜单项的表，这又令人困惑。您应该确保使用blockquotes，alt-tags title属性等使其更具可读性。
如果您的设计是CSS驱动的，那么您的整个外观可以被剥离并替换为对于这些用户来说非常易读的原始视图。如果你有内联样式，基于表格的布局等，那么你就会让那些用户更难以解析你的内容。
虽然当您的网站完全使用CSS布局时，我确实觉得某些事情的维护变得更容易，但我不认为所有类型的维护都是如此 - 尤其是当您正在处理跨浏览器的CSS，这显然可能是一场噩梦。
简而言之，如果您希望所述用户可以访问它，那么您的页面应该以符合标准的方式描述其构成。如果您没有需要/要求并且将来可能不需要它，那么不要浪费太多时间尝试成为CSS纯粹主义者:)使用适合您的风格和布局技术的混合并使您的工作更容易。
干杯！
[编辑 - 在这个答案的错误或误导性部分添加删除线 - 见评论]
答案 9 :(得分：6)
我记得的另一件事是，您可以为页面分配不同的样式表以进行打印和显示。
除了正常的样式表定义外，您还可以添加以下标记
<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />
当您将文档发送到打印机时，将根据该样式呈现文档。这使您可以去除背景图像，其他页眉/页脚信息，只需打印原始信息，而无需创建单独的模块。
答案 10 :(得分：6)
仅仅通过更新1个文件对15页网站进行全面改造就是天堂。
这是事实。不幸的是，拥有一个由15,000个复杂且广泛不同的页面使用的CSS文件是你最糟糕的噩梦成真。改变一些东西 - 它打破了一千页？谁知道？
CSS在像我们这样的大型网站上是一把双刃剑。
答案 11 :(得分：4)
想法是设计师可以设计和Web开发人员可以实现的。在动态Web应用程序中尤其如此，您不希望设计人员在源代码中乱七八糟。
现在，虽然有模板引擎，设计师显然只是喜欢疯狂，CSS允许比桌子更多的特技。
话虽如此：作为一名开发人员，我放弃了CSS布局，主要是因为我的设计无论如何都很糟糕，所以至少它可以很好地吸吮:-)但如果我想雇用一个设计师，我会让他使用他所见即所得的任何编辑器吐出来。
答案 12 :(得分：1)
CSS布局的商业原因：您可以通过说“我们的门户网站完全可自定义/可换肤而无需编写代码”来吹走客户！
然后，我再也没有看到用表格设计块元素的任何邪恶。块元素意味着在不同的设计中将所述元素分开是没有任何意义的。
因此，当然，表格数据最好用表格表示。在他们自己的表中设计主要构建块（例如菜单栏，新闻自动收报机等）也应该没问题。只是不要依赖表格进行整体页面布局，你会没事的，可以选择。
答案 13 :(得分：1)
除了易于更新和合规......
我用来设计所有基于表格的网站，起初我很耐心，但我一点一点地转向CSS。它不会在一夜之间发生，但它确实发生了，你也应该这样做。
有些晚上我想把电脑扔到窗外，因为我申请div的风格并不是我想要的，但你从这些障碍中学习。
对于企业而言，一旦您通过CSS设计网站到科学，您可以为每个网站开发流程，甚至使用过去的网站，只需添加不同的标题图形，颜色等。
此外，请务必嵌入/包含您网站的所有可重复使用部分：标题，子标题，页脚。
一旦你越过驼峰，它就会从那里下山。祝你好运！
答案 14 :(得分：1)
*我会让他使用他所见即所得编辑器吐出的任何东西 我只是呕吐了一点...... *啊你好？您不认为平面设计师正在手工编写CSS吗？
有趣的是，我与一些设计师合作过，其中最好的 做 手动调整他们的CSS。我正在考虑的那个人实际上将他的所有设计工作作为带有几个CSS文件的XHTML文件，并在他需要时动态创建图形元素。他使用Dreamweaver，但仅作为导航工具。 （我从那个人那里学到了很多东西）
一旦你投资学习纯粹的基于CSS的设计并且有一点经验（发现IE很糟糕[公平地说它变得越来越好]）它最终会更快找到。我从事过内容管理系统的研究，很少需要改变应用程序，让设计师想出一个截然不同的外观。
答案 15 :(得分：0)
我实际上可以在用户页面上看到Stack Overflow中的表格。
它甚至还有很多内联样式......
答案 16 :(得分：0)
在可维护性和生产力方面，DIV + CSS布局实际上比表格布局容易得多。只是继续练习它还为时尚早。
表布局也很好，它不仅仅适用于布局，并且在进行微调时具有特殊的缺点。
答案 17 :(得分：0)
我认为根本没有商业理由。技术上的原因，也许，即使如此，勉强 - 这是全世界的巨大倍数，然后你在IE中看它并分解和哭泣。
答案 18 :(得分：0)
当屏幕阅读器读取页面并看到表格时，它会告诉用户它是一个表格。因此，如果您使用表格进行布局，则会非常混乱，因为用户不知道表格的内容实际上是文章而不是其他一些表格数据
实际上并非如此;屏幕阅读器如JAWS，Window Eyes和HAL忽略布局表。他们在处理真实的网络时非常有效。
答案 19 :(得分：0)
为什么这是一个好的做法的其他一些原因：
答案 20 :(得分：0)
::在palmsey和Jon Galloway点头点赞::
我同意可维护性因素。我需要花费更长的时间来完成我的初始布局（因为我仍然是CSS艺术中的绝地学徒），但仅仅通过更新1个文件对15页网站进行全面改造就是天堂。