Why not use tables for layout in HTML?在HTML中，表不应该用于布局似乎是一个普遍的观点。 为什么？ 我从来没有(或很少诚实地)看到过这方面的好论据。通常的答案是：
我对使用divs+css而不是表的好参数非常感兴趣。 我将逐一讨论你的论点，并试图指出其中的错误。好的。
这完全不是错误的，因为HTML是故意设计的。对一个元素的误用可能不是完全不可能的(毕竟，在其他语言中也开发出了新的习语)，但必须平衡可能的负面影响。此外，即使今天没有反对滥用
当然，问题是自行车不是汽车。car类对于bike实例来说是不合适的类。代码没有错误，但在语义上不正确。它对程序员的影响很差。 语义学102 现在将此应用于文档标记。如果您的文档需要显示表格数据，那么适当的标记应该是
这是与基于表的布局相同的代码。
我在基于表格的布局中看到的唯一清洁就是我对缩进过于热心。我确信内容部分会有另外两个嵌入的表。 另一个需要考虑的问题是：文件大小。我发现基于表的布局通常是CSS对应布局的两倍大。在我们的高速宽带上，这不是一个大问题，但在那些拨号调制解调器上。 我想补充一点，基于DIV的布局更易于维护、发展和重构。只需在CSS中进行一些更改，就可以对元素重新排序。根据我的经验，重新设计一个使用表的布局是一个噩梦(如果有嵌套表，则会更糟)。 从语义的角度来看，代码也有意义。 没有任何论据对我有利。 我会说：如果鞋子合适，就穿上它。 值得注意的是，如果不可能找到一个在两列或三列中呈现内容的好的DIV+CSS方法，那是很困难的，这在所有浏览器上都是一致的，而且看起来仍然像我想要的那样。 这在我的大多数布局中都有一点倾向于表格的平衡，尽管我对使用它们感到内疚(不知道为什么，人们只是说这很糟糕，所以我试着去听)，但最终，实用的观点是，我使用表格更容易、更快。我不按小时付钱，所以桌子对我来说比较便宜。 如果内容按自然顺序排列，并且没有样式表就有意义，那么CSS布局对于可访问性通常要好得多。而不仅仅是屏幕阅读器与基于表的布局作斗争：它们还使移动浏览器更难正确地呈现页面。 另外，对于基于DIV的布局，您可以很容易地使用打印样式表来完成一些很酷的事情，例如从打印页面中排除页眉、页脚和导航-我认为使用基于表的布局来完成这项工作是不可能的，或者至少更困难。 如果您怀疑使用div比使用tables更容易将内容与布局分离，请查看css zen garden中基于div的HTML，了解如何更改样式表可以显著更改布局，并考虑如果HTML是基于table的，您是否可以实现相同的布局类型…如果是基于表的布局，则不太可能使用CSS来控制单元格中的所有间距和填充(如果是，则首先几乎可以肯定会发现使用浮动分隔符等更容易)。如果不使用CSS来控制所有这些，并且由于表在HTML中指定了从左到右和从上到下的顺序，表往往意味着您的布局在HTML中变得非常固定。 实际上，我认为完全改变基于DIV和CSS的设计的布局而不改变DIV是非常困难的。但是，使用基于DIV和CSS的布局，更容易调整诸如不同块之间的间距及其相对大小之类的内容。 这是一个备受争议的问题，这一事实证明W3C未能预测到将要尝试的布局设计的多样性。使用divs+css进行语义友好的布局是一个很好的概念，但是实现的细节是如此的缺陷以至于它们实际上限制了创造性的自由。 我试图把我们公司的一个网站从一张桌子换成一张沙发床，这太让人头疼了，我完全放弃了投入其中的工作时间，回到了桌子上。为了控制垂直排列，我试图和我的跳水运动员扭打，这使我受到了严重的心理问题的诅咒，只要这场争论继续下去，我就永远不会动摇。 人们必须经常想出复杂而难看的解决方法来实现简单的设计目标(如垂直对齐)，这一事实强烈表明规则的灵活性不够。如果规格足够，那么为什么高调网站(像这样)认为有必要使用表格和其他解决方法来修改规则呢？
谷歌和其他自动化系统确实很在意，它们在许多情况下也同样重要。对于非智能系统来说，语义代码更容易解析和处理。 由于必须与一个包含由某些应用程序生成的6层嵌套表的网站一起工作，并且让它生成了无效的HTML，因此实际上需要3个小时的时间来纠正它，只需稍作改动。 这当然是边缘情况，但是基于表的设计是不可维护的。如果您使用CSS，您将样式分离出来，这样在修复HTML时就不必担心破坏。 另外，用javascript试试这个。将单个表格单元格从一个位置移动到另一个表格中的另一个位置。在DIV/SPAN只进行复制粘贴的情况下，执行起来相当复杂。 "我老板在乎吗？" 如果我是你的老板。你会在乎的。如果你珍惜你的生命。 我想那艘船已经开航了。如果你看看这个行业的发展方向，你会发现CSS和开放标准是这次讨论的赢家。这反过来意味着对于大多数HTML工作，除了表单，设计者将使用div而不是表。我很难做到这一点，因为我不是一个CSS专家，但事实就是这样。 布局灵活性想象一下你正在制作一个有大量缩略图的页面。DIVs：如果您将每个缩略图放在一个分区中，向左浮动，其中可能有10个适合一行。把窗户再窄一点，砰的一声——一排6个，或者2个，或者多少合适。表：您必须明确地说出一行中有多少个单元格。如果窗口太窄，用户必须水平滚动。 维修性与上述情况相同。现在，您要向第三行添加三个缩略图。DIVs：把它们加进去。布局将自动调整。表：将新单元格粘贴到第三行。哎呀！现在那里的物品太多了。从那排剪一些放在第四排。现在那里的物品太多了。从那排剪一些…(等)(当然，如果使用服务器端脚本生成行和单元格，这可能不是问题。)
元素的末尾，才会在浏览器中呈现表。 看起来你只是习惯了桌子，就这样。将布局放在表中只会限制您使用该布局。使用CSS，您可以四处移动位，请访问http://csszengarden.com。/不，布局通常不需要很多嵌套的div。 由于没有用于布局和正确语义的表，HTML更干净，因此更容易阅读。为什么不能理解CSS的人要尝试阅读它？如果有人认为自己是网页开发人员，那么很好地掌握CSS是必须的。 SEO的好处来自于能够让最重要的内容更高的页面和具有更好的内容与标记比率。 http://www.hotdesign.com/seybold/ 围绕语义标记的整体思想是标记和表示的分离，包括布局。 DIV不替换表，它们在将内容分隔成相关内容块(，)时有自己的用途。当您不具备这些技能并且依赖于表格时，通常需要将内容分隔到单元格中以获得所需的布局，但是在使用语义标记时，您不需要触摸标记来实现表示。当生成标记而不是静态页面时，这一点非常重要。 开发人员需要停止提供暗示布局的标记，这样我们中那些有能力展示内容的人就可以继续我们的工作，而开发人员不必在展示需要更改时回到他们的代码中进行更改。 另外，别忘了，在移动浏览器上，表的表现不太好。当然，iPhone有一个超级浏览器，但每个人都没有iPhone。对于现代浏览器来说，表渲染可能是微不足道的，但对于移动浏览器来说，这是一堆西瓜。 我个人发现，很多人使用过多的 这并不是说"对于布局来说，分隔符是否比表更好"。了解CSS的人可以非常直接地使用"布局表"复制任何设计。真正的胜利是使用HTML元素来实现它们的用途。不将表用于非表数据的原因与不将整数存储为字符串的原因相同——当您将技术用于设计它的目的时，它更容易工作。如果有必要使用表格进行布局(由于20世纪90年代早期浏览器的缺陷)，那么现在肯定不是了。 有必要计算出CSS和div，这样中心内容列就可以在页面布局的侧边栏之前加载和呈现。但是，如果你正努力使用浮动分隔线来垂直地将一个标志与一些赞助文本对齐，只需使用表格并继续生活。禅院的宗教只是没有给多少钱。 将内容与表示分离的思想是对应用程序进行分区，从而使不同类型的工作影响不同的代码块。这实际上是关于变更管理的。但是编码标准只能以一种肤浅的方式检查代码的当前状态。 应用程序的变更日志依赖于"将内容与表示分离"的编码标准，它将显示跨垂直竖井的并行变更模式。如果对"内容"的更改总是伴随着对"表示"的更改，那么分区的成功程度如何？ 如果您真的想有效地划分代码，请使用Subversion并查看更改日志。然后使用最简单的编码技术——div、tables、javascript、includes、函数、对象、continuations等等——来构造应用程序，使更改以一种简单而舒适的方式适应。 由于创建布局所需的代码量大，使用表布局的工具可能会变得异常沉重。默认情况下，SAP的NetWeaver门户使用表来布局页面。 我目前工作的生产SAP门户有一个主页，其HTML重量超过60K，有七个表深，三次在页面内。加上javascript，16个iframe被误用了，里面有类似的表问题，CSS太重了，页面的重量超过了5MB。 花时间降低页面重量，这样你就可以利用你的带宽与用户进行互动活动，这是值得的。 我很惊讶地看到一些问题还没有被涵盖，所以这里是我的2分，除了前面提到的所有非常有效的点： 1。CSS与SEO： a)CSS曾经对SEO有非常重要的影响，它允许将内容放在页面中任何你想要的位置。几年前，搜索引擎非常重视"页面上"因素。页面顶部的内容被认为比底部的内容更与页面相关。"页面顶部"对于蜘蛛"的意思是"在代码的开头"。使用CSS，您可以在代码的开头组织关键字丰富的内容，并将其放置在页面中您喜欢的任何位置。这仍然有点相关，但是页面上的因素对页面排名的重要性越来越小。 b)当布局移到CSS时，HTML页面更轻，因此搜索引擎蜘蛛的加载速度更快。(spider不需要下载外部CSS文件)。对于包括谷歌在内的多个搜索引擎来说，快速加载页面是一个重要的排名考虑因素。 c)SEO工作通常需要测试和更改内容，这对于基于CSS的布局更为方便。 2。生成内容： 与等效的CSS布局相比，以编程方式生成表要容易得多。
生成表既简单又安全。它是独立的，在任何模板中都能很好地集成。使用CSS做同样的事情要困难得多，可能根本没有好处：在飞行中很难编辑CSS样式表，并且添加内联样式与使用表没有任何不同(内容与布局没有分离)。 此外，当生成一个表时，内容(变量中)已经与布局(代码中)分隔开，因此很容易修改。 这就是一些设计良好的网站(例如)仍然使用表布局的原因之一。 当然，如果结果需要通过javascript进行操作，那么div就值得麻烦了。 3。快速转换测试 当确定什么对特定的受众有效时，能够以各种方式更改布局以确定获得最佳结果是很有用的。基于CSS的布局使事情变得相当容易 4。针对不同问题的不同解决方案 布局表通常是分散的，因为"每个人都知道divs&css"是解决问题的方法。 然而，事实仍然是表的创建速度更快，更容易理解，并且比大多数CSS布局更健壮。(是的，CSS也同样强大，但是快速浏览不同浏览器上的网络和屏幕分辨率就可以发现情况并非如此) 表有很多缺点，包括维护、缺乏灵活性…但我们不要把婴儿和洗澡水一起扔。快速可靠的解决方案有很多专业用途。 前一段时间，我不得不用表格重写一个干净简单的CSS布局，因为大部分用户都会使用旧版本的IE，对CSS的支持非常差。 就我而言，我厌倦了膝盖抽搐的反应"哦，不！布局表格！" 至于"这不是为了这个目的，所以你不应该这样使用"的人群，那不是伪善吗？你对所有的CSS技巧有什么看法？你必须使用这些技巧才能让darn在大多数浏览器中正常工作？他们是为了这个目的吗？ 一般来说，表并不比CSS更容易或更易于维护。但是，有一些特定的布局问题，其中表确实是最简单和最灵活的解决方案。 在表象标记和CSS支持同一种设计的情况下，CSS显然是更好的选择，没有人会在他们正确的头脑中争辩说， 但是，表的问题基本上是，在Microsoft Internet Explorer中不支持CSS中的表布局模型。因此，表和CSS在功率上是不等价的。缺少的部分是表格的类似网格的行为，其中单元格的边缘垂直和水平对齐，而单元格仍然展开以包含其内容。在没有硬编码某些维度的纯CSS中，这种行为是不容易实现的，这使得设计变得僵硬和脆弱(只要我们必须支持Internet Explorer-在其他浏览器中，使用 因此，这实际上不是一个表或CSS是否更可取的问题，而是一个认识到使用表可能使布局更灵活的特定情况的问题。 不使用表的最重要原因是可访问性。Web内容可访问性指南http://www.w3.org/tr/wcag10/advice againt using tables for layout。如果您关心可访问性(在某些情况下，您可能在法律上有义务这样做)，那么即使表更简单，也应该使用CSS。请注意，您总是可以使用CSS创建与表相同的布局，这可能只需要做更多的工作。 在基于表的布局中，DOM操作很困难。 使用语义分隔符：
附表：
当然，第二个例子有点愚蠢，您可以将ID或类应用于表或td元素，但这将增加语义值，这是表支持者强烈反对的。 因为维护一个使用表的站点是很糟糕的，而且需要更长的时间来编写代码。如果你害怕漂浮的潜水艇，就去上一门课程。它们不难理解，而且它们的效率大约是它们的100倍，比屁股上的疼痛要低100万倍(除非你不理解它们——但是，嘿，欢迎来到计算机世界)。 任何人考虑用一个更好的表来做他们的布局，都不希望我维护它。这是渲染网站最愚蠢的方法。感谢上帝，我们现在有更好的选择。我再也不会回去了。 令人害怕的是，有些人可能不知道使用现代工具创建一个网站所带来的时间和精力效益。 我不得不用这两种方式来做站点，加上第三种，可怕的"混合"布局，包括表格、div和样式：div/css轻松获胜。 您必须将三个深的div嵌套，以便只匹配一个表单元格的代码权重，这一点就在最前面。这种效果可以用嵌套表来扩展。 我还希望对我的站点中的每一页进行一次布局更改，而不是一次更改。 我用divs/css完全控制了演示的各个方面。表格以可怕的方式把这搞得一团糟，特别是在IE浏览器中，我还没有选择不支持它。 我对divs/css网站进行维护或重新设计的时间只是表格中的一小部分。 最后，我可以用CSS和几乎任何脚本语言来创新多个可切换的布局。这对我来说是不可能的。 在做出决定时，祝你的投资回报率好运。 严格区分演示文稿和内容的问题使我大致类似于将C++中的头文件与实现文件分开。这是有道理的，但也可能是一种痛苦。JAVA JAVA和C类，其中类定义在一个源文件中。新语言的作者注意到了一些引起程序员头痛的事情，于是他们就把它处理掉了。这似乎是这次讨论的要点。一方面是说CSS太难了，另一方面是说必须成为一个CSS大师。 对于简单的布局问题，为什么不弯曲表示演示必须完全分离的规则呢？一个新的标签(或者DIV标签的一些扩展)可以让我们直接在HTML中控制表示吗？毕竟，我们不是已经将演示文稿泄漏到HTML中了吗？看h1，h2…h6。我们都知道这些控制演示。 读取代码(HTML就是代码)的能力非常重要。古鲁斯倾向于忽略使编程环境尽可能地为大众所访问是多么重要。认为只有专业的程序员才重要是很短视的。
这不是在中心元素中"包含浮点"的唯一方法。所以，一点都不好的争论！ 在某种程度上，这是一个错误的前提，"divs tables"的事情。 快速而肮脏地将一页分成三列？说实话，桌子更容易。但是没有专业人员将它们用于布局，因为它们将页面元素的位置锁定到页面中。 真正的论点是"由CSS(希望在远程文件中)完成定位"，而不是"由HTML在页面中完成定位"。当然每个人都能看到前者的好处而不是后者？ 考虑一下：
它表示一个表中有6个单元格的两行。可以看到二维表格布局的人将看到每张图片下的标题。但是使用语音合成，或者PDA，对于搜索引擎蜘蛛来说，
关系，这是显而易见的表到位，消失。 Div和CSS是否更适合于在HTML页面上简单地布局矩形以在尽可能短的时间内实现给定的设计？不，可能不是。但我不想为了得到一个给定的设计而快速地布局矩形。我在想一个更大的图景。 内容和布局之间的分离也使得为站点生成打印机友好的布局或只是不同的外观(样式)更容易，而无需创建不同的HTML文件。一些浏览器(比如火狐)甚至支持从视图菜单中选择样式表。 我认为保持无表布局更容易。您不必担心行范围、列范围等，只需创建一些容器划分并将内容放在需要的地方。也就是说，我认为它更具可读性( ... |
...
| sidebar |
)。 这只是一个你必须学习的"小把戏"(一旦你掌握了这个把戏，我认为它会更容易，更有意义)。 对我来说，一个巨大的问题是，表，尤其是嵌套表，比一个布局正确的CSS实现要花更长的时间来呈现。(你可以让CSS同样慢)。 所有浏览器都能更快地呈现CSS，因为每个DIV都是一个单独的元素，所以用户在阅读时可以加载屏幕。(对于大型数据集等)。在那个实例中，我使用了CSS而不是表，甚至不处理布局。 在找到最后一个"/table"之前，嵌套表(单元格内的表等)不会呈现到浏览器窗口。更糟的是-定义不好的表有时甚至无法呈现！或者当它这样做的时候，事情就不正常了。(未与"td"等进行适当的交叉) 大多数情况下，我都使用表格，但当涉及到大数据和希望为最终用户快速呈现屏幕时，我会尽力利用CSS提供的功能。 我曾经了解到一个表同时加载，换句话说，当连接速度慢时，在加载整个表之前，表所在的空间保持空白；另一方面，DIV加载的速度与数据的速度一样快，而不管它是否完全就绪。 如果你支持这个表格的角度，找一个有表格的网站，然后给自己找一个屏幕阅读器——关掉屏幕阅读器，关掉你的显示器。 然后用一个语义正确的DIV布局站点来尝试它。 你会看到区别的。 如果表中的数据是表格式的，而不是页面的布局，那么表并不邪恶。 要响应"tables are slower"参数，您需要考虑渲染时间，这是错误的度量。通常，开发人员会编写一个巨大的表来完成页面的整个布局——这会大大增加要下载的页面的大小。不管你喜欢与否，仍然有大量的拨号用户。 另请参见：过度使用视图状态 DIV和CSS定位允许更灵活的设计，从而更容易修改和模板化网页。 这就是说，如果你对灵活性不感兴趣，那么使用一个表格而不是一些通过CSS变形成表格的div肯定是非常容易和快速的。我经常在设计时使用桌子，只是为了让它看起来更快一点。 当我使用CSS设计布局时，我通常给每个主要部分分配自己的根(body-level)分区，并使用相对/绝对定位将其放置到适当的位置。这比表要灵活一些，因为我不局限于使用行和列表示的排列。 此外，如果我决定重新排列布局(比如说我希望导航栏现在在)，我可以简单地在一个位置(CSS文件)更改元素的位置，HTML不必更改。如果我在处理表的时候这样做，我就必须进去查找信息，并进行大量的属性修改、复制和粘贴，以获得相同的效果。 事实上，使用CSS，我甚至可以让我的用户选择他们希望他们的布局如何工作。只要内容区域的一般大小不变，我完全可以使用一些PHP脚本根据用户偏好输出我的CSS，并允许他们根据自己的喜好重新排列网站。再一次，可以使用表格，但维护起来要困难得多。 最后，CSS允许表永远无法提供的一个主要好处：基于显示设备重新格式化内容的能力。CSS允许我对打印机使用与监视器完全不同的样式集(包括位置、格式等)。这也可以扩展到其他媒体，一个很好的例子是歌剧表演，它允许一个聪明的设计(和非常标准的)CSS增强的页面被视为幻灯片放映。 因此，最终，灵活性和管理才是真正的赢家。通常，CSS允许您对布局做更多的工作。从技术上讲，基于表的布局没有不标准的地方，但是为什么要限制自己呢？ 由于仍然使用表格进行布局，我们缺少了DIV方面的创新。 许多人都提出了解决方案，使为div创建布局更加容易。最流行的是网格体系结构。有基于此体系结构的动态布局生成器。退房：1)960.gs和(http://grids.heroku.com/)2)蓝图很多人都迟到了。 在架构和工具方面，我没有看到太多的创新和表格布局。 我想说的是，除了所有的理论，实际上用CSS和div进行布局更快。相反，在这个方向上的创新使它比任何事情都容易。 根据我对表的了解，如果嵌套的表太多，那么在呈现页面时浏览器会有很大的开销。 1-浏览器必须等待渲染最终视图，直到加载整个表。 2-呈现表的算法很昂贵，而且不是一次性的。浏览器在获取内容时，将尝试渲染计算内容的宽度和高度。因此，如果您有嵌套表，比如浏览器收到了第一行，而第一个单元格的内容、宽度和高度都没有定义，它将计算宽度并呈现第一行，平均来说，当它得到第二行时，单元格2将有大量内容！它现在将计算第二行单元格的宽度。第一个怎么样？它将递归地计算宽度。这在客户方是不好的。(举一个例子)作为一个程序员，你会优化一些东西，比如获取数据的时间，优化的数据结构等等。你会优化一些要在服务器端完成的东西，比如说2秒钟，但是最终用户会在8秒钟内获得最终的视图。这里怎么了？1。可能是网络慢了！如果网络正常怎么办？什么是网络在接下来的1秒钟内传递内容？额外的5秒消耗在哪里？需要担心的是——浏览器可能在估计和呈现表时花费了大量的时间！ 如何优化表？如果您使用的是表格，我建议您始终为单元格定义宽度。这并不能保证浏览器只会盲目地采用这种宽度，但对浏览器决定初始宽度有很大帮助。 但是，最后，DIV是很好的方式，因为CSS可以被浏览器缓存；而表则不被缓存！ flex有一个标签，用于在垂直列中排列内容。老实说，我认为他们的整个布局/内容都不正确，但至少他们已经解决了这个问题。 像许多对CSS感到沮丧的人一样，我也四处寻找一个简单的答案，当我以为自己找到了它时，我感到很高兴，然后当我用Chrome打开页面时，我的希望破灭了。我肯定不太擅长说这是不可能的，但我还没有看到有人为同行评审提供示例代码，明确证明它可以可靠地完成。 那么，这个岛的CSS方面的人能推荐一种思路/方法来布局垂直列吗？我试过在第二行和第三行中进行绝对定位，但最终我发现到处都是重叠的内容，如果页面缩小，float也会出现类似的问题。 如果有答案的话，我会欣喜若狂，做正确的事情，告诉我，"嘿，你试过**流：垂直水平"，我完全脱发了。 我仍然不太明白Divs/css如何使更改页面设计变得更容易，当您考虑测试的数量以确保更改在所有浏览器上都有效时，尤其是在所有黑客等情况下。这是一个非常令人沮丧和乏味的过程，浪费了大量的时间和金钱。值得庆幸的是，这508条法律只适用于美国(自由之地——是的权利)，因此，作为我在英国的基地，我可以以我选择的任何方式开发网站。与美国的普遍看法相反，华盛顿制定的立法并不适用于世界其他地区——感谢上帝。从立法生效之日起，这一定是网页设计界的好日子。我认为随着我在IT行业25年的成长，我越来越愤世嫉俗，但我相信这种立法只是为了保护就业。事实上，任何人都可以用几张桌子把一个合理的网页拼凑起来。使用divs/css执行此操作需要更多的努力和知识。根据我的经验，要想找到解决简单问题的方法，要花上好几个小时的时间，还要在充满理想主义狂热者的论坛上阅读难以理解的文章，这些人都在争论如何"正确"地做事。你不能只是把你的脚趾浸入水中，让事情在任何情况下都能正常工作。在我看来，对使用div/css"开箱即用"缺乏明确的指导，这适用于所有情况，在浏览器上工作，使用"正常"语言而不使用极客语言书写，也有一点保护主义的味道。我是一个应用程序开发人员，我认为解决布局问题和测试所有浏览器所需的时间几乎是创建基本应用程序、设计和实现业务对象以及创建数据库后端所需时间的两倍。我的时间=金钱，对我和我的客户都一样，所以如果我不拒绝所有支持削减成本和为我的客户提供物有所值的pro-div/css参数，我很抱歉。也许这只是开发人员考虑工作的方式，但在我看来，更改复杂的表结构比修改divs/css要容易得多。值得庆幸的是，现在似乎有了解决这些问题的方法——称为WPF。 谷歌对表格中的文本内容的优先级很低。我在给当地的慈善机构一些搜索引擎优化的建议。在检查他们的网站时，他们使用表格来布局网站。从我在谷歌搜索框中使用的每一个页面来看，无论是哪一个词，或是单词的组合，这些页面都不会出现在任何顶级搜索页面中。(但是，通过在搜索中指定站点，页面被返回。)一页是按正常标准编写的，以便在搜索中产生良好的结果，但在返回的搜索结果的前几页中，它仍然没有出现。(请注意，此文本位于表格中。)然后我在页面上发现了一段文本，它是在一个分区中，而不是在一个表中。我们在搜索引擎中放了那个分区的一些单词。结果？它出现在搜索结果的第二位。 几年前，我研究了屏幕阅读器和表格的问题，并提出了与大多数开发人员的看法相矛盾的信息： http://www.webaim.org/technologies/tables/ "您可能会听到一些可访问性倡导者说布局表是个坏主意，而应该使用CSS布局技术来代替。他们所说的是真实的，但老实说，使用表进行布局并不是在可访问性方面最糟糕的事情。各种残障人士都可以轻松访问表格，只要表格设计时考虑了可访问性。" 我为我的英语感到抱歉，但还有一个原因： 我在一些政府机构工作，不使用桌子的首要原因是残疾人。他们使用机器来"翻译"网页。 问题是，如果这个"翻译机器"是用表格做的，它就不能阅读网站。为什么？因为表是用于数据的。 事实上，如果您使用表，对于每个单元格，您必须指定一些信息，以让残疾人知道他们在表中的位置。想象一下，你有一张大桌子，必须放大才能看到屏幕上只有一个单元格：你必须知道你在哪一行/哪一列。 所以，使用了DIV，残疾人可以简单地阅读文本，当他们不必在那里的时候，也不会得到关于行/列的一些奇怪的信息。 我也喜欢用表格制作快速简单的模板，但我现在习惯了使用CSS…它很强大，但你必须知道你在做什么…：) 1：是的，你的用户很关心。如果他们使用屏幕阅读器，它将丢失。如果我使用任何其他工具试图从页面中提取信息，遇到不用于表示表格数据的表是误导性的。 分隔内容可以使用DIV或SPAN，因为这正是这些元素的含义。当我，一个搜索引擎，一个屏幕阅读器或者其他任何东西，遇到一个表元素时，我们期望这意味着"以下是表中表示的表数据"。当我们遇到一个DIV时，我们期望"这是一个元素，用于将我的内容划分为单独的部分或区域。 2：可读性：错误。如果所有的表示代码都是CSS，那么我可以阅读HTML，并且可以理解页面的内容。或者我可以阅读CSS并理解演示文稿。如果HTML中的所有内容都混在一起，那么在我看到什么是内容，什么不是内容之前，我必须从精神上删除所有与表示相关的部分。此外，我害怕遇到一个不懂CSS的Web开发人员，所以我真的不认为这是个问题。 3：桌子比较慢，是的。原因很简单：在呈现表之前，必须完全解析表，包括其内容。即使在对其内容进行分析之前，也可以在遇到DIV时呈现它。这意味着在页面完成加载之前，将显示div。 另外还有一个好处，那就是表格更脆弱，在不同的浏览器中，不同的字体和字体大小，以及所有其他可能导致布局变化的因素下，不会总是呈现出相同的效果。表格是一种很好的方法，可以确保您的网站在某些浏览器中关闭一两个像素，当用户更改其字体大小或以其他任何方式更改其设置时，其缩放效果不会很好。 当然1是最大的。很多工具和应用程序都依赖于网页的语义。通常的例子是视障用户的屏幕阅读器。如果你是一个网站开发人员，你会发现许多大公司可能会雇佣你在一个网站上工作，即使在这种情况下，也要求该网站是可访问的。这意味着您必须考虑HTML的语义含义。通过语义Web，或者更相关的微格式、RSS阅读器和其他工具，您的页面内容不再只通过浏览器查看。 在过去，屏幕阅读器和其他可访问性软件很难高效地处理表。在某种程度上，这在屏幕阅读器中由阅读器根据在表中看到的内容在"表"模式和"布局"模式之间切换来处理。这通常是错误的，因此用户在浏览表时必须手动切换模式。在任何情况下，通常高度嵌套的大型表在很大程度上仍然很难使用屏幕阅读器浏览。 当使用div或其他块级元素重新创建表并高度嵌套时也是如此。divs的用途是用作一个foomatching和lay out元素，因此用于保存类似的信息，并将其显示在屏幕上供视觉用户使用。当屏幕阅读器遇到一个页面时，它常常忽略任何布局信息，既基于CSS，也基于HTML属性(并非所有屏幕阅读器都是如此，但对于最流行的阅读器，如jaws、windows eyes和orca for linux，它是如此)。 为此，表格式数据，也就是说，在两个或多个维度中排序具有逻辑意义的数据(带有某种标题)，最好放在表中，并使用div来管理页面上内容的布局。(考虑什么是"表格数据"的另一种方法是尝试用图表形式绘制……如果不能，则很可能无法在表中最好地表示出来) 最后，使用基于表的布局，为了实现对页面上元素位置的细粒度控制，通常使用高度嵌套的表。这有两个影响：1.)增加了每一页的代码大小-由于导航和公共结构通常是用表完成的，所以对于每个请求，在网络上发送相同的代码，而基于DIV/CSS的布局将CSS文件拉过一次，然后使用较少的单词DIV。2.)高度嵌套的表需要更长的时间来呈现客户机的浏览器，从而导致加载时间稍慢。 在这两种情况下，"最后一英里"带宽的增加，以及更快的个人电脑都减轻了这些因素，但同样，它们仍然是许多网站存在的问题。 正如其他人所说，考虑到所有这些，表更容易处理，因为它们更面向网格，思想更少。如果所讨论的站点预计不会很长，或者不会被维护，那么做最简单的事情可能是有意义的，因为这可能是最具成本效益的。但是，如果预期的用户群可能包括大量的残疾人，或者如果网站将由其他人维护很长一段时间，那么将时间花在前面以一种简洁、易懂的方式做事情，最终可能会获得更多的回报。 我相信这是一个与一般问题有关的问题。当HTML诞生时，没有人能够预见它的广泛使用。另一项在自身成功的重压下几乎崩溃的技术。当HTML页面用vi语言写在绿色文本终端上时，只需要一个表就可以向页面的访问者呈现数据，而大多数情况下，表形式的数据都是有意义的。 我们都知道事物是如何进化的。相对而言，表最近已经过时了，但是有很多理由选择基于div和css的布局(可访问性不是最后一个)。当然，我不能写一个CSS来拯救我的生命，我认为一个图形设计专家应该随时待命。 说…即使在现代的网站上，也有许多数据应该以表格的形式呈现。 我认为没有人关心一个网站是如何设计/实现的，当它表现出色并且运行迅速时。 我在HTML标记中同时使用了"table"和"div"/"span"标记。 让我给你几个理由，为什么我选择女主角： 对于一个表，你必须写至少3个标签(table，tr，td，thead，tbody)，为了一个好的设计，有时你有很多嵌套的表。 我喜欢页面上有组件。我不知道如何准确地解释，但会尽力的。假设您需要一个徽标，而这个徽标必须放置在下一页内容的上方，只是其中的一小部分。使用表格，您必须剪切2个图像并将其放入2个不同的TDS中。使用div，你可以有一个简单的CSS来按你想要的方式排列它。你最喜欢哪种解决方案？ 当3个以上的嵌套表用于执行某些操作时，我正在考虑使用div重新设计它。 但我仍在使用表格： 表格数据 自我扩展的内容 快速解决方案(原型)，因为每个浏览器上的divs box模型不同，因为许多生成器正在使用表等 从过去的经验来看，我必须使用DIV。即使在OOP中，主要目的是减少对象之间的耦合，所以这个概念可以应用到DIV和表中。表用于保存数据，而不是将其安排在页面周围。DIV是专门为在页面周围安排项目而设计的，因此设计应该使用DIV，表应该用于存储数据。 另外，用表格编辑网站也很难(在我看来) 我尽量避免使用表格，但是当我们设计复杂的表格，将多种控制类型和不同的标题位置与严格的分组控制相结合时，使用div是不可靠的，或者几乎不可能。 现在，我不认为这些表单不能被重新设计以更好地适应基于DIV的布局，但是对于其中一些表单，我们的客户坚持不更改以前版本(用经典ASP编写)的现有布局，因为它与用户熟悉的纸质表单并行。 因为表单的表示是动态的(其中某些部分的显示基于案例的状态或用户的权限)，所以我们使用一组堆叠的div，每个div都包含一个逻辑分组的表单元素表。表中的每一列都被分类，这样它们就可以由CSS控制。这样，我们就可以关闭表单的不同部分，而不必成为以div换行的表。 表对于您为了简单或临时的事情而聚集在一起的HTML是很好的。如果你正在建立一个大型网站，你应该使用div和css，因为随着时间的推移，随着网站的变化，维护起来会更容易。 当需要确保元素需要保持在布局中的特定物理关系中时，可以使用表。对于数据，表通常是要使用的最佳布局元素，因为您不希望列以uxexpected的方式换行并混淆关联。 也有人认为，必须保持在特定关系中的非数据元素也应呈现在表中。 灵活的CSS布局非常适合于适合移动设备、大屏幕、打印和其他显示类型的内容，但有时内容只需以非常特定的方式显示，如果这要求屏幕阅读器无法轻松访问内容，则很可能是合理的。 超短的答案：设计可维护的网站很难用表格，用标准的方法很简单。 网站不是一张表，而是一组相互作用的组件。把它描述成一张桌子是没有意义的。 用作纯布局的表确实对可访问性造成了一些问题(我听说过)。但我理解这里的问题是，不知何故，使用表格来确保页面上的内容正确对齐，从而破坏了Web。 我以前听人说过，表单标签和输入实际上是数据，应该允许它们进入表中。 使用一个表来确保几个元素正确排列会导致代码的大量增加，这一论点往往包括单个DIV如何满足其所有需求的示例。它们并不总是包含10行CSS和为IE5、IE5.5、IE6、IE7编写的特殊浏览器黑客… 我想在你的设计中使用平衡。桌子在工具箱里，记住它们是用来做什么的… 使用DIV，您可以轻松地切换内容。例如，您可以这样做：
在CSS中很容易更改它，而不是在HTML中。您还可以提供多种样式(右手、左手、小屏幕专用)。 在CSS中，您还可以将菜单隐藏在用于打印的特殊样式表中。 另一个好处是，您的内容在代码中的顺序总是相同的(菜单第一，内容之后)，即使在视觉上它是以其他方式呈现的。 毫无疑问，这次行动有点接近尾声，争论似乎那么激烈，很容易反驳。 网页是Web开发人员的领域，如果他们说DIV&CSS比表更好，那对我来说就足够了。 如果一个布局是由服务器应用程序生成的表实现的，那么一个新的布局就意味着对应用程序的更改，应用程序的重新构建和重新定义，就像对CSS文件的更改一样。 此外，可访问性。用于布局的表使网站不可访问，因此不要使用它们。更不用说违法了，这是一个很简单的问题。 在维护内容的同时进行网站维护和设计大修(这经常发生，尤其是在电子商务中)： 内容和设计通过表格混合在一起=更新内容和设计。 内容与设计分离=更新设计，可能还有一些内容。 如果按我的方式进行，我会将内容保存在生成XML的PHP中，转换为XSLT中的标记，并使用CSS和JavaScript设计交互。对于Java方面的东西，JSP到JSTL来生成标记。 所见即所得！！！！我不能让我们的设计师在CMS项目中的客户机应该使用的模板中停止使用嵌套的div和elementid css样式。这就是WYSIWYG在线编辑的全部观点。您同时控制内容和布局！在这个场景中，首先根本没有分离。在一些外部样式表中定位和样式化的分区对WYSIWYG编辑的整体理念来说是一种诅咒。可以看到表，插入行，合并单元格等等。祝你在使用Div时好运，不要让用户失望。 数据：使用表格。布局：使用样式。使用非常精简的浏览器(即链接2或不带样式的lynx，只需简单的标记)，表可以呈现得最快。 这不一定是一场战争。和谐是可能的。 使用一张表格作为整体布局并在其中划分。
look-没有嵌套表。 我读过很多关于如何通过DIV实现这一目标的文章，但从未发现任何东西每次都能毫无问题地工作。 一旦你有了整体结构，div就很好了，但是坦白地说，fluid header/footer和三个fluid columns是div的一大难题。沙发床不是为流动性设计的，所以为什么要使用它们？ 请注意，此方法将在链接文本处为您提供100%的CSS遵从性 我发现，即使有最好的计划，也有几个方面的不足。例如。即使其他内容不在浏览器的底部，Div也无法拥有始终位于浏览器底部的底部栏。此外，您不能优雅地做任何比三列更好的事情，并且您不能让列根据其内容的宽度进行增长和收缩。最后，我们试着先用跳水。但是，我们不会根据一些宗教内容和布局理想来限制HTML设计。 |
