为什么使用 DIV 或 span 标签比使用表格布局“更好”？ [复制]答案

【问题标题】：Why is using DIVs or spans tags "better" than using a table layout? [duplicate]为什么使用 DIV 或 span 标签比使用表格布局“更好”？ [复制]
【发布时间】：2011-09-01 09:11:03
【问题描述】：

可能重复：
Why not use tables for layout in HTML?

为什么使用带有 div 的标记来定义所有内容（容器、标题、内容等）比使用表格更好？我知道，当您使用表格构建页面时：看起来丑得要命，嵌套时看起来更丑，因为废话量更大 - 页面加载时间略长，代码可读性更低。

但是。使用表格非常简单，并且在尝试完成看似简单的事情时节省了大量时间，但需要注意的是要使其在所有浏览器中都能正常工作。

我要问的是，一个有些复杂的布局（或任何通常仅使用 div 和 css 就不容易完成的布局）最好通过混合表格和 css 以及一些 div 包装来解决需要元素（处理嵌套），以便您可以快速开发应用程序，而不必担心它在不受支持的浏览器上看起来像垃圾？

* !编辑！ * 我也完全同意，是的，表格是用于表格数据的，就语义而言，我觉得我应该使用无操作标签，然后命名它们并设置它们的样式，但对于我来说，我发誓很多次快速构建一些东西，使用 BEATS 表格尝试完美地设计它以在所有浏览器上工作。

【问题讨论】：

为了记录，我实际上在我的设计中很少使用表，老实说，我只是找到了一些 hacky 方法来定位我想要的 css .. 但现在我想知道我为什么还要打扰当情况出现时我可以使用愚蠢的表格（除了我讨厌表格，因为嵌套表格的不可读性）
stackoverflow.com/questions/83073/…, stackoverflow.com/questions/61250/…, stackoverflow.com/questions/30251, stackoverflow.com/questions/1518223, stackoverflow.com/questions/2617895
作为一个不得不维护别人工作的人，每次碰到一个用于布局而不是数据的表格时，我都会有点抽搐。与合理组织的页面相比，对表格布局进行更新和修改总是需要更长的时间。
不要忘记其他元素，例如 UL/OL/LI。 DIVitis 是一种常见的综合征。
使用表格可以实现 div 无法实现的目标。表格更容易理解和使用。Div 是不可预测的并且功能很短。好建议;使用桌子，不要迷恋当前的时尚。

标签： html css xhtml html-table

【解决方案1】：

人们讨厌表格，因为它会降低 SEO（搜索引擎优化）。

主要是语义问题。表格旨在显示表格数据 - 需要以表格格式布置的数据。将它用于其他任何事情就像使用 Excel 来格式化您的小册子 - 它可能会在奇怪的时候起作用，但实际上，使用 Word。较新的 HTML5 元素以及一些较旧的 HTML4 元素在语义上更适合这种场合 - 内容的划分需要 div，部分需要部分，文章需要文章，导航需要导航。桌子旁边的其他元素也确实允许更大的灵活性，并且在正确使用时甚至比桌子更容易。归根结底，它归结为实用性。如果它本质上有点表格数据，请使用表格。但如果它是列或导航 - 使用 li 或浮动 div 或部分。

编辑：比较两种相同情况所需的 HTML，顺便说一句： http://jsfiddle.net/gbXFG/3/ 与 http://jsfiddle.net/uJ2LG/

【讨论】：

【解决方案2】：

在需要时使用表格。当数据需要整洁、干净并按特定顺序重复时。你不应该仅仅为了它而避开桌子。

【讨论】：

【解决方案3】：

一个很好的理由是关注点分离。 HTML 用于表达信息。 CSS 用于处理表示，而 JavaScript 用于处理行为。通过分离这些关注点，内容可以更好地解释为标记所说的 - 即表格表示表格数据，其中 div 和 span 表示内容块和文本范围。

如果你想要一些更充分的理由：

使用此类软件的残疾用户作为一个屏幕阅读器可以理解你内容更好。否则，你的整个页面可以解释为表格数据。你会让它更容易访问通过使用 div 和 span。
浏览器可能能够更快地呈现您的页面。
调整会容易得多。
更容易在整个网站上保持一致。

【讨论】：

完全同意数字 1-2，如果您只是命名单元格并处理样式表中的所有内容，则 3 是有争议的，您能解释一下 4 吗？
您可以在外部存储样式并将它们应用于跨页面的 div/spans 等。我意识到您可以对表格单元格执行此操作，但是 div/spans 等在位置/大小方面具有更大的灵活性，因为它们没有锁定在表格中。（希望这能解释我对 3 和 4 的推理。）

【解决方案4】：

有些优点是使用表格无法实现的。想想缩略图 - 您可以在一行中显示尽可能多的内容，如果没有更多空间，其他人将中断到下一行（动态）。

另见：

http://www.csszengarden.com/ -> 并在“选择设计”侧边栏中选择不同的设计

或者菜单/导航栏的更好方法： http://css.maxdesign.com.au/listamatic/

【讨论】：

【解决方案5】：

我能给出的最佳答案是，浏览器在完全处理页面之前不知道表格列的宽度，这可能会导致页面明显加载时出现明显延迟。通过使用 div，内容将立即显示，如果另一个元素强制它调整大小，它会立即显示，但显示的内容没有延迟。所以这是更好的用户体验。

【讨论】：

我认为这取决于某个 CSS 属性，但我忘记了它是什么。 “固定表”之类的。
@pst：在css中可能可以改变，但我描述的是默认行为。
我相信默认值取决于引擎。 “自动调整列大小”的大问题，在这方面，IE8（不确定其他）和 Firefox 3.6（不确定其他）和“默认”设置之间存在差异。

【解决方案6】：

使用 DIV 和 SPAN 来布局页面并使用 TAB 表示表格数据（如在数据表、用户列表等中）是正确的 HTML 语义......另外，DIV 允许在放置和样式方面更加灵活

【讨论】：

【解决方案7】：

我认为主要是关于语义。 <table> 用于表示表格数据，使用它来布置元素违反了这一点。此外，任何可以使用<table> 完成的事情都可以在 99.9% 的情况下使用 CSS 轻松或更轻松地完成。在其他情况下并没有那么容易，就像你说的那样，它使标记变得丑陋且难以遵循。它还违反了 Web 开发基本的内容、行为和表示的分离。

【讨论】：

+1 表示“主要是关于语义”。完整的 CSS 实现将允许将“表格”样式应用于其他块元素。可以在完全兼容的 CSS 引擎中完全使用 DIV（或 UL/LI）和 CSS“实现”表格布局。