Question

有人可以给我看一些html来布局以下不使用表吗？

______________________________________
|_______|_____________|               |
|_______|_____________|_______________|
|_______|_____________|               |
|_______|_____________|               |
|_______|_____________|_______________|

第三列需要跨越前两个“行”，然后跨越接下来的三个“行” 第一个“列”需要具有相同的宽度

我问这个因为整个“表格已经死了布局”论点

更新：标记的内容有复选框，文本框和textareas

结论：

这非常具有启发性。我相信我已经被这个哲学问题所清理了。

在我看来，一般规则应该是：不要为整个网站使用表格，如果有看起来像表格的部分，那么使用表格。 “从不使用桌子”的极端似乎是不切实际和理论上的。同样，过度使用表会使维护变得困难，处理4深嵌套表可能会非常痛苦。

因为上面的布局“看起来像一张桌子”，我将使用一张桌子。：）

Answer 1

我完全同意不使用表格来布局页面。但是，上图实际上看起来像一个表，因此您可能想要使用一个。

Answer 2

我认为为了你的目的，你应该使用一张桌子，但是因为你不想要...这里我只用<div> s快速制作了：http://jsfiddle.net/HEfTE/1/

您没有提到将使用复选框，文本框和textareas的方式和位置，所以我不确定如何将它们合并到我的示例中。但是如果您发布更多信息，那么将它们添加到那里并不困难。

希望有所帮助！

Answer 3

即使内容不是表格，也可以根据需要使用表格。反对使用表格进行布局的大多数论据纯粹是理论上的（例如，你真的打算为你的网站提供多个样式表吗？你关心你的表单在语义上是如何出现的吗？）有时，特别是在更大的布局问题上一个站点，表比CSS好得多。

使用有效的方法。

表格经常被滥用于布局，其中大多数都可以废弃，转而采用更简单的CSS布局。但偶尔，桌子是更好的工具。

Answer 4

这些组件似乎形成了一个表......所以，我会使用一个表。

以下不是表格，所以不要使用表格来表明这一点。（显然使用<div>）

--------------------------------
|                              |
|                              |
|------------------------------|
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
--------------------------------

你看到你和我的例子有什么不同吗？

Answer 5

没有足够的信息来回答您的问题。就像佩卡说的那样，是不是一张桌子？

是表格吗？我假设是这样，如果它有文本框，textareas等。如果它是一个表单，你可以使用一个容器用于两个左列，一个用于右边。

<style type="text/css">

div#formLeft {
    float: left;
}

textarea {
   display: block;
}

</style>

<div id="formLeft">
    <label>Form Field 1</label><input type="text" /><br />
    <label>Form Field 2</label><input type="text" /><br />
    <label>Form Field 3</label><input type="text" /><br />
    <label>Form Field 4</label><input type="text" /><br />
    <label>Form Field 5</label><input type="text" /><br />
</div>

<div id="formRight">
    <textarea></textarea>
    <textarea></textarea>
</div>

现在，显然还有很多工作要做，但这只是一块骨头。

建议？样式label具有固定宽度，以使其看起来像表格。当然要调整高度和一切以使其适合。由于右侧的方框（我假设是textareas），只需给它们ID和高度。

我拍了一个屏幕截图，帮助我直观地显示我的代码。这就是我假设你的布局，但当然你可以轻松添加其他列。只需将formLeft ID变成一个类，然后再投入另一个类！

alt text http://img94.imageshack.us/img94/5341/testbp.gif

编辑：图片上传的图片。我不能保证会有多长时间。

祝你好运！

Answer 6

你可以使用DIV来仔细使用float：right，float：left和clear：both。

我同意你的观点，你描述的不是表格，使用DIV可能有优势，例如，当他们在移动设备上查看时，他们可能会更好地流动（特别是如果你给他们一个不同的样式表）

但是，我应该说使用DIV这样的东西是一个很大的痛苦，我通常使用表格，因为它很容易，并且他们在确定列的大小方面做得更好，这样适合内容

Answer 7

我会这样做（在没有任何细节的情况下，我投入了一些样本元素）：

<html>
    <head>
        <style type="text/css">
            * { margin: 0; padding: 0; }
            #form {
                width: 400px;
                margin: 10px;
            }
            #textareas {
                width: 145px;
                float: right;
            }
            #textareas textarea {
                width: 145px;
                margin-bottom: 3px;
            }
            #textareas #textarea1 {
                height: 43px;
            }
            #textareas #textarea2 {
                height: 66px;
            }
            .forminput {
                height: 23px;
                width: 250px;
            }
            .forminput span {
                display: block;
                float: left;
                width: 75px;
            }
            .forminput input {
                width: 175px;
            }
        </style>
    </head>

    <body>
        <div id="form">
            <div id="textareas">
                <textarea id="textarea1"></textarea>
                <textarea id="textarea2"></textarea>
            </div>
            <div class="forminput">
                <span>Label 1</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 2</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 3</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 4</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 5</span>
                <input type="text" />
            </div>
        </div>
    </body>
</html>

你总是可以在没有桌子的情况下这样做。

Answer 8

表单可以被视为表格数据。不是每个人都同意这一点，但足够的是我称之为50/50的决定。在这种情况下翻转硬币。

我更关心的是，一个包含多列，多行和跨越多行的字段的表单听起来像是一个布局不合理的表单设计给我。在这种情况下，它可能非常有意义，但如果没有更多的背景，很难说出这里最好的东西。

如果每行/每列中的表单元素之间存在直接关系，那么知道这可以帮助我们回答您的问题。

Answer 9

什么是内容？表格数据？如果是这样，请使用表格。

无表格的HTML替代品

9 个答案: