Html 如何将此表转换为正确的DIV？_Html_Css

Html 如何将此表转换为正确的DIV？

html css

Html 如何将此表转换为正确的DIV？,html,css,Html,Css,我很难为我在表格中的内容找到正确的DIV。显然，表格版本不能很好地“缩放”或调整大小一、开发人员是老派，所以我使用表格（我大脑中工作的部分，知道如何逻辑地格式化它们），但我的妻子，设计师，喜欢并使用DIV（但完全理解表格）我真的不怎么使用div，所以我不太喜欢它们。再加上一些用户真的滥用了DIV，并且在整个节目中都将其绝对化，以至于你无法从姑妈那里分辨出你的叔叔。我最近与另一位SO用户就DIV vs.HTML进行了非常热烈的讨论-他是对的（但我也是对的）。。。。DIV=WORD，TABLE

我很难为我在表格中的内容找到正确的DIV。显然，表格版本不能很好地“缩放”或调整大小

一、开发人员是老派，所以我使用表格（我大脑中工作的部分，知道如何逻辑地格式化它们），但我的妻子，设计师，喜欢并使用DIV（但完全理解表格）

我真的不怎么使用div，所以我不太喜欢它们。再加上一些用户真的滥用了DIV，并且在整个节目中都将其绝对化，以至于你无法从姑妈那里分辨出你的叔叔。我最近与另一位SO用户就DIV vs.HTML进行了非常热烈的讨论-他是对的（但我也是对的）。。。。DIV=WORD，TABLE=EXCEL

下面的示例显示了我使用表所做的工作。没有幻想，但很明显可以看到“积木”是什么样子。对我来说，最大的问题是我看不到任何清晰的分组，而表格允许我使用rowspan和colspan进行分组，但仍然存在欺骗。另一个大问题是行不会真正调整大小或缩放，并且与表保持相同的高度，而DIV显然不会这样做。显然，垂直线必须保持分组，并且没有绝对值

表代码如下：

<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>

提前谢谢，如果我错过了一些相关信息，请大声呼叫

For Ref：现在在jsfiddle中。要真正欣赏它，最好在脱机版本中查看它，您可以随意调整大小

是的，有了少量CSS，DIV可以完成表格所能做的一切。（我认为这回答了这个问题）

最佳实践建议使用DIV-than表进行布局。（表格只能用于显示表格数据）

为什么喜欢DIV

页面加载速度更快

更好地控制元素

代码更少，可以帮助您节省几个字节

更灵活，将元素从一个零件移动到另一个零件或创建新元素（特别是通过编程使用JS）更容易

在搜索引擎优化方面

你怎么能对DIV友好呢

如果您不习惯使用DIV，请查看前端框架，如或。

在您的情况下，如果您需要单元格垂直扩展，最好使用表，尤其是因为您的布局并不简单

要了解表格在简单布局方面的优势，请参阅本文

回到您的示例，这里是一个仅使用div和CSS的等效构建

这个例子使用绝对定位，主要是因为它速度更快，而且在不知道细胞行为的情况下，很难说使用哪种方法

另外，您应该避免使用style属性，而是使用CSS（请参阅），div元素是需要标记体的元素，因此您必须为HTML使用结束标记来验证

<div />

变成

<div></div>

如果您有表格数据，最好使用表格（毕竟，这就是它们的用途）。但是，如果您只想在网格布局中显示内容，那么就使用div。另外，使用

position:absolute也没有什么错就像你认为的那样。至少这不是“作弊”。这是规范的一部分。@TylerH-比我快。。。。OP：您需要编写语义代码。如果要显示表格数据格式，请使用表格。正如泰勒所说，如果您只是想显示一个网格，那么使用DIVs和CSS.DIVs来进行布局。应使用表来显示数据。这就是全部。其实没什么好争论的。正如某个用户曾经说过的。。“桌子不是邪恶的”。。nor DIV ARELLIST也是一个很好的布局方式。我认为这个问题太广泛了。是的，您可以使用表格，不可以使用表格格式化页面。更多信息。当不理解布局时，表格用于布局。你的妻子使用div更正确，让她教你如何使用div，她看起来很聪明（：虽然我发现你的答案信息丰富（我已经做了标记），但我仍然希望以示例的形式给出答案，也就是说，给我最好的版本（但以div的形式）.请注意：就本质而言，我不是不友好的DIV，我只是非常习惯于使用表（当我不使用SQL和.NET服务时）。我看到很多“手册”设置高度、宽度和顶部，使div看起来像我的桌子，我不是100%满意，但我感谢你花时间。我更期待我用百分比或其他东西嵌套。显然我需要更好地学习div。顺便说一句，我通常不使用内联样式-这是为了本例的目的我总是在样式中使用类，等等。现在，我希望这是我可能得到的最佳答案。我会尽快（显然是3小时）奖励奖金。这是div会遇到的问题，他们不会处理基于百分比的he