代码之家 › 专栏 › 技术社区 › Jose

无表html替代方案

css html

Jose · 技术社区 · 15 年前

有人能给我看一些html来布局下面的不使用表格吗?

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

第一个“列”必须具有相同的宽度

我问这个问题是因为整个“表对于布局来说是死的”论点

更新:

结论:

这很有启发性。我相信我已经澄清了这个哲学问题。

因为上面的布局“看起来像一张桌子”,所以我要用一张桌子

9 回复 | 直到 15 年前

Ned Batchelder 15 年前

即使内容不是表格形式,如果需要,也可以使用表格。大多数反对使用表进行布局的论点都是纯理论的(例如,你真的打算为你的站点提供多个样式表吗?有时,尤其是在站点的较大布局问题中,表比CSS工作得更好。

用有效的方法。

表格经常被滥用来进行布局,大多数表格都可以被废弃,取而代之的是更简单的CSS布局。但有时,表格是更好的工具。

Chris Simpson 15 年前

我完全同意不用表格来布置你的页面。然而,上面的图表实际上看起来像一个表,所以您可能需要使用一个。

Hristo 15 年前

<div> 学生: http://jsfiddle.net/HEfTE/1/

您没有提到复选框、文本框和文本区域的使用方式和位置,因此我不确定如何将它们合并到我的示例中。但是如果你发布更多的信息,在那里添加它们并不困难。

jjnguy Julien Chastang 15 年前

以下不是表格,所以不要用表格来布置(使用 <div>

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

你看到你的例子和我的不同了吗?

Tarik 15 年前

没有足够的信息来回答你的问题。就像佩卡说的,这是不是一张桌子?

是表格吗?我假设是这样的,如果它有文本框,文本区域,等等,如果它是一个窗体,你可以用一个容器来处理左边的两列,右边的一列。

<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 有固定的宽度使它看起来像表格。当然,调整高度和一切,使其适合。因为右边的框,我假设是文本区域,只要给它们ID和高度。

我做了一个截图来帮助可视化我的代码,而不需要实际输入。我假设您的布局是这样的,但是您当然可以轻松地添加其他列。只要做一个 formLeft 我要变成一个班,再上一个班!

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

图片上传到图片棚。我不能保证它会在那儿呆多久。

祝你好运!

rob 15 年前

我同意你的观点,你所描述的不是表格,使用DIV可能有好处,比如说,在移动设备上查看时,它们可能会更好地流动(特别是如果你给它们一个不同的样式表)。

然而,我应该说,使用DIV来处理这样的东西是一个很大的痛苦,我通常使用表来处理它,因为它非常简单,而且它们在调整列大小等方面做得更好,以适应内容。

riwalk 15 年前

我会这样做(在没有任何细节的情况下,我加入了一些示例元素):

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

DA. 15 年前

表格可视为表格数据。不是每个人都同意这个观点,但我认为这是一个50/50的决定。在这种情况下掷硬币。

我更担心的是,一个包含多个列、多个行和跨多个行的字段的表单在我看来似乎是一个布局糟糕的表单设计。在这种情况下,这可能是完全有道理的,但如果没有更多的上下文,很难说什么是最好的。

meder omuraliev 15 年前

什么是内容 ? 表格数据?如果是这样,就用桌子。