为什么不使用表格在HTML中进行布局？[关闭]

通常，表并不比CSS更容易或更可维护。但是，存在一些特定的布局问题，其中表格确实是最简单，最灵活的解决方案。

在表示性标记和CSS支持相同类型的设计的情况下，CSS显然是更可取的，他们中没有人会认为font-tags比在CSS中指定排版更好，因为CSS具有与font-tags 相同的功能，但是在更干净的方法。

但是，表的问题基本上是Microsoft Internet Explorer不支持CSS中的表布局模型。因此，表和CSS的功能不相同。缺少的部分是表格的网格状行为，其中单元格的边缘在垂直和水平方向上对齐，而单元格仍在扩展以包含其内容。如果不对某些尺寸进行硬编码，那么在纯CSS中就很难实现这种行为，这会使设计变得僵化和脆弱（只要我们必须支持Internet Explorer-在其他浏览器中，使用即可轻松实现display:table-cell）。

因此，实际上不是要使用表还是CSS的问题，而是要认识到使用表可以使布局更灵活的特定情况的问题。

不使用表的最重要原因是可访问性。Web内容可访问性指南http://www.w3.org/TR/WCAG10/再次使用表进行布局建议。如果您担心可访问性（在某些情况下，您可能会在法律上有义务这样做），则即使表更简单，也应使用CSS。请注意，您始终可以使用CSS创建与表格相同的布局，这可能只需要做更多的工作。

值得弄清楚CSS和div，以便在页面布局的侧边栏之前加载和呈现中心内容列。但是，如果您要使用浮动div来使徽标和一些赞助商文字垂直对齐，则只需使用表格，然后继续生活。禅宗花园的宗教信仰并没有带来太大的收益。

将内容与表示分离的想法是对应用程序进行分区，以便不同种类的工作影响不同的代码块。这实际上是关于变更管理。但是编码标准只能以肤浅的方式检查代码的当前状态。

依赖于编码标准以“将内容与表示分离”的应用程序的更改日志将显示垂直竖井之间并行更改的模式。如果对“内容”的更改总是伴随着对“表示”的更改，那么分区的成功程度如何？

如果您确实想高效地对代码进行分区，请使用Subversion并查看更改日志。然后使用最简单的编码技术（div，表，JavaScript，包括，函数，对象，延续等）来构造应用程序，以使更改以简单舒适的方式适应。

由于创建布局所需的代码量，使用表布局的工具可能会变得异常繁重。SAP的Netweaver门户默认情况下使用TABLE来布局其页面。

在我目前的工作中，生产SAP门户有一个主页，其HTML超过6万，深达7个表，是该页面中的3倍。再加上Javascript，其中有16个iframe的误用，其中包含类似表格的问题，过多的CSS等，页面的大小超过5MB。

花时间降低页面权重，以便您可以利用带宽与用户进行互动活动是值得的。

因为维护使用表的站点很麻烦，并且需要花费很多时间进行编码。如果您害怕浮动div，请参加其中的课程。它们并不难理解，它们的工作效率大约提高了100倍，而使您的痛苦减少了100倍（除非您不了解它们-嘿，欢迎来到计算机世界）。

考虑使用表格进行布局的任何人最好不要期望我维护它。这是呈现网站的最粗暴的方式。谢天谢地，我们现在有一个更好的选择。我永远不会回去。

令人恐惧的是，有些人可能没有意识到使用现代工具创建网站所节省的时间和精力。

围绕语义标记的整个思想是标记和表示的分离，包括布局。

Div并不是在替换表，它们在将内容分为相关内容（，）块中有自己的用途。如果您没有技能并且依赖表，则通常必须将内容分成单元格才能获得所需的布局，但是使用语义标记时，您无需触摸标记即可实现呈现。当生成标记而不是静态页面时，这确实很重要。

开发人员需要停止提供暗示布局的标记，以便我们中那些确实具有表达内容技能的人可以继续我们的工作，并且开发人员不必在演示文稿需要更改时回到他们的代码进行更改。

这实际上不是关于“ div是否比布局表更好”的问题。懂CSS的人可以使用“布局表”直接复制任何设计。真正的胜利是将HTML元素用于它们的用途。您不会将表格用于非表格数据的原因与您不会将整数存储为字符串的原因相同-当将技术用于表目的时，技术会更容易工作。如果有必要使用表格进行布局（由于1990年代初的浏览器缺点），现在肯定不是。

