Question

我刚刚阅读了一个支持多个现代浏览器的网络产品代码（包括FireFox 3.X，Safari 3.X和IE7 +，但不包括IE6-）。 HTML代码使用 div 而不是 table 来创建类似于表格的效果。实际上， div 的组织方式如下：

   <div>
         <div>
              <div style="float:left" id="header1">...</div>
              <div style="float:left">...</div>
              <div style="float:left">...</div>
         </div>
         <div>
              <div style="float:left" id="header2">...</div>
              <div style="float:left">...</div>
              <div style="float:left">...</div>
         </div>

有一段onload JavaScript代码可以读取所有“headerX”元素，计算它们的最大 offsetWidth 。然后为每个人分配最大 offsetWidth 。通过这种方式，div可以很好地对齐，就像表格一样。

实际上，我认为这不是一个好方法，但我被告知该产品的设计方式是 跨浏览器支持 ，因为表在不同的浏览器中表现不同。

我不相信。所以，问题。除了上面提到的方法，有没有更好的方法为所有流行的浏览器制作表格式布局？

Answer 1

看起来几乎每个人都误解了你的问题（或许我做错了）。

听起来网络产品正在尝试使用div显示表格数据，它们的原因在于它是使其跨浏览器兼容的最佳方式。这不仅是错误的，通过将javascript引入等式，它们会立即降低用户的兼容性。如果用户禁用了javascript，则div会很乱。最好在这种情况下使用<table>，因为它实际上在浏览器中运行得相当好，这就是为什么以前设计布局非常有吸引力的原因。

大多数人在他们的答案中提到的是使用表格制作网站布局的旧罪，我认为你的问题并不真正涵盖。无论如何，这是不合适的，因为<table>标签在语义上与保持布局内容无关。始终最好保留HTML文档的语义含义。这个网络产品正在做的是同样的罪，但反过来说：他们使用<div>标签来显示表格数据，当<table>存在时。

Answer 2

我被告知该产品的设计方式是支持跨浏览器，因为不同浏览器中的表格表现不同。

Pfft。与其他任何功能相比，各种浏览器的表格差别不小。

使用JavaScript来模拟表格布局而不仅仅是使用表格是非常不正常的。它会比让浏览器更快，更笨拙，它会在没有启用JS的情况下崩溃，并且它可能无法很好地响应缩放（在某些情况下会破坏offsetWidth）或百分比宽度舍入错误。

在某些情况下，使用JavaScript来增加布局是合适的，对于表格和CSS布局都不能自己做的技巧，但这实际上不是其中之一。

有没有更好的方法为所有流行的浏览器制作类似于表格的布局？

是的，请使用表格。 “这个标记真的代表一张桌子”的语义问题在很大程度上是一个学术问题。（并且随着你的标记谈论标题，听起来你甚至可能正在使用真正的语义表！）

只要从上到下的阅读顺序有意义，对于布局使用简单表格几乎没有实际的伤害。 “表格本质上是邪恶的”这个概念是对大多数网站使用可怕的嵌套，跨区和固定表格编写的时间的反应，导致无法读取和无法访问的标记。

当然，如果您可以将每个页面元素放在div中并使用CSS将每个元素相对于彼此定位，页面大小等等，那将是理想的。但实际情况是CSS并不是那么强大，而是一些使用一点保守的表格可以更简单地实现这些目标。

Answer 3

我知道这不能解答您的问题，但请尽量避免使用表格布局，并了解如何编写跨浏览器兼容的CSS来定位页面内容。

在csszengarden

查看CSS布局的可能性

Answer 4

你在做什么叫做div-soup。阅读semantic HTML和CSS属性display。

另外，如果数据是表格式的，那么使用表格并没有错。要在不同浏览器中获得相同的布局，您可能必须设置CSS属性border-collapse: collapse或HTML属性cellspacing="0"

Answer 5

HTML代码使用 div 代替 table 来创建类似于表格的效果。

这是一种常见的误解 - 许多人用来做布局的旧方法是使用表格，所以他们实际上使用表格而不是 div 来表示div喜欢的效果。：）

Answer 6

我认为这是不可能的。

但请注意，如果已知行的高度，则可以定义您的桌子通过第一栏 - 第一排，第二排，...... 第二栏 - ....

Answer 7

您必须使用JavaScript进行格式化/设计的情况并不多。我现在只能回想起的例外是当用户调整窗口大小时重新格式化页面。

使用纯HTML + CSS可以100％完成这种事情。它可能需要用于IE6和移动平台的条件样式表，但到目前为止我制作的每个网络都有相同的IE7和FF3样式表，并且可以使用DIV而不是表格。你只需要思考，谷歌和即兴创作（按此顺序;）。

但是，我不认为如果没有每个表，行和单元格的DIV就可以实现这种特殊情况，这意味着你将与<table>, <tr> and <td>完全相同。在表格中显示表格数据在语义上是正确的，所以如果你真的需要它作为一个表格而不是网页布局，那么就省去麻烦并使用HTML表格标记。

Answer 8

即使我对使用表格进行长时间布局也有类似的想法。但后来我认为很多热门网站都使用基于div的布局。所以我认为现在就是这样做的方法。你不必从头开始构建一个。网上有很多可用的css框架，可以轻松使用。请在下面找到列表。

http://developer.yahoo.com/yui/
http://code.google.com/p/blueprintcss/

这里有一个css框架列表
http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

Answer 9

这是一个很好的例子，有人错过了避免使用表格进行布局的重点。使用表格进行布局的主要问题是，以后在网站范围内更改任何内容都会非常困难和繁琐。

通过将CSS规则放在HTML中，他们将表的不灵活性与狡猾和重复的CSS结合起来。最重要的是，他们滥用javascript来重新创建表中已存在的功能。

这个问题没有简单或“正确”的答案。在不了解您的具体情况的情况下，我所能做的就是列出一些基本知识：

更少的代码几乎总是更好。
如果您发现自己尝试使用css（或特别是javascript）复制表行为，则可能只想使用表。
更少的代码几乎总是更好。
如果您发现自己将表格嵌套在其他表格中，则可能有更好的方法来实现目标。
更少的代码几乎总是更好。
如果能让你简化代码，不要害怕改变你的设计。

事实是，没有魔法子弹。那里有大量的资源，但与任何有价值的追求一样，需要时间和奉献精神。使用隐藏复杂性的工具可能在短期内有所帮助，请注意您不再能够控制在幕后代表您进行权衡。

开始的几个地方：

Answer 10

我发现div / table辩论最好留给其他人浪费时间。在设计跨浏览器布局时，我发现最有效的理念是将table和div视为唯一元素，每个元素都放在网页上。如果你发现自己能够有效地使用div，那就太好了（如果你能让它们在所有浏览器中运行良好，那就更有力了。）然而，对于更复杂的布局，我发现表格也很有用，当您注意指定cellpadding，cellspacing，border等。我最近完成了一个项目，我们的最终设计策略使用了一系列div元素，每个元素都封装了一个表格设置，以便获得我们想要的设计。如果您想知道我的意思，那么页面是http://www.kafuka.org。

Answer 11

没有这样的事情。

每一个broswer都有自己的怪癖。你需要反复与他们战斗并学会解决它们。

说CSS布局比桌面布局更加跨浏览器或更可靠只是盲。不，不是。相信CSS标记比表格标记更具语义性和冷静性，这是宗教问题，与两种方法的实际技术方面无关。

跨浏览器HTML布局的正确方法是什么？

11 个答案: