基于表格的布局与基于Div的布局

时间:2011-02-14 10:00:20

标签: html css

  

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

我只是想知道基于表格的布局和基于div的布局之间的区别。我何时应该使用什么以及为什么?

提前致谢。

5 个答案:

答案 0 :(得分:5)

表格只能用于表格数据。它真的很简单。

至于为什么;网站布局不是表格数据。

此外,表格将在您的页面中使用更多代码。例如;创建一个“盒子”你可以这样做:

<table>
  <tr>
    <td>Box Content</td>
  </tr>
</table>

或者

<div>
  Box Content
</div>

答案 1 :(得分:4)

很简单,基于表格的布局是组织内容位置的旧方法,而div是更新的方式。将它们视为不可见的矩形(除非您选择使它们可见),它们包含内容,并且两者在如何定位它们方面都有其优缺点。

您可以将div放置在几乎所有可以放置表格的情况中,而对于您无法使用表格执行的div可以进行很多定位。这是不鼓励使用表格来布局页面的一个原因。

表尚未完全消失。他们仍然非常擅长(有趣的)基于表格的信息或统计信息显示。想想excel-type布局。

答案 2 :(得分:1)

使用div你可以玩绝对位置。因此,您可以在网页中的任何位置放置数千个div。您还可以将div放在其他div的z-index之上,这对于表来说更难。

该表看起来不太灵活,但让您看起来更结构化,并且浏览器之间也更兼容。

我的建议。用表格制作你的主要结构,把你的div放在里面。

答案 3 :(得分:1)

当您创建用于电子邮件的HTML时,遗憾的是,表仍然是强制性的:许多邮件客户端使用仍然认为是1998的HTML呈现引擎.Microsoft Outlook就是一个值得注意的例子。

答案 4 :(得分:1)

表从未被视为一般结构标签。理论上,您告诉浏览器您正在提供表格数据,这可以通过浏览器选择的任何方式进行解释。 div(或span)标签不带语义含义,仅表示文档的一部分。

表理论上也比div与css结合更有限。使用CSS,您可以使您的元素几乎完成任何事情。这也提供了仅通过切换css来动态重构页面的可能性。您可以允许用户定义自己的样式和布局,而不会影响html。

您可能仍需要在电子邮件中使用表格,我不知道。就个人而言,我很高兴在我的电子邮件中收到HTML,但现在似乎无法避免。