首页 文章

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

提问于
浏览 次
665

似乎是general opinion表格不应该用于HTML中的布局 .

为什么？

我从未（或很少说实话）看到过这方面的好论据 . 通常的答案是：

  • 这对separate content from layout很好
    但这是一个谬误的论点; Cliche Thinking . 我认为使用表格元素进行布局与表格数据几乎没有关系 . 所以呢？我老板在乎吗？我的用户在乎吗？

也许我或我的开发人员必须维护一个网页护理......一个表不易维护吗？我认为使用表是easier而不是使用div和CSS .

顺便说一句......为什么使用div或span将内容与布局和表格分开？只使用div来获得一个好的布局通常需要很多嵌套的div .

  • 代码的可读性
    我认为这是相反的方式 . 大多数人都懂HTML，很少有人理解CSS .

  • SEO最好不要使用表格
    为什么？任何人都可以展示一些证据吗？或谷歌发表声明，从SEO的角度来看，表格是不受阻碍的？

  • 表格较慢 .
    必须插入额外的tbody元素 . 这是现代网络浏览器的花生 . 向我展示一些使用表格会显着减慢页面速度的基准 .

  • 如果没有表格，布局检修会更容易，请参阅css Zen Garden .
    大多数需要升级的网站也需要新内容（HTML） . 新版本的网站只需要新的CSS文件的情况不太可能发生 . Zen Garden是一个不错的网站，但有点理论上 . 更不用说它的misuse CSS了 .

我真的对使用divs CSS而不是表格的好参数感兴趣 .

html css

