Question

我无法在表格中获得正确的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>

如果我错过了一些相关信息，请提前致谢并大声说道。

对于Ref：现在在jsfiddle。要真正欣赏，最好在离线版本中看到它，您可以随意调整大小。

http://jsfiddle.net/Fd53f/

Answer 1

是的，有了一小撮CSS，DIV可以完成表所能做的所有事情。（我认为这回答了这个问题）。

最佳做法建议使用DIV而不是表格进行布局。（表格只应用于显示表格数据）。

为什么选择DIV？

页面加载速度更快
更好地控制元素
减少代码，可以帮助您节省少量字节
更灵活，将元素从一个部分移动到另一个部分或创建新元素（特别是以编程方式使用JS）更容易
就SEO而言

你怎么能对DIV友好？

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

Answer 2

在你的情况下，如果你需要你的单元格垂直延伸，你最好使用表格，特别是因为你的布局不是很简单。

要获得简单布局表的一些优点，请参阅此博客文章Replace HTML Table with Divs

回到你的例子，这是一个使用div和CSS的等效版本http://jsfiddle.net/6bKeY/

这个例子使用绝对定位，主要是因为它更快，不知道单元格的行为，很难说使用哪种方法。

此外，您应该避免使用style属性并使用CSS（请参阅Inline <style> tags vs. inline css properties），div元素是期望标记正文的元素，因此您必须使用HTML的结束标记来验证< / p>

<div />

变为

<div></div>

如何将此TABLE转换为适当的DIV？

2 个答案: