【发布时间】：2014-05-25 15:28:50
【问题描述】：
我无法为表格中的内容获取正确的 DIV 集。显然，表格版本不能很好地“缩放”或调整大小。
我，开发人员，是老派，所以我使用表格（我大脑中工作的部分，知道如何在逻辑上格式化它们），但我的妻子，设计师，喜欢并使用 DIV（但完全理解表格） .
我并没有真正使用 DIV，所以我不太喜欢它们。再加上一些用户真的滥用 DIV 并在整个节目中对它们进行绝对化，以至于你无法从你的阿姨那里找出你的叔叔。我最近与另一位 SO 用户就 DIV 与 HTML 进行了非常激烈的讨论 - 他是对的（但我也是对的）.... DIV = WORD, TABLE = EXCEL ...
下面的示例显示了我使用表格所做的工作。没有幻想，但很明显可以看到“块”必须是什么样子。对我来说，最大的问题是我看不到任何清晰的分组，而表格允许我使用 rowspan 和 colspan 进行分组，但仍然作弊。另一个大问题是行不会真正调整大小或缩放，并且会与表格保持相同的高度 - 而显然 DIV 不会这样做。显然，垂直线必须保持分组 - 并且 NO-NO 绝对。
表格代码如下：
<html>
<head/>
<body>
<table style="width:100%">
<tbody>
<tr>
<td colspan="3" style="width:66.7%">
<div id="TopSlidePane" runat="server" style="border:5px solid black;"/>
</td>
<td rowspan="3" style="width:33.3%;background-color:blue;height:100%;">
<div id="EventDiv" runat="server" style="border:5px solid black;height:100%;"/>
</td>
</tr>
<tr>
<td rowspan="2" style="background-color:purple;height:100%;">
<div id="PolDiv" runat="server" style="border:5px solid black;height:100%;"/>
</td>
<td rowspan="2" style="background-color:turquoise;height:100%;">
<div id="ResourceDiv" runat="server" style="border:5px solid black;height:100%;"/>
</td>
<td style="background-color:purple;">
<div id="TelDiv" runat="server" style="border:5px solid black;"/>
</td>
</tr>
<tr>
<td style="background-color:lime;">
<div id="CalDiv" runat="server" style="border:5px solid black;"/>
</td>
</tr>
<tr>
<td style="background-color:orange;">
<div id="ResDiv" runat="server" style="border:5px solid black;"/>
</td>
<td style="background-color:purple;">
<div id="EduDiv" runat="server" style="border:5px solid black;"/>
</td>
<td colspan="2" style="background-color:lightgreen;">
<div id="VacDiv" runat="server" style="border:5px solid black;"/>
</td>
</tr>
<tr>
<td colspan="4">
<table style="width:100%">
<tbody>
<tr>
<td style="width:40%;background-color:red;">
<div id="AmbDiv" runat="server" style="border:5px solid black;"/>
</td>
<td style="width:60%;background-color:aquamarine;">
<div id="GalDiv" runat="server" style="border:5px solid black;"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
如果我错过了一些相关信息，请提前致谢。
参考：现在在 jsfiddle 中。要真正欣赏，最好在可以随意调整大小的离线版本中看到它。
【问题讨论】：
-
如果你有表格数据，最好使用表格（毕竟这就是它们的用途）。但是，如果您只想在网格布局中显示内容，那么请使用 div。此外，使用
position: absolute;并没有什么问题，就像您认为的那样。至少，这不是“作弊”。这是规范的一部分。 -
@TylerH - 打败我...... OP：你需要编写语义代码。如果您尝试显示表格数据格式，请使用表格。正如 Tyler 所说，如果您只是想显示一个网格，那么请使用 DIV 和 CSS。
-
DIV 用于布局。 TABLES 应该用于显示数据。就这样。没什么好争论的。正如一些 SO 用户曾经说过的那样..“表格不是邪恶的”.. DIV 也不是
-
列表也是一种很好的布局方式。
-
我认为这个问题太宽泛了。是的，您可以使用表格，不，不是用它们来格式化页面。 See this 了解更多信息。当布局不被理解时，表格用于布局。你老婆用div比较正确，让她教你怎么用，她看起来很聪明（：