30 回答

  • 13

    我想补充一点，基于div的布局更容易保持，进化和重构 . 只是对CSS进行了一些更改以重新排序元素并完成了 . 根据我的经验，重新设计使用表的布局是一场噩梦（如果有嵌套表，则更多） .

    从semantic的角度来看，您的代码也有意义 .

    回复于
  • 23

    将内容与布局分开是件好事但这是一个谬误的论点;陈词滥调

    这是一个谬误的论点，因为HTML表格是布局！内容是表中的数据，表示是表本身 . 这就是为什么有时将CSS与HTML分离是非常困难的 . 你're not separating content from presentation, you'将演示文稿与演示文稿分开！一堆嵌套的div与表没有什么不同 - 它只是一组不同的标签 .

    将HTML与CSS分离的另一个问题是，他们需要彼此密切了解 - 你真的无法将它们完全分开 . 无论您做什么，HTML中的标记布局都与CSS文件紧密耦合 .

    我认为table vs divs可以归结为你的应用程序的需求 .

    在我们开发的应用程序中，我们需要一个页面布局，其中的部分将根据其内容动态调整大小 . 我花了几天的时间尝试使用CSS和DIV进行跨浏览器工作，这是一个完整的噩梦 . 我们切换到 table ，这一切都刚刚起作用 .

    但是，我们的产品拥有非常封闭的受众（我们销售带有Web界面的硬件），并且我们不关心可访问性问题 . 我不知道为什么屏幕阅读器不能很好地处理表格，但我想如果这是它的方式，那么开发人员必须处理它 .

    回复于
  • 3

    我将一个接一个地查看你的论点，并尝试在其中显示错误 .

    将内容与布局分开是件好事但这是一个谬误的论点;陈词滥调 .

    这根本不是谬误，因为HTML是故意设计的 . 滥用元素可能不是完全不可能的（毕竟，新的习语也是用其他语言发展的）但可能的负面影响必须得到 balancer . 此外，即使今天没有反对滥用 <table> 元素的论据，明天也可能因为浏览器供应商对元素采用特殊处理方式 . 毕竟，他们知道“ <table> 元素仅用于表格数据”并且可能会使用这个事实来改进渲染引擎，在此过程中巧妙地改变了 <table> 的行为方式，从而打破了之前被滥用的情况 .

    那又怎样？我老板在乎吗？我的用户在乎吗？

    要看 . 你老板尖头发吗？然后他可能不在乎 . 如果她有能力，那么她会关心，因为用户will .

    也许我或我的开发人员必须维护网页关注......表格是否较不可维护？我认为使用表比使用div和css更容易 .

    大多数专业网站开发人员似乎反对你[引证需要] . 这些表实际上不太可维护应该是显而易见的 . 使用表格进行布局意味着更改公司布局实际上意味着更改每一页 . 这可能非常昂贵 . 另一方面，明智地使用与CSS结合的语义上有意义的HTML可能会将这些更改限制在CSS和图片中用过的 .

    顺便说一下......为什么使用div或span将内容与布局和表格分开？只使用div来获得一个好的布局通常需要很多嵌套的div .

    深度嵌套的 <div> 是一种反模式，就像表格布局一样 . 优秀的网页设计师不会有很多桌面布局的问题 . 事实上，他们甚至可以通过逻辑划分部分内容来促进语义结构 .

    代码的可读性我认为这是另一种方式 . 大多数人都懂html，很少了解css . 它更简单 .

    “大多数人”并不重要 . 专业人士很重要 . 对于专业人士而言，表格布局比HTML CSS产生更多问题 . 这就像说我不应该使用GVim或Emacs，因为记事本对大多数人来说更简单 . 或者我不应该使用LaTeX，因为MS Word对大多数人来说更简单 .

    SEO最好不要使用表格

    我不会将此作为参数使用，但这是合乎逻辑的 . 搜索引擎搜索相关数据 . 虽然表格数据当然是相关的，但很少用户搜索 . 用户搜索页面 Headers 中使用的术语或类似的突出位置 . 因此，将表格内容从过滤中排除并因此大大减少处理时间（和成本！）是合乎逻辑的 .

    表格较慢 . 必须插入额外的tbody元素 . 这是现代网络浏览器的花生 .

    额外的元素与表格较慢无关 . 另一方面，表的布局算法要困难得多，浏览器通常必须等待整个表加载才能开始布局内容 . 此外，布局的缓存将不起作用（CSS可以很容易地缓存） . 之前已经提到过这一切 .

    向我展示一些使用表格会显着减慢页面速度的基准 .

    不幸的是，我没有任何基准数据 . 我自己会对它感兴趣，因为这个论点缺乏一定的科学严谨性是正确的 .

    大多数需要升级的网站也需要新内容（html） . 新版本的网站只需要新的css文件的情况不太可能发生 .

    一点也不 . 我曾经研究过几种情况，通过内容和设计的分离简化了设计 . 通常仍然需要更改一些HTML代码，但更改将始终更加局限 . 此外，有时必须动态地进行设计更改 . 考虑模板引擎，例如WordPress博客系统使用的模板引擎 . 表格布局实际上会杀死这个系统 . 我曾为类似的商业软件案件工作过 . 能够在不更改HTML代码的情况下更改设计是业务要求之一 .

    另一件事 . 表格布局使得自动解析网站（屏幕抓取）变得更加困难 . 这可能听起来微不足道，因为毕竟谁做到了？我很惊讶自己 . 如果相关服务不提供访问其数据的WebService替代方法，则屏幕抓取可以提供很多帮助 . 我在生物信息学领域工作，这是一个悲惨的现实 . 现代Web技术和Web服务尚未覆盖大多数开发人员，并且屏幕抓取通常是自动化获取数据过程的唯一方法 . 难怪许多生物学家仍然手动执行这些任务 . 对于数以千计的数据集 .

    回复于
  • 21

    明显的答案：见CSS Zen Garden . 如果你告诉我你可以使用基于表格的布局轻松地做同样的事情（记住 - HTML没有改变），那么一定要使用表格进行布局 .

    另外两个重要的事情是可访问性和SEO .

    两者都关心信息的呈现顺序 . 如果基于表格的布局将其放在页面上第二个嵌套表格第2行的第3个单元格中，则无法在页面顶部轻松显示导航 .

    所以你的答案是可维护性，可访问性和SEO .

    不要偷懒 . 即使他们有点难以学习，也要做正确的事情 .

    回复于
  • 3

    不幸的是，CSS Zen Garden不能再被用作良好的HTML / CSS设计的例子 . 实际上，他们最近的所有设计都使用图形进行剖面 Headers . 这些图形文件在CSS中指定 .

    因此，一个网站的目的是显示保持设计内容的优势，现在定期承诺将内容放入设计中 . （如果要更改HTML文件中的节 Headers ，则显示的节 Headers 不会） .

    这只表明即使那些提倡严格的DIV＆CSS宗教，也不能遵循自己的规则 . 您可以将其作为指导，了解您如何密切关注它们 .

    回复于
  • 19

    这不是关于'divs是否比布局表更好' . 理解CSS的人可以非常直接地使用“布局表”复制任何设计 . 真正的胜利是使用HTML元素来实现它们的目的 . 您不将表用于非表格数据的原因与您不将整数存储为字符的原因相同字符串 - 当您将其用于设计目的时，技术可以更轻松地工作 . 如果有必要使用表格进行布局（由于20世纪90年代早期的浏览器缺点），现在肯定不是 .

    回复于
  • 48

    这是我的程序员的答案simliar thread

    Semantics 101

    首先来看看这段代码并思考这里有什么问题......

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

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

    当然，问题在于自行车不是汽车 . 汽车类对于自行车实例来说是不合适的类 . 代码没有错误，但在语义上是不正确的 . 它对程序员反映不佳 .

    Semantics 102

    现在将此应用于文档标记 . 如果您的文档需要显示表格数据，那么相应的标记将是 <table> . 但是，如果您将导航放入表中，那么您将滥用 <table> 元素的预期用途 . 在第二种情况下，你're not presenting tabular data -- you'使用 <table> 元素重新（误）来实现一个表达目标 .

    Conclusion

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

    回复于
  • 12

    布局应该很容易 . 有关如何在CSS中实现带有页眉和页脚的动态三列布局的文章的事实表明它是一个糟糕的布局系统 . 当然你可以让它工作，但在网上有数百篇关于如何做的文章 . 对于与表格类似的布局，几乎没有这样的文章，因为它显然是显而易见的 . 无论你对表和CSS表示什么，这一事实都解开了：CSS中基本的三列布局通常被称为“圣杯” .

    如果那不能让你说“WTF”那么你真的需要现在放下kool-aid .

    我喜欢CSS . 它提供了令人惊叹的造型选项和一些很酷的定位工具，但作为布局引擎，它是有缺陷的 . 需要某种类型的动态网格定位系统 . 一种简单的方法，可以在不知道尺寸的情况下在多个轴上对齐方框 . 如果你把它称为<table>或<gridlayout>或其他什么，我不会给出该死的，但这是CSS缺少的基本布局功能 .

    更大的问题是，由于不承认缺少功能，CSS狂热者已经从可能的所有方面恢复了CSS . 如果CSS提供了像世界上基本上所有其他布局引擎一样体面的多轴网格定位，我将非常乐意停止使用表格 . （你确实意识到除了W3C之外，所有人都已经用多种语言多次解决了这个问题，对吗？没有其他人否认这样的功能是有用的 . ）

    叹 . 足够的发泄 . 来吧，把头伸回沙子里 .

    回复于
  • 91

    因为维护一个使用表的站点是很好的，并且需要更长的代码 . 如果你害怕浮动的div，那就去吧 . 它们并不难理解，它们的效率大约高出100倍，而屁股的痛苦减少了一百万倍（除非你不了解它们 - 但是，嘿，欢迎来到电脑世界） .

    任何考虑使用表格进行布局的人都不希望我维护它 . 这是呈现网站最倒退的方式 . 感谢上帝，我们现在有一个更好的选择 . 我永远不会回去 .

    令人害怕的是，有些人可能不知道使用现代工具创建网站所带来的时间和能量效益 .

    回复于
  • 8

    围绕语义标记的整个想法是标记和表示的分离，其中包括布局 .

    Div不是替换表，它们在将内容分成相关内容块（，）时有自己的用途 . 当您没有技能并且依赖于表格时，您通常必须将内容分离到单元格以获得所需的布局，但是在使用语义标记时，您不需要触摸标记来实现演示 . 在生成标记而不是静态页面时，这非常重要 .

    开发人员需要停止提供暗示布局的标记，以便我们这些具有呈现内容技能的人可以继续我们的工作，并且开发人员不必回到他们的代码来在演示需求变化时进行更改 .

    回复于
  • 14

    此外，请不要忘记，表格在移动浏览器上不能很好地呈现 . 当然，iPhone有一个kick-ass浏览器，但每个人都没有iPhone . 表格渲染可以是现代浏览器的花生，但它是移动浏览器的一堆西瓜 .

    我个人发现许多人使用了太多的 <div> 标签，但在适度的情况下，它可以非常干净且易于阅读 . 你提到人们阅读CSS比阅读表更难;就_80914而言，这可能是真的;但是在阅读内容方面（视图>源代码），使用样式表比使用表格更容易理解结构 .

    回复于
  • 5

    我认为这艘船已经航行了 . 如果你看看业界已采取的方向，您将注意到CSS和开放标准是该讨论的赢家 . 这反过来意味着大多数html工作，除了表单，设计师将使用div而不是表 . 我很难过，因为我不是CSS大师，但事实就是如此 .

    回复于
  • 5

    CSS布局通常对于可访问性来说要好得多，只要内容以自然顺序出现并且没有样式表就有意义 . 并且不仅仅是屏幕阅读器难以使用基于表格的布局：它们也使移动浏览器更难以正确呈现页面 .

    此外，使用基于div的布局，您可以非常轻松地使用打印样式表来执行很酷的操作，例如从打印页面中排除页眉，页脚和导航 - 我认为使用打印页面执行此操作是不可能的，或者至少要困难得多 . 基于表格的布局 .

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

    实际上我认为在不改变div的情况下完全改变基于div和CSS的设计的布局是非常困难的 . 但是，使用基于div和CSS的布局，可以更轻松地调整各种块之间的间距以及它们的相对大小 .

    回复于
  • 104

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

    我当前演出的 生产环境 SAP门户有一个主页，其HTML重量超过60K，深度为七个表，在页面内三次 . 添加Javascript，误用16个内部类似表问题的iframe，过于繁重的CSS等，页面重量超过5MB .

    花时间降低页面重量，以便您可以使用带宽与用户进行互动活动，这是值得的 .

    回复于
  • 13

    这是最近一个项目的html部分：

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <div id="header">
        <h1><!-- Page title --></h1>
        <ol id="navigation">
            <!-- Navigation items -->
        </ol>
        <div class="clearfix"></div>
    </div>
    <div id="sidebar">
        <!-- Sidebar content -->
    </div>
    <!-- Page content -->
    <p id="footer"><!-- Footer content --></p>