• 508合规性-屏幕阅读器可以理解您的标记的能力。
• 等待渲染-在到达</table>元素末尾之前，表不会在浏览器中渲染。

另外，请不要忘记，表格在移动浏览器上的渲染效果并不理想。当然，iPhone具有辅助功能浏览器，但每个人都没有iPhone。表格渲染对于现代浏览器而言可能是花生，但对于移动浏览器而言却是一大堆西瓜。

我个人发现很多人使用太多<div>标签，但要适度使用，它可能非常干净且易于阅读。您提到，与表相比，人们阅读CSS更加困难。就“代码”而言可能是正确的；但是就阅读内容（视图>源代码）而言，用样式表比使用表更容易理解结构。

我认为那条船已经航行了。如果您查看行业的发展方向，您会注意到CSS和开放标准是该讨论的赢家。反过来，这意味着对于大多数html工作，除了表单之外，设计人员将使用div而不是表格。我很难，因为我不是CSS专家，但事实就是这样。

看起来您只是习惯了表格，仅此而已。将布局放在表格中会限制您仅使用该布局。使用CSS，您可以四处移动，看看http://csszengarden.com/ ，不，布局通常不需要很多嵌套的div。

没有用于布局的表和适当的语义，HTML更加整洁，因此更易于阅读。为什么不能理解CSS的人会尝试阅读它？而且，如果有人认为自己是Web开发人员，那么必须对CSS有良好的掌握。

SEO的优势在于能够将最重要的内容放在页面上方，并且具有更好的内容标记率。

http://www.hotdesign.com/seybold/

布局的灵活性
想象一下，您正在制作一个包含大量缩略图的页面。
DIV：
如果将每个缩略图放入一个DIV中，则向左浮动，也许其中有10个可以连续显示。使窗口变窄，然后使BAM变窄-连续6个，或者2个，或者适合多个。
表：
您必须明确地说出连续多少个单元格。如果窗口太窄，则用户必须水平滚动。

可维护性
与上述情况相同。现在，您要将三个缩略图添加到第三行。
DIV：
将其添加。布局将自动调整。
表： 将新单元格粘贴到第三行。糟糕！现在那里有太多物品。从该行切一些，然后放在第四行。现在那里有太多物品。从该行中切出一些...（等）
（当然，如果您正在使用服务器端脚本生成行和单元格，那么这可能不会成为问题。）

必须与一个包含由某些应用程序生成的6层嵌套表的网站一起工作，并使其生成无效的HTML，实际上，纠正它的微小更改需要3个小时的工作。

当然这是边缘情况，但是基于表的设计是无法维护的。如果使用css，则会将样式分开，因此在修复HTML时，您不必担心中断。

另外，使用JavaScript尝试一下。将单个表格单元格从一个位置移动到另一张桌子的另一位置。在div / span只能复制粘贴的情况下执行起来比较复杂。

“我的老板在乎吗”

如果我是你的老板。你会在意的。;）如果您珍视自己的生活。

我想这是真的，使用表格元素进行布局与表格数据关系不大。所以呢？我的老板在乎吗？我的用户在乎吗？

Google和其他自动化系统确实很在乎，它们在许多情况下同样重要。对于非智能系统而言，语义代码更易于解析和处理。

我想补充一点，基于div的布局更易于维护，发展和重构。只需对CSS进行一些更改即可对元素进行重新排序，即可完成。根据我的经验，重新设计使用表格的布局是一场噩梦（如果有嵌套表格，则更多）。

从语义的角度来看，您的代码也具有含义。

这是一个备受争议的问题，这证明了W3C未能预期将要尝试的布局设计的多样性。使用divs + css进行语义友好的布局是一个很好的概念，但是实现的细节非常有缺陷，以至于它们实际上限制了创作自由。

我试图将我们公司的一个站点从桌子切换到div，这非常令人头疼，以至于我完全浪费了我投入其中的工作时间，然后又回到了桌子上。试图与我的div搏斗以获得对垂直对齐的控制权，使我陷入了重大的心理问题，只要争论不断，我就永远不会动摇。

人们必须经常想出复杂而丑陋的变通办法来实现简单的设计目标（例如垂直对齐），这一事实强烈表明，这些规则还不够灵活。如果规范足够，那么为什么备受瞩目的网站（如SO）认为有必要使用表和其他解决方法来改变规则？

DIV中没有任何论据值得我支持。

我会说：如果鞋子合适，穿上它。