</body>
</html>

    这是与基于表格的布局相同的代码 .

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td><!-- Page Title --></td>
            <td>
                <table>
                    <tr>
                        <td>Navitem</td>
                        <td>Navitem</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table>
        <tr>
            <td><!-- Page content --></td>
            <td><!-- Sidebar content --></td>
        </tr>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </table>
</body>
</html>

    我在基于表格的布局中看到的唯一清洁度是我对缩进的过分热心 . 我确信内容部分还有两个嵌入式表 .

    另一件需要考虑的事情： filesizes . 我是一个很大的问题，但是那些使用拨号调制解调器的人 .

    回复于
  • 36

    一张布局表不会那么糟糕 . 但是大多数时候你只能用一张 table 就无法获得所需的布局 . 很快就会有2或3个嵌套表 . 这变得非常麻烦 .

    • 阅读起来比较困难 . 这不符合意见 . 只有更多嵌套标签，上面没有识别标记 .

    • 将内容与演示文稿分开是一件好事，因为它可以让您专注于您正在做的事情 . 混合两个导致难以阅读的膨胀页面 .

    • 样式的CSS允许您的浏览器缓存文件，后续请求更快 . 这太棒了 .

    • 表将您锁定在设计中 . 当然，并不是每个人都需要CSS Zen Garden的灵活性，但我从未在一个我不需要在这里和那里稍微改变设计的网站上工作过 . 使用CSS更容易 .

    • 表很难设计 . 你没有太多的灵活性（即你仍然需要添加HTML属性来完全控制表的样式）

    我可能在4年内没有使用表格来表示非表格数据 . 我没有回头 .

    我真的很想建议安迪·巴德阅读CSS Mastery . 这是梦幻般的 .

    Image at 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

    回复于
  • 13

    事实上这是一个激烈争论的问题，这证明了W3C未能预测将要尝试的布局设计的多样性 . 使用divs css进行语义友好的布局是一个很好的概念，但实现的细节是如此有缺陷，以至于它们实际上限制了创作自由 .

    我试图将我们公司的一个站点从 table 切换到divs，这让我很头疼，因为我完全放弃了我投入的工作时间并回到了 table 上 . 试图与我的divs搏斗以获得对垂直对齐的控制已经诅咒我的主要心理问题，只要这场辩论肆虐，我将永远不会动摇 .

    人们必须经常提出复杂而丑陋的变通方法以实现简单的设计目标（例如垂直对齐）这一事实强烈地表明规则并不接近足够灵活 . 如果规格足够，那么为什么高调的网站（如SO）发现有必要使用表格和其他解决方法来修改规则？

    回复于
  • 290

    由于必须使用涉及由某些应用程序生成的6层嵌套表的网站，并且已经生成了无效的HTML，实际上是一个3小时的工作来纠正它以打破一个小的改变 .

    这当然是边缘情况，但基于表格的设计是不可维护的 . 如果你使用css，你将样式分开，所以在修复HTML时你不必担心破坏 .

    另外，请尝试使用JavaScript . 将单个表格单元格从一个位置移动到另一个表格中的另一个位置 . 执行相当复杂的div / span只能复制粘贴 .

    “老板在乎吗”

    如果我是你的老板 . 你会在乎的 . ;）如果你重视自己的生活 .

    回复于
  • 54

    DIV中没有任何论据对我有利 .

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

    值得注意的是，如果不是不可能找到一个好的DIV CSS方法来渲染两到三列内容，这在所有浏览器中都是一致的，并且看起来仍然是我想要的方式 .

    在我的大多数布局中，这给 balancer 提供了一点 balancer ，尽管我感到内疚使用它们（dunny为什么，人们只是说它很糟糕所以我试着听它们），最后，实用主义观点是它只是使用TABLE更容易，更快捷 . 我没有按小时付款，所以 table 对我来说更便宜 .

    回复于
  • 5

    看起来你只是习惯于 table 而且就是这样 . 将布局放在表格中会限制您只使用该布局 . 使用CSS你可以移动位，看看http://csszengarden.com/不，布局通常不需要很多嵌套的div .

    没有表格用于布局和正确的语义HTML更清晰，因此更容易阅读 . 为什么不能理解CSS的人会尝试阅读它？如果有人认为自己是web开发者，那么对CSS的良好把握是必须的 .

    SEO的好处来自于能够将最重要的内容放在页面上方并具有更好的内容到标记比率 .

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

    回复于
  • 5

    See this duplicate question.

    例如，如果您需要使用屏幕阅读器，也可以翻译一个项目 . 如果您为政府工作，可能需要支持屏幕阅读器等可访问的浏览器 .

    我也认为你低估了你在问题中提到的一些事情的影响 . 例如，如果您既是设计师又是程序员，那么您可能无法完全理解它将表示与内容分开的程度 . 但是，一旦你进入一个他们是两个不同角色的商店，优势就会变得更加清晰 .

    如果您知道自己在做什么并拥有好的工具，那么CSS确实比布局表有明显的优势 . 虽然每个项目本身可能不合理放弃表格，但总的来说它一般是值得的 .

    回复于
  • 3

    无论如何，这不是明确的论点，但使用CSS，您可以采用相同的标记并根据介质更改布局，这是一个很好的优势 . 例如，对于打印页面，您可以安静地禁止导航，而无需创建适合打印的页面 .

    回复于
  • 7

    值得搞清楚CSS和div，以便中心内容列在页面布局中的侧边栏之前加载和渲染 . 但是，如果您正在努力使用浮动div来将徽标与某些赞助文本垂直对齐，只需使用该表并继续生活 . 禅宗园的宗教信仰并没有带来太多的好处 .

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

    依赖于编码标准“将内容与表示分开”的应用程序的更改日志将显示跨垂直孤岛的并行更改模式 . 如果对“内容”的更改总是伴随着“演示”的更改，那么分区有多成功？

    如果您真的想要高效地对代码进行分区，请使用Subversion并查看更改日志 . 然后使用最简单的编码技术 - div，表，JavaScript，包含，函数，对象，延续，等等 - 来构建应用程序，以便以简单和舒适的方式进行更改 .

    回复于
  • 3

    我很惊讶地看到一些问题还没有被涵盖，所以这里是我的2美分，除了之前提出的所有非常有效的观点：

    0.1 . CSS & SEO:

    a）CSS通常允许在页面中的任何位置放置内容，从而对SEO产生非常重要的影响 . 几年前，搜索引擎非常重视“页面上”因素 . 页面顶部的某些内容被认为与页面的相关性高于位于底部的内容 . 蜘蛛的“页面顶部”意味着“在代码的开头” . 使用CSS，您可以整理关键字丰富的内容代码开头的内容，并且仍然可以将其放在页面中您喜欢的任何位置 . 这仍然有些相关，但页面因素对于页面排名来说越来越不重要 .

    b）当布局移动到CSS时，HTML页面更轻，因此加载搜索引擎蜘蛛的速度更快 . （蜘蛛不打扰下载外部css文件） . 快速加载页面是包括Google在内的多个搜索引擎的重要排名考虑因素

    c）SEO工作通常需要测试和更改内容，这对于基于CSS的布局来说更方便

    0.2 . Generated content:

    与等效的CSS布局相比，表格更容易以编程方式生成 .

    foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

    生成表格既简单又安全 . 它是独立的，可以很好地集成到任何模板中 . 使用CSS做同样的事情要困难得多，而且根本没有任何好处：难以在航班上编辑CSS样式表，添加样式内联与使用表格没有区别（内容不与布局分开） .

    此外，当生成表时，内容（在变量中）已经与布局（在代码中）分离，使其易于修改 .

    这就是为什么一些设计精良的网站（例如SO）仍然使用表格布局的原因之一 .

    当然，如果需要通过JavaScript对结果采取行动，那么div值得一试 .

    0.3 . Quick conversion testing

    在找出适合特定受众的内容时，能够以各种方式更改布局以确定哪些内容能够获得最佳效果非常有用 . 基于CSS的布局使事情变得相当容易

    0.4 . Different solutions for different problems

    布局表通常是错误的，因为“每个人都知道div和CSS”是要走的路 .

    然而事实上，表格创建起来更快，更容易理解，并且比大多数CSS布局更强大 . （是的，CSS可以很强大，但在不同的浏览器和屏幕分辨率上通过网络快速浏览表明它并不常见）

    table 有许多缺点，包括维护，缺乏灵活性......但是不要让宝宝洗澡用水 . 解决方案有很多专业用途，既快速又可靠 .

    前段时间，我不得不使用表重写一个干净简单的CSS布局，因为很大一部分用户会使用较旧版本的IE而对CSS的支持非常糟糕

    就我而言，我厌倦了下意识的反应“哦，不！表格布局！”

    至于“它不是为了这个目的，因此你不应该这样使用它”的人群，是不是那种虚伪？您如何看待在大多数浏览器中使用的所有CSS技巧？他们是出于这个目的吗？

    回复于
  • 45

    我认为使用表格元素进行布局与表格数据几乎没有关系 . 所以呢？我老板在乎吗？我的用户在乎吗？

    谷歌和其他自动化系统 do 关心，在许多情况下它们同样重要 . 语义代码更易于非智能系统解析和处理 .

    回复于
  • 7

    CSS / DIV - 它只是设计男孩的工作，不是吗 . 我花了数百小时来调试DIV / CSS问题，在互联网上搜索标记的一部分与一个不起眼的浏览器一起工作 - 这让我很生气 . 你做了一点改变，整个布局出现了可怕的错误 - 在那里，eath就是其中的逻辑 . 花费几个小时以这种方式移动3个像素，然后用另外两个像素移动它们以使它们全部排成一行 . 这对我来说似乎完全没错 . 仅仅因为你是一个纯粹主义者并且某些东西“不是正确的事情”并不意味着你应该在所有情况下使用它，特别是如果它让你的生活更轻松1000倍 .

    所以我最终决定，纯粹基于商业原因，虽然我保持最低限度使用，如果我预计20小时工作以正确放置DIV，我会坚持在 table 上 . 这是错误的，它使纯粹主义者感到不安，但在大多数情况下，它花费的时间更少，管理成本也更低 . 然后我可以集中精力让应用程序像客户一样工作，而不是取悦纯粹主义者 . 他们确实支付了账单，并且我向执行CSS / DIV使用的经理提出了论证 - 我只想指出客户也支付他的工资！

    所有这些CSS / DIV参数发生的唯一原因是因为CSS的缺点，并且因为浏览器彼此不兼容，如果它们相同，世界上一半的网页设计师将失去工作 .

    当你设计一个Windows窗体时，你不要试图在放置它们之后移动控件，所以我觉得我很奇怪你为什么要用web表单来做这个 . 我根本无法理解这种逻辑 . 获得正确的布局以及问题所在 . 我认为这是因为设计师喜欢调情创意，而应用程序开发人员则更关心的是实际让应用程序正常运行业务对象，实现业务规则，确定客户数据的相互关系，确保客户满足客户要求 - 您知道 - 就像现实世界的东西一样 .

    不要误会我的意思，这两个论点都是有效的，但请不要批评开发人员选择更简单，更合理的方法来设计表单 . 我们经常要担心比在div上使用表格的正确语义更重要的事情 .

    举个例子 - 基于这个讨论，我将一些现有的tds和trs转换为div . 45分钟搞乱它试图让一切都排在一起，我放弃了 . TD在10秒后回来 - 直接在所有浏览器上工作，没有其他事可做 . 请尽量让我理解 - 你有什么理由可以让我以任何其他方式去做！

    回复于
  • 497

    根据508合规性（对于视觉上受到影响的屏幕阅读器），表格应仅用于保存数据而不用于布局，因为它会导致屏幕阅读器出现问题 . 或者我被告知了 .

    如果为每个div指定名称，也可以使用CSS将它们全部一起设置 . 按照你需要的方式来坐他们只是一种痛苦 .

    回复于
  • 4

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

    在表示性标记和CSS支持相同类型的设计的情况下，CSS显然更为可取，没有人会认为 font -tags比在CSS中指定排版更好，因为CSS给你的功能与 font -tags相同，但是以更清洁的方式 .

    但是，表的问题基本上是Microsoft Internet Explorer中不支持CSS中的表布局模型 . 因此，表和CSS的功效并不相同 . 缺少的部分是 grid-like behavior 表，其中单元格的边缘垂直和水平对齐，而单元格仍然展开以包含其内容 . 在没有硬编码某些维度的情况下，这种行为在纯CSS中并不容易实现，这使得设计变得僵硬和脆弱（只要我们必须支持Internet Explorer - 在其他浏览器中这很容易通过使用_80921实现） .

    因此，表格或CSS是否更可取的问题并不是真正的问题，但这是一个问题，即识别使用表格可以使布局更灵活的特定情况 .

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

    回复于
  • 3

    • 508合规性 - 屏幕阅读器能够理解您的标记 .

    • 等待渲染 - 表在到达 </table> 元素的末尾之前不会在浏览器中呈现 .

    回复于
  • 18

    Layout flexibility
    想象一下，你正在制作一个包含大量缩略图的页面 .
    DIVs ：
    如果您将每个缩略图放在DIV中，向左浮动，可能其中10个适合行 . 使窗口变窄，BAM - 它连续6个，或2个，或者多个适合 .
    TABLE:
    您必须明确说明连续多少个单元格 . 如果窗口太窄，则用户必须水平滚动 .

    Maintainability
    与上述情况相同 . 现在您要在第三行添加三个缩略图 .
    DIVs:
    添加它们 . 布局将自动调整 .
    TABLE: 将新单元格粘贴到第三行 . Oops! 现在有太多的物品了 . 从该行中切出一些并将它们放在第四行 . 现在那里的物品太多了 . 从那一行切掉一些...（等）
    （当然，如果您使用服务器端脚本生成行和单元格，这可能不是问题 . ）

    回复于

相关问题