值得注意的是，很难甚至不可能找到一种很好的DIV + CSS方法来在两三列中呈现内容，这在所有浏览器上都是一致的，并且仍然按照我的意图进行。

这使大多数布局中的表都达到了某种平衡，尽管我对使用它们感到内gui（不明白为什么，人们只是说这很不好，所以我还是要听它们），最后，务实的观点是对我来说，使用TABLES更加容易和快捷。我没有按小时付费，所以桌子对我来说更便宜。

CSS布局通常对于可访问性要好得多，只要内容按自然顺序排列并且没有样式表就可以理解。不仅屏幕阅读器在使用基于表格的布局时遇到困难：它们还使移动浏览器更难以正确呈现页面。

此外，使用基于div的布局，您可以轻松地通过打印样式表完成一些很酷的事情，例如从打印的页面中排除页眉，页脚和导航-我认为使用以下方法无法做到这一点，或者至少要困难得多：基于表格的布局。

如果您怀疑使用div比使用表格更容易从布局中分离内容，请查看CSS Zen Garden中基于div的HTML ，了解如何更改样式表可以极大地更改布局，并考虑是否可以如果HTML是基于表格的，则可以实现相同的布局...如果您正在基于表格的布局，则不太可能使用CSS来控制单元格中的所有间距和填充（如果您使用几乎可以肯定，首先发现使用浮动div等更容易）。在不使用CSS来控制所有内容的情况下，并且由于表指定了HTML中事物从左到右和从上到下的顺序，因此表往往意味着您的布局在HTML中变得非常固定。

实际上，我认为要完全更改基于div和CSS的设计的布局而不更改div很难。但是，使用基于div和CSS的布局，可以轻松地调整各个块之间的间距及其相对大小之类的内容。

根据508规范（对于有视觉障碍的屏幕阅读器而言），表格仅应用于保存数据，而不能用于布局，因为它会导致屏幕阅读器异常。还是有人告诉我。

如果为每个div分配名称，则也可以使用CSS将它们全部换肤。要让他们按自己的方式坐下来，他们只会感到有些痛苦。

布局应该很容易。事实上，有文章介绍了如何在CSS中使用页眉和页脚实现动态三列布局，这表明它是一个较差的布局系统。当然您可以使它正常工作，但是在线上有数百篇有关如何执行此操作的文章。对于表格的类似布局，几乎没有此类文章，因为它显然是显而易见的。无论您对表说什么，而对CSS表示赞成，这一事实都无法解决所有问题：CSS中的基本三列布局通常称为“圣杯”。

如果那不能使您说出“ WTF”，那么您现在真的需要放下酷玩乐队。

我喜欢CSS。它提供了惊人的样式选项和一些很酷的定位工具，但作为布局引擎，它是不足的。需要某种类型的动态网格定位系统。一种无需先知道框尺寸即可在多轴上对齐框的简单方法。如果您将其命名为<table>或<gridlayout>或其他名称，我不会说该死的，但这是CSS所缺少的基本布局功能。

更大的问题是，由于不承认缺少某些功能，CSS狂热者一直在阻止CSS。如果CSS像世界上其他布局引擎一样提供了不错的多轴网格定位，我将非常乐意停止使用表。（您确实意识到，除了W3C之外，每个人都已经用许多语言解决了许多问题，对吗？没有其他人否认此功能很有用。）

叹。足够的排气。继续前进，将头伸回到沙滩上。

一张桌子的布局还不错。但是大多数情况下，仅一张桌子就无法获得所需的布局。很快，您将有2或3个嵌套表。这变得非常麻烦。

• 它很难阅读。这不符合意见。嵌套的标签更多，上面没有识别标记。

• 将内容与演示文稿分开是一件好事，因为它使您可以专注于正在做的事情。将两者混合会导致难以阅读的pages肿页面。

• CSS for styles允许您的浏览器缓存文件，并且后续请求要快得多。这是巨大的。

• 表格将您锁​​定在设计中。当然，并不是每个人都需要CSS Zen Garden的灵活性，但是我从来没有在一个不需要在此四处更改设计的网站上工作过。使用CSS要容易得多。

• 表格很难样式化。您对它们没有太多的灵活性（即，您仍然需要添加HTML属性以完全控制表格的样式）

我大概有四年没有用过表格了。我没有回头。

我真的很建议阅读Andy Budd的CSS Mastery。这是梦幻般的。

图片在ecx.images-amazon.com http://ecx.images-amazon.com/images/I/41TH5NFKPEL._SL500_BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg

CSS / DIV-这只是设计人员的工作，不是吗。我花了数百个小时来调试DIV / CSS问题，在Internet上搜索以使用晦涩的浏览器来获得某些标记，这使我发疯。您做了一点改动，整个布局就大错特错了-在逻辑上，食堂在哪里。花费几个小时以这种方式移动3像素，然后再移动2像素，使它们全部对齐。对于我来说，这似乎是完全错误的。仅仅因为您是一个纯粹主义者而做某事是“不正确的事情”，并不意味着您应该在所有情况下都使用n级，尤其是当它使您的生活轻松1000倍时。

因此，我最终决定纯粹是出于商业考虑，尽管我一直在尽量减少使用，但如果我预计20个小时的工作才能正确放置DIV，我会坚持下去。这是错误的，它使纯粹主义者感到不安，但在大多数情况下，它花费的时间更少且管理起来更便宜。然后，我可以专注于让应用程序按照客户的要求运行，而不是取悦纯粹主义者。毕竟，他们确实要支付账单，而我对强制使用CSS / DIV的经理的说法是不对的-我只是指出，客户也要支付他的薪水！

所有这些CSS / DIV参数出现的唯一原因是因为CSS的缺点，并且因为浏览器彼此不兼容，如果兼容的话，世界上一半的Web设计师都将失业。 。

当您设计Windows窗体时，不要在布局控件后尝试移动控件，因此我觉得对于您为什么要使用Web窗体来做到这一点我感到很奇怪。我根本无法理解这种逻辑。正确地开始布局，这是什么问题。我认为这是因为设计师喜欢调情创造力，而应用程序开发人员则更关心实际使应用程序正常工作，创建业务对象，实施业务规则，确定客户数据之间的相互关系，确保事物满足客户的需求。需求-您知道-就像现实世界中的东西一样。

不要误会我的意思，两个参数都是有效的，但是请不要批评开发人员选择一种更简单，更合乎逻辑的方法来设计表单。与在div上使用表的正确语义相比，我们通常要担心的事情更重要。

案例分析-基于此讨论，我将一些现有的tds和trs转换为div。45分钟的时间弄得一团糟，试图让所有东西彼此排成一排，我放弃了。TD在10秒后返回-在所有浏览器上均可正常运行-无需执行任何其他操作。请尝试使我理解-您希望我以其他任何方式这样做有什么可能的理由！

无论如何，这不是确定的参数，但是使用CSS，您可以采用相同的标记并根据媒介更改布局，这是一个很好的优势。例如，对于打印页面，您可以安静地禁止导航，而不必创建易于打印的页面。

不幸的是，CSS Zen Garden不能再用作良好HTML / CSS设计的示例。实际上，他们最近的所有设计都使用图形作为节标题。这些图形文件在CSS中指定。

因此，一个旨在展示将设计保持在内容之外的优势的网站，现在经常承诺将内容放入设计中。（如果要更改HTML文件中的节标题，则显示的节标题不会更改）。

这仅表明，即使那些提倡严格的DIV和CSS信仰的人也无法遵循自己的规则。您可以以此为指导来密切关注他们。

明显的答案：请参阅CSS Zen Garden。如果您告诉我您可以轻松地对基于表的布局进行同样的操作（请记住-HTML不变），那么请务必使用表进行布局。

其他两个重要的事情是可访问性和SEO。

两者都关心按什么顺序显示信息。如果基于表的布局将导航放置在页面上第二个嵌套表的第二行的第三个单元格中，则无法轻松在页面顶部显示导航。

因此，您的答案是可维护性，可访问性和SEO。

别偷懒 即使学习起来有些困难，也要以正确和正确的方式做事。

这是我的程序员从类似线程得到的答案

语义学101

首先看一下这段代码，然后思考这里出了什么问题...

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

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

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

语义学102

现在将其应用于文档标记。如果您的文档需要显示表格数据，则相应的标签为<table>。但是，如果将导航放置到表中，则表示您滥用了<table>元素的预期用途。在第二种情况下，您不是在显示表格数据，而是（错误地）使用该<table>元素来实现表示性目标。

结论

访客会注意到吗？不，你的老板在乎吗？也许。我们有时会像程序员一样偷工减料吗？当然。但是我们应该吗？不。如果您使用语义标记，谁会受益？您-和您的专业声誉。现在去做正确的